웹 페이지 레이아웃에 CSS를 사용하는 방법

첫 번째 날: 선택할 DOCTYPE

머리말

안녕하세요 여러분! 이 기사 시리즈는 Ajie가 w3cn.org 웹사이트를 만드는 과정에 따라 작성되었습니다. Ajie는 이전에 웹 표준을 완전히 준수하는 웹사이트를 제작한 적이 없습니다. 이제는 외국 자료를 참고해서 그 과정에서 제 생각과 경험을 기록해 두는 것이 모든 분들께 도움이 되었으면 좋겠습니다. 좋아요, 시작해 보겠습니다.

첫날

표준에 맞는 사이트를 만들기 시작하면 가장 먼저 해야 할 일은 요구 사항에 맞는 DOCTYPE을 선언하는 것입니다.

이 웹사이트 홈페이지의 원본 코드를 보면 첫 번째 줄이



유명 웹 디자인 소프트웨어 개발자 등 표준을 충족하는 일부 사이트를 엽니다. Macromedia와 개인 디자인 마스터 Zeldman 웹사이트에서도 동일한 코드를 찾을 수 있습니다. 다른 표준 준수 사이트(예: k10k.net)의 코드는 다음과 같습니다.



그럼 이 코드는 무엇을 의미하나요? 꼭 배치해야 하나요?

DOCTYPE이란

위 코드를 DOCTYPE 문이라고 부릅니다. DOCTYPE은 문서 유형의 약어이며 사용 중인 XHTML 또는 HTML 버전을 나타내는 데 사용됩니다.

DTD(예: 위 예의 xhtml1-transitional.dtd)는 문서 유형 정의라고 하며, 여기에는 문서의 규칙이 포함되어 있습니다. 브라우저는 DTD를 기반으로 페이지의 ID를 해석합니다. 정의하고 표시합니다.

표준을 준수하는 웹 페이지를 구축하려면 DOCTYPE 선언이 필수적이고 중요한 구성 요소입니다. XHTML이 올바른 DOCTYPE을 결정하지 않으면 로고나 CSS도 적용되지 않습니다.

XHTML 1.0은 선택할 수 있는 세 가지 DTD 선언을 제공합니다.

과도기: 요구 사항이 매우 느슨한 DTD로 HTML4.01 마크업을 계속 사용할 수 있습니다(그러나 xhtml 작성을 준수해야 함). 방법). 전체 코드는 다음과 같습니다.



엄격: 엄격한 DTD의 경우
과 같은 프레젠테이션 레이어 식별자 및 속성을 사용할 수 없습니다. 전체 코드는 다음과 같습니다.



프레임세트: 프레임 페이지용으로 특별히 설계된 DTD. 페이지에 프레임이 포함되어 있으면 이 DTD를 사용해야 합니다. 전체 코드는 다음과 같습니다.


어떤 DOCTYPE을 선택합니까

물론 엄격한 DTD가 이상적인 상황이지만 웹을 처음 접하는 대부분의 디자이너에게는 표준에 따르면 Transitional DTD(XHTML 1.0 Transitional)는 현재 이상적인 선택입니다(또한 Transitional DTD를 사용하는 이 사이트 포함). 또한 이 DTD를 사용하면 프리젠테이션 계층 식별자, 요소 및 속성을 사용할 수 있으므로 W3C 코드 확인을 통과하는 것도 더 쉽습니다.

참고: 위에 언급된 "프리젠테이션 레이어의 식별 및 속성"은 조판용 테이블, 배경색 식별 등과 같이 순수하게 성능을 제어하는 ​​데 사용되는 태그를 나타냅니다. XHTML에서 태그는 표현을 달성하기 위한 것이 아니라 구조를 표현하기 위해 사용됩니다. 우리 전환의 목적은 궁극적으로 데이터와 표현을 분리하는 것입니다.

예: 마네킹이 옷을 갈아입습니다. 모델은 데이터와 같고, 옷은 표현의 형태입니다. 모델과 옷이 분리되어 있어 마음대로 옷을 갈아입을 수 있습니다. 원본 HTML4에서는 데이터와 프리젠테이션이 혼합되어 있어 프리젠테이션 형식을 한 번에 바꾸는 것이 매우 어려웠습니다. 하하, 조금 추상적이네요. 이 개념은 지원 과정에서 점차적으로 이해되어야 합니다.

보충

DOCTYPE 선언은 모든 XHTML 문서의 상단, 모든 코드 및 마크업 위에 배치되어야 합니다.

자세한 내용은 W3C 홈페이지를 참고하세요

2일차: 네임스페이스란 무엇입니까

DOCTYPE이 선언된 후 다음 코드는 다음과 같습니다.



일반적으로 HTML4.0 코드는 입니다. 여기서 "xmlns"는 무엇인가요?

이 "xmlns"는 XHTML 네임스페이스의 약자로 "네임스페이스" 선언이라고 합니다. 네임스페이스의 역할은 무엇인가요? Ajie의 이해는 다음과 같습니다.

xml을 사용하면 자신만의 로고를 정의할 수 있으므로 정의한 로고는 다른 사람이 정의한 로고와 동일할 수 있지만 의미는 다릅니다. 파일을 교환하거나 공유할 때 오류가 쉽게 발생할 수 있습니다. 이 오류를 방지하기 위해 XML은 네임스페이스 선언을 사용합니다. 이를 통해 이를 가리키는 URL을 통해 신원을 식별할 수 있습니다. 예:

Xiao Wang과 Xiao Li는 모두 식별자를 정의했습니다. Xiao Wang의 네임스페이스는 "http://www.xiaowang.com"이고 Xiao Li의 네임스페이스는 "http ://"입니다. www.xiaoli.com"인 경우 두 문서가 데이터를 교환할 때 식별자는 다른 네임스페이스에 속하므로 혼동되지 않습니다.

더 대중적인 설명은 다음과 같습니다. 네임스페이스는 문서에 표시하여 이 문서가 속한 사람을 다른 사람에게 알리는 것입니다. 이 "누구"가 URL로 대체되는 것뿐입니다.

XHTML은 HTML에서 XML로 전환하는 마크업 언어이므로 XML 문서 규칙을 준수해야 하므로 네임스페이스도 정의해야 합니다. 그리고 XHTML1.0은 로고를 사용자 정의할 수 없기 때문에 네임스페이스는 "http://www.w3.org/1999/xhtml"로 동일합니다. 아직 이해하지 못하더라도 상관없습니다. 이 단계에서는 코드를 복사하기만 하면 됩니다.

뒤의 lang="gb2312"는 문서가 중국어 간체로 작성되어야 함을 지정합니다.

3일 차: 언어 인코딩 정의

세 번째 단계는 다음과 같이 언어 인코딩을 정의하는 것입니다.


브라우저에서 올바르게 해석되고 W3C 코드 확인을 통과하려면 모든 XHTML 문서가 사용하는 인코딩 언어를 선언해야 합니다. 일반적으로 gb2312(중국어 간체)를 사용합니다. 다국어 페이지를 만들 때 필요에 따라 정의할 수 있는 유니코드, ISO-8859-1 등을 사용할 수도 있습니다.

대개는 이 정의로 충분합니다. 그러나 XML 문서는 이러한 방식으로 언어 인코딩을 정의하지 않는다는 점을 추가해야 합니다.


Macromedia.com 홈 페이지의 코드 첫 번째 줄에서 비슷한 내용을 볼 수 있습니다. 이는 W3C에서 권장하는 정의 방법이기도 합니다. 그렇다면 이 접근 방식을 채택하면 어떨까요? 그 이유는 일부 브라우저가 표준을 불완전하게 지원하고 IE6/windows와 같은 정의 방법을 올바르게 이해할 수 없기 때문입니다. 따라서 현재 전환 계획에서는 여전히 메타 방식을 사용하는 것이 좋습니다. 물론 두 가지 방법 모두 쓸 수 있습니다.

이 웹사이트의 소스 코드를 보면 언어 인코딩이 정의된 문장이 하나 더 있다는 것을 알 수 있습니다:



다양한 브라우저에서 페이지를 올바르게 해석할 수 있도록 하기 위해 이전 브라우저용으로 작성되었습니다.

참고: 위 선언문 끝에 슬래시 "/"가 표시되는데, 이는 이전 HTML4.0 코드 작성과 다릅니다. 그 이유는 XHTML 구문 규칙에 따라 모든 태그에 시작과 끝이 있어야 하기 때문입니다. 예를 들어, 및 ,

및

등입니다. 페어링되지 않은 식별자의 경우 식별자 끝에 공백을 추가하고 "/ ". 예를 들어
는
로 작성하고, 는 로 작성하는 이유는 브라우저가 코드를 함께 인식하지 못하도록 하기 위함입니다.

4일차: 스타일 시트 호출

웹 표준을 사용하여 웹사이트를 디자인합니다. 전환 방법은 주로 XHTML+CSS를 사용하는 것입니다. 이를 위해서는 모든 웹 디자이너가 CSS에 능숙해야 합니다. 이전에 CSS를 사용해 본 적이 없다면 지금 배우기 시작하세요. 웹 표준을 준수하는 웹사이트를 만들려면 CSS를 모르면 아름다운 페이지를 디자인할 수 없습니다.

실제로 성능의 모든 측면을 CSS로 구현해야 합니다. 예전에는 위치 지정과 레이아웃을 위해 테이블을 사용했지만 이제는 위치 지정과 레이아웃을 위해 p를 사용해야 합니다. 이것은 발상의 전환인데, 처음에는 조금 불편합니다. 하하, 어떤 변화에도 저항이 있을 것입니다. 표준이 가져오는 "혜택"을 누리려면 일부 오래된 전통 관행을 포기하는 것이 좋습니다.

스타일 시트 외부 호출

과거에는 일반적으로 스타일 시트를 두 가지 방법으로 사용했습니다.

페이지의 인라인 방법: 즉, 스타일 시트 삽입 페이지 코드의 헤드 부분에 직접 작성합니다. 이와 비슷합니다:

외부 호출 방법 : 스타일시트를 별도의 .css 파일로 작성한 후 페이지의 헤드 영역에 다음과 유사한 코드로 호출합니다.

웹에 부합하는 디자인 표준에서는 외부 호출 방법을 사용하며 이점은 자명합니다. 페이지를 수정하지 않고 .css 파일만 수정하면 페이지 스타일을 변경할 수 있습니다. 모든 페이지가 동일한 스타일 시트 파일을 호출하는 경우 하나의 스타일 시트 파일을 변경하면 모든 파일의 스타일이 변경될 수 있습니다.

스타일 시트를 호출하는 이중 테이블 방법

일부 표준 준수 사이트의 원본 코드를 보면 다음과 같은 2개의 문장이 있는 것을 볼 수 있습니다. 스타일 시트의 이름은 다음과 같습니다.

;style type="text /css" media="all">@import url( css/style01.css );

왜 두 번 써야 하나요?

사실 일반적인 상황에서는 외부링크 방식(즉, 첫 번째 문장)만 사용해도 충분합니다. 여기서 사용하는 이중 테이블 호출은 단지 예일 뿐입니다. "@import" 명령은 스타일 시트를 입력하는 데 사용됩니다. "@import" 명령은 Netscape 4.0 브라우저에서 유효하지 않습니다. 즉, Netscape 4.0 브라우저에서는 특정 효과를 숨기고 4.0 이상이나 다른 브라우저에서 표시하려는 경우 "@import" 명령 메소드를 사용하여 스타일 시트를 호출할 수 있습니다.

5일차: 헤드 영역의 기타 설정

이 팁은 주로 메타 태그 설정에 중점을 둡니다. 실제로 웹 표준 준수와는 거의 관련이 없습니다. 마지막에 추가하는 것에 주의하세요. "/"만 사용하여 태그를 닫을 수 있지만, 이것은 입문용 튜토리얼이므로 좀 더 자세히 작성해 보겠습니다.

즐겨찾기 아이콘

이 사이트를 즐겨찾기에 추가하시면 즐겨찾기 URL 앞의 IE 아이콘이 이 사이트의 특별한 아이콘이 되는 것을 보실 수 있습니다. 이 효과를 얻는 방법은 매우 간단합니다. 먼저 16x16 아이콘을 만들고 이름을 favicon.ico로 지정한 다음 루트 디렉터리에 배치합니다. 그런 다음 헤드 영역에 다음 코드를 삽입합니다.



< ;link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

검색 엔진용 콘텐츠

코드는 다음과 같습니다. 자신의 사이트 콘텐츠로 바꾸면 됩니다.

검색 로봇이 사이트의 모든 링크를 검색하도록 허용합니다. 특정 페이지를 검색하지 않으려면 robots.txt 방식을 사용하는 것이 좋습니다

사이트 작성자 정보 설정



사이트 저작권 정보 설정



사이트에 대한 간략한 소개(권장)



사이트 키워드(권장)



이 정도만 먼저 소개하겠습니다. 보충 설명, 이전 5개 섹션은 모두 헤드 영역의 코드에 관한 것이었고 실제 페이지 내용은 전혀 언급되지 않았습니다. 하하. 사실 헤드 영역은 매우 중요하다는 것을 알 수 있습니다. 페이지의 헤드 코드를 보고 디자이너를 만드는 것만으로도 충분합니까?

6일차: XHTML 코드 사양

공식적인 콘텐츠 제작을 시작하기 전에 먼저 웹 표준의 코드 사양을 이해해야 합니다. 이러한 사양을 이해하면 우회를 피하고 최대한 빨리 비밀번호 확인에 도움이 될 수 있습니다.

1. 모든 태그에는 해당하는 닫는 태그가 있어야 합니다.

과거에는 HTML에서

li>를 사용하여 해당

를 작성하는 대신에 그러나 이것은 XHTML에서는 합법적이지 않습니다. XHTML은 엄격한 구조를 요구하며 모든 태그를 닫아야 합니다. 페어링되지 않은 별도의 태그인 경우 태그 끝에 "/"를 추가하여 닫습니다. 예:


🎜>

2. 모든 태그 요소와 속성의 이름은 소문자여야 합니다.
HTML과 달리 XHTML은 대소문자를 구분하며

페이지 왼쪽 열

페이지 중간 열

페이지 오른쪽 열

이때, 페이지는 병치된 회색 직사각형의 세 부분과 배경 이미지로만 볼 수 있습니다. 그런데 높이를 전체화면으로 하고 싶은데 어떻게 해야 하나요?

4.100% 적응형 높이?

세 열의 높이를 동일하게 유지하기 위해 #왼쪽, #가운데, #오른쪽 %에 "height:100"을 설정해 보았습니다. ;", 그러나 예상되는 적응형 높이 효과가 전혀 없는 것으로 나타났습니다. 몇 번 시도한 후에 각 p에 절대 높이("높이:1000px;")를 지정해야 했고, 콘텐츠가 증가함에 따라 이 값을 지속적으로 수정해야 했습니다. 높이 조절하는 방법은 없나요? Ajie 자신의 연구가 심화됨에 따라 그는 유연한 해결책을 발견했습니다. 실제로 100%를 설정할 필요는 없습니다. 우리는 테이블 사고에 너무 깊이 갇혀 있었습니다. 이 방법은 다음 연구 섹션에서 자세히 소개됩니다.

10일 차: 적응형 높이

3열 레이아웃 끝에 바닥글 줄을 추가하여 저작권 등의 정보를 넣고 싶은 경우. 3열의 하단을 정렬해야 하는 문제가 발생했습니다. 테이블 레이아웃에서는 큰 테이블을 작은 테이블에 중첩하는 방법을 사용하는데, 이는 세 개의 열을 쉽게 정렬할 수 있지만 p 레이아웃에서는 세 개의 열이 독립적으로 흩어져 있고 내용의 높이가 다르기 때문에 정렬하기가 어렵습니다. 실제로 p를 완전히 중첩하고 세 개의 열을 하나의 p에 넣고 하단 정렬을 달성할 수 있습니다. 다음은 구현 예입니다(흰색 배경 상자가 페이지를 시뮬레이션함).

이 예에서 페이지의 기본 코드는 다음과 같습니다.

< ;/p>

특정 스타일 시트 해당 섹션에 모두 작성되어 있습니다. 핵심은 #mainbox 레이어가 #menu, #sidebar 및 #content의 세 레이어에 중첩되어 있다는 것입니다. #content의 컨텐츠가 증가하면 #content의 높이가 증가하고 #mainbox의 높이도 확장되며 #footer 레이어가 자동으로 아래로 이동합니다. 이는 높은 수준의 적응성을 달성합니다.

#menu와 #content가 "FLOAT: right;" 페이지 오른쪽에 떠 있고, #sidebar가 #menu 레이어 "FLOAT: left" 왼쪽에 떠 있다는 점도 주목할 만합니다. ;", 이는 부동 방법 위치 지정이므로 절대 위치 지정을 사용하여 이러한 효과를 얻을 수도 있습니다.

이 방법에는 또 다른 문제가 있습니다. 즉, 사이드바의 배경이 #sidebar 100%가 될 수 없다는 것입니다. 일반적인 해결책은 본문의 배경색으로 채우는 것입니다. (#mainbox의 배경색은 Mozilla 등의 브라우저에서는 #mainbox의 배경색이 유효하지 않기 때문에 사용할 수 없습니다.)

자, 메인 프레임워크는 구축되었고, 남은 작업은 추가만 하면 됩니다. 그것에 벽돌과 타일. 다른 레이아웃을 시도해보고 싶다면 다음 기사를 읽어보는 것이 좋습니다.

11일차: 테이블 없는 메뉴

처음에 레이아웃을 설정하고, 안에 내용을 채워넣기 시작했습니다. 첫 번째는 로고 이미지를 정의하는 것입니다:

스타일 시트: #logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;}
페이지 코드:

위 코드는 이제 이해하기 쉬울 것입니다. 먼저 CSS에서 로고 레이어를 정의한 다음 페이지에서 호출하세요. 웹 페이지를 더욱 유용하게 만들기 위해 웹 표준에서는 모든 사람이 공식 콘텐츠인 모든 이미지에 alt 속성을 추가하도록 요구합니다. 이 alt 속성은 이미지의 기능(이미지를 표시할 수 없을 때 대체 텍스트 표시)을 설명하는 데 사용되므로 의미 없는 이미지 이름을 그냥 쓰지 마세요.

다음 단계는 정의 메뉴입니다.

1. 테이블이 없는 메뉴(세로)

먼저 메뉴의 최종 효과를 살펴보겠습니다. 데모 페이지

보통은 최소한 중첩됩니다. 이러한 메뉴를 구현하기 위해 2레이어 테이블을 사용합니다. 간격 선은 td에 배경색을 설정하고 1px 높이의 투명 GIF 이미지를 삽입하여 구현합니다. 배경색의 교대 효과는 td의 onmouseover 이벤트를 사용하여 구현됩니다. . 그런데 이 메뉴의 페이지 코드를 보면

< ;li>웹 표준이란

• 표준 사용의 이점


• 웹 페이지 템플릿 다운로드


• WEB 표준 관련 튜토리얼


• 웹 페이지 제작 소프트웨어< ;/li>
  
• 도움말 사용

은 테이블을 사용하지 않고, unsequenced

를 사용하여 전체 메뉴의 효과를 구현하는 비결은 전적으로 id="에 있습니다. menu". CSS에서 메뉴 정의를 살펴보겠습니다.

(1) 먼저 메뉴 레이어의 기본 스타일이 정의됩니다.

#menu {
MARGIN: 15px 20px 0px 15px; /*레이어의 외부 테두리 거리를 정의합니다*/
PADDING:15px; /*레이어의 내부 테두리를 15px로 정의합니다*/
BACKGROUND: #dfdfdf; /*배경 색상 정의*/
COLOR: #666; /*글꼴 색상 정의*/
BORDER:#fff 2px solid; /*테두리를 2px 흰색 선으로 정의*/
WIDTH:160px; /*콘텐츠 너비를 160px로 정의*/
}

(2) 다음으로 순서가 지정되지 않은 목록의 스타일을 정의합니다.

#menu ul {
MARGIN: 0px;
PADDING: 0px;
BORDER: 중간 없음 /*테두리 표시 안 함*/
LINE-HEIGHT: 일반;
LIST-STYLE-TYPE: 없음;
}

#menu li {BORDER-TOP : #FFF 1px solid;}

참고: 여기서 사용되는 것은 id 선택자의 파생된 메서드 정의입니다(Day 참조). 7: CSS 소개) 메뉴 레이어

및
• 스타일의 하위 요소에 대한 설명입니다. LIST-STYLE-TYPE: 없음은 순서가 지정되지 않은 목록의 기본 스타일이 사용되지 않음을 의미합니다. 즉, 작은 점이 표시되지 않습니다(나중에 자체 아이콘을 사용하여 작은 점을 대체합니다). BORDER-TOP: #FFF 1px 실선은 메뉴 사이에 1px 간격 선을 정의합니다.
  
  (3) 마우스 오버 효과 정의
  
  #menu li a {
  PADDING:5px 0px 5px 15px;
  DISPLAY: block
  FONT; -WEIGHT: 굵게;
  배경: url(images/icon_dot_lmenu.gif) 투명 no-repeat 2px 8px;
  WIDTH: 100%;
  TEXT-DECORATION: 없음;
  }
  #menu li a:hover { BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px;
  COLOR: #fff }
  
  
  설명은 다음과 같습니다.
  "display:block;"은 태그 a를 블록 수준 요소로 표시하여 링크를 버튼으로 만드는 것을 의미합니다.
  "BACKGROUND: url(images/ icon_dot_lmenu.gif ) transparent no-repeat 2px 8px;" 이 문장은 li를 대체하는 작은 점의 아이콘을 정의합니다. "투명"은 배경이 투명함을 의미하고, "2px 8px"는 아이콘 위치가 왼쪽에서 2px, 위쪽에서 8px임을 지정합니다. 이 문장은 다음 네 문장으로 나눌 수도 있습니다. "BACKGROUND-IMAGE: url(images/icon_dot_lmenu.gif); BACKGROUND-POSITION: 2px 8px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: transparent
  " #menu li a:hover"는 링크 위로 마우스를 이동할 때 색상 변경과 작은 아이콘 변경을 정의합니다.
  
  자, 이것이 표가 없는 메뉴가 구현되는 방식입니다. 원래 HTML로 작성된 모든 프리젠테이션 스타일을 제거하여 CSS 파일에 넣은 것을 분명히 느낄 수 있습니다. 페이지 코드가 절반 이상 저장됩니다. CSS를 통해 메뉴 스타일을 수정하는 것은 매우 간단합니다.
  
  2. 테이블이 없는 메뉴(가로)
  
  위는 세로 메뉴를 표시하고 싶은 경우 li도 사용할 수 있나요? 물론 가능합니다. 코드는 아래에 있으며 효과는 이 페이지 상단에 있습니다.
  
  페이지 코드
  
  
  
  
  • 홈< li id="two">회사 소개< /li>
    
  • 웹 표준
  • 표준의 이점< ;/a> ;
  
  
  
  
  • 관련 튜토리얼
  
  
  • 도구
  
  
  • 리소스 및 링크
  
  
  • FAQ
  
  
  
  
  
  스타일 시트 코드
  
  # submenu {
  여백: 0px 8px 0px 8px;
  테두리: #fff 1px
  색상: #666 >HEIGHT :25px }
  
  #submenu ul {
  여백: 0px
  BORDER: 0px; : 없음;
  TEXT-ALIGN: 중앙;
  DISPLAY:inline;
  }
  
  #submenu li {
  FLOAT: 왼쪽;
  여백: 0px;
  PADDING: 0px;
  TEXT-ALIGN: center}
  
  #submenu li a {
  PADDING: 2px 3px 2px 3px; >배경: url(images/icon_dot_lmenu.gif) 투명 반복 없음 2px 8px;
  글꼴 크기: 굵게;
  색상: #444; 없음;
  }
  
  #submenu li a:hover {
  BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 반복 없음 2px 8px }
  
  #submenu ul li#one A { WIDTH: 60px}
  #submenu ul li#two A { WIDTH: 80px}
  #submenu ul li# three A { WIDTH: 80px}
  #submenu ul li#four A {WIDTH: 90px}
  #submenu ul li#five A {WIDTH: 80px}
  #submenu ul li#six A {WIDTH: 80px}
  #submenu ul li# Seven A { WIDTH: 60px}
  #submenu ul li#eight A { WIDTH: 90px}
  #submenu ul li#nine A { WIDTH: 80px}
  
  위 코드는 분석되지 않습니다. 하나씩 . 가로 메뉴의 핵심은
• 스타일을 정의할 때 "FLOAT: left;" 문입니다. 또한 UL 정의의 DISPLAY:inline; 문장에 주의하세요. 이는 li가 강제로 인라인 개체로 표시되고 해당 줄이 개체에서 삭제된다는 의미입니다. 수평 배치를 달성합니다. 또한 예시와 같이 각 하위 메뉴의 너비를 정의하고 메뉴 간격을 제어할 수도 있습니다. 음, 시도해 보고 li를 사용하여 다양한 메뉴 스타일을 구현할 수도 있습니다.
  
  팁: 하위 메뉴 너비의 합이 레이어 너비보다 크면 메뉴가 자동으로 줄바꿈됩니다. 이 원리를 사용하면 단일 메뉴의 2열 또는 3열 레이아웃을 얻을 수 있습니다. HTML에서는 달성하기 어려운 정렬되지 않은 목록입니다.
  
  
  

  12일차: 유효성 검사 및 일반적인 오류

  며칠 동안 열심히 일한 후 XHTML+CSS를 사용하여 웹사이트를 다시 디자인하는 방법을 열심히 배웠습니다. 그렇다면 우리가 만드는 페이지가 실제로 웹 표준을 준수하는지 어떻게 알 수 있을까요? W3C 및 일부 자원 봉사 웹사이트는 페이지가 표준을 준수하는지 확인하고 오류 수정을 위한 도움말 정보를 제공하는 데 도움이 되는 온라인 검증 프로그램을 제공합니다. 이러한 검사는 매우 유용하며 페이지를 디버깅할 때 가장 먼저 수행하는 작업입니다.
  
  1. , 파일 업로드 확인
  확인에 성공하면 그림과 같이 "이 페이지는 유효한 XHTML 1.0 전환입니다!"가 표시됩니다.
  
  
  
  
  확인에 실패했습니다. 그림과 같이 추가 확인 옵션과 오류 메시지가 표시됩니다.
  
  
  
  일반적으로 " 소스 표시" 및 "자세한 출력"을 사용하면 오류 코드가 있는 줄과 오류 이유를 찾는 데 도움이 됩니다.
  
  XHTML 유효성 검사 일반 오류로 인해 비교 테이블이 발생합니다
  
  
  DOCTYPE을 찾을 수 없습니다. HTML 4.01 전환으로 돌아가는 중--DOCTYPE이 정의되지 않았습니다.
  문자 인코딩을 찾을 수 없습니다. UTF-8로 대체됩니다.--정의되지 않은 언어 인코딩입니다.
  "img"의 종료 태그가 생략되었지만 OMITTAG NO가 지정되었습니다.--이미지 태그는 "/"로 닫히지 않습니다.
  
  SHORTTAG YES가 지정되지 않는 한 속성 값 사양은 속성 값 리터럴이어야 합니다. 속성 값은 따옴표로 묶어야 합니다.
  
  요소 "p" 정의되지 않음---p 태그는 대문자일 수 없으며 p를 소문자로 변경해야 합니다.
  
  필수 속성 "alt"가 지정되지 않았습니다---이미지에 alt 속성을 추가해야 합니다.
  
  필수 속성 "type"이 지정되지 않았습니다---JS 또는 CSS에서 호출한 태그에 유형 속성이 누락되었습니다.
  
  가장 흔히 저지르는 실수는 라벨을 대문자로 표기하는 것입니다. 일반적으로 이러한 오류는 관련되어 있습니다. 예를 들어

를 잊어버리면 다른
• 태그가 오류를 보고하므로 일반적으로 하나의 오류가 해결되면 다른 오류는 사라집니다. 페이지가 XHTML1.0 유효성 검사를 통과하면 페이지에 아이콘을 배치할 수 있습니다. 코드는 다음과 같습니다.
  
  

  check/referer">< ;/ a>

  
  
  
  2.CSS2 검증
  
  
  검증 URL: http://jigsaw.w3.org/css-validator/
  검증방법 : URL검증, 파일업로드검증, 직접코드검증
  검증에 성공하면 "축하합니다. 이 문서는 스타일시트 검증을 통과했습니다!" 호호, 검증정보는 중국어를 지원합니다. . 그림과 같이
  
  
  
  
  확인에 실패하면 오류와 경고라는 두 가지 유형의 오류가 표시됩니다. 오류는 수정해야 함을 의미합니다. 그렇지 않으면 검증을 통과하지 못할 것입니다. 경고는 W3C에서 권장하지 않는 코드가 있으므로 수정을 권장한다는 의미입니다.
  
  CSS2 유효성 검사 공통 오류로 인해 비교표가 발생함
  
  
  (오류) 잘못된 번호: color909090은 색상 값이 아닙니다: 909090 --- 16진수 색상 값을 추가해야 합니다. " 기호, 즉 #909090
  (오류) 잘못된 숫자: margin-topUnknown 차원: 6pixels ---픽셀은 단위 값이 아니며 올바른 표기 방법은 6px입니다
  (오류) 스크롤 막대-얼굴 색상 속성이 존재하지 않습니다: #eeeeee --- 스크롤 막대 색상을 비표준 속성
  
  으로 정의합니다. (오류) 값 커서핸드가 존재하지 않습니다: 손은 비표준입니다. 속성 값을 커서:포인터
  
  로 변경합니다. (경고) 줄: 0 글꼴 계열: 마지막 선택으로 유형군을 지정하는 것이 좋습니다. W3C에서는 글꼴을 정의할 때 다음으로 끝나는 것을 권장합니다. "sans-serif"와 같은 글꼴 유형을 사용하여 다양한 작업에 사용할 수 있도록 시스템에서 웹 글꼴을 표시할 수 있습니다.
  
  (경고)행: 0 can't find the warning message for otherprofile --코드에 비표준 속성이나 값이 있어 검증 프로그램이 해당 경고 정보를 판단하고 제공할 수 없음을 나타냅니다. .
  
  마찬가지로 확인을 통과한 후 CSS 확인 통과 아이콘을 배치할 수 있으며 코드는 다음과 같습니다.
  
  

  w3.org/ css-validator/">

  
  
  
  
  
  
  -->

위 내용은 웹 페이지 레이아웃에 CSS를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!