숙련된 드라이버가 호환성이 좋은 페이지 작성 방법을 알려드립니다.

호환성이 좋은 페이지를 작성하기 전에 먼저 HTML과 HTML5를 배우고 CSS와 CSS3에 대해 어느 정도 이해해야 합니다.

일반적으로 다양한 유형의 웹사이트를 신중하게 조판한 후에는 프런트엔드에 대한 어느 정도의 숙달이 이루어지고 정적인 페이지를 작성하는 것은 큰 문제가 되지 않습니다. 숫자로 따지면 3개 이상의 완전한 웹사이트입니다.

알림: 호환성이 매우 좋은 페이지를 작성하려면 js가 필수적입니다. 초보자가 프론트엔드를 배우기에는 조금 어렵지만 겁먹지 마세요. , 학습진행에 따라 학습하고, 먼저 HTML+CSS를 배우고, 그다음 HTML5+CSS3을 배우고, 특정 프로그램을 학습한 후 그 다음 자바스크립트를 배우며, 독학이라 하더라도 HTML+CSS는 2개월 정도 걸리고, 자바스크립트는 다 배우게 됩니다. 한달이면 배울 수 있어요.

아직 위 내용을 모르신다면 HTML 동영상 튜토리얼, HTML5 튜토리얼을 참고하세요. , CSS 동영상 튜토리얼, CSS3 동영상 튜토리얼, javascript 동영상 튜토리얼.

말이 너무 많아서 호환성이 좋은 웹페이지를 작성하는 방법에 대해 이야기해 보겠습니다.

1. 문서 선언은 필수입니다. < !doctype>

사실 이는 WCAG와 전혀 직접적인 관련이 없지만, 더 나은 호환성, 특히 이전 버전과의 호환성을 위해서는 다음과 같이 작성해야 합니다.

< !doctype>

2. 호환성 태그를 사용하지 마세요.

학습 과정에서 이미 일부 호환성이 있는 경우에만 사용하세요. 이 태그의 효과가 특정 브라우저, 특히 H5에서 효과적이기를 원합니다. 이제 많은 태그가 모든 브라우저에서 균일하게 유효하지 않습니다.

3. CSS를 작성하기 전에 반드시 형식을 지워야 합니다.

대부분의 태그는 호환되지만 반드시 사용해야 하기 때문에 태그 형식을 지우는 것이 필요합니다(예: ul 태그). IE6 및 7에서는 기본적으로 외부 여백이 있고 IE8, Firefox 및 Google에서는 기본적으로 내부 여백이 있습니다.

4. 일반적인 브라우저 버그는 피해야 합니다

예: 중첩된 p에서 외부 p에 테두리가 없으면 여백 상단 내부 p는 유효하지 않으며 외부 DIV에 직접 영향을 미칩니다(즉, 외부 p margin-top의 효과)

5. 하위 요소는 부동 상태이며 상위 요소는 하위 요소를 래핑할 수 없습니다. 기본 요소

이 상황은 일반적으로 if 메서드로 처리됩니다:

1. 상위 요소에 Overflow:hidden을 추가합니다. 표시할 요소를 나중에 사용할 수 없도록 해야 합니다. 그렇지 않으면 표시되지 않습니다.

<style type="text/css">
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}
.p2{background:#800080;border:1px solid red;height:100px;width:98%;}
.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<p class="p1">
<p class="left">Left</p>
<p class="right">Right</p>
</p>
<p class="p2">
p2 
</p>

2. 마지막 부동 하위 요소

<style type="text/css">
.p1{background:#000080;border:1px solid red}
.p2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat{clear:both}
</style>
<p class="p1">
<p class="left">Left</p>
<p class="right">Right</p>
<p class="clearfloat"></p>
</p>
<p class="p2">
p2 
</p>

뒤에 명확한 부동 요소를 추가합니다. 3. 상위 p는 의사 클래스를 정의합니다: after 및 Zoom

/*清除浮动代码*/ 
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.clearfloat{zoom:1}

원칙: After IE8 이상 및 IE가 아닌 브라우저에서만 지원됩니다. 원리는 방법 2와 다소 유사합니다. 줌(속성으로 변환된 IE)은 ie6 및 ie7의 부동 문제를 해결할 수 있습니다

4. 상위 요소도 floats 5. 상위 p는 Overflow:auto를 정의합니다. 6. 상위 p는 display:table

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;} 
.p2{background:#800080;border:1px solid red;height:100px;width:98%;} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

를 정의합니다.6. 조판 구조 문제

웹 사이트의 호환성을 원하는 경우 , 집을 짓는 것과 같습니다. 집을 튼튼하게 짓고 싶다면 견고한 프레임이 기본입니다. 따라서 웹사이트의 호환성을 높이려면 프레임 구조가 좋아야 확장성이 좋습니다. 프런트 오피스와 백 오피스 모두에 적용됩니다.

프론트엔드 프레임워크는 어떻게 구축해야 할까요? 다음과 같은 측면에 주목할 수 있을 것 같습니다.

계층 구조를 간략하게 분석해야 합니다. 위, 가운데, 아래, 왼쪽, 중간, 오른쪽 레이어

구조를 먼저 크게 만든 다음 작게 만들어야 합니다. 예를 들어 웹 페이지 중간에 왼쪽과 오른쪽이 있는 경우입니다. 중앙에 큰 것을 두는 것이 가장 좋으며 그 다음 왼쪽, 그 다음 오른쪽

가장 좋은 순서는 먼저 위 아래, 먼저 왼쪽 다음 오른쪽, 먼저 바깥쪽 다음 안쪽, 먼저 전체 그 다음 부분

7. 위치 지정 및 플로팅 등에 대해

어떤 학생들은 레이아웃을 할 때 구조에 편차가 있으면 요소에 갑자기 위치 지정 또는 플로팅 속성을 추가합니다. 그는 그것이 괜찮다고 생각합니다. 그가 생각하는 시각적 효과를 달성했다고 말할 수 있지만 웹 페이지 호환성이 좋은지 여부는 알 수 없습니다.

이것은 마치 닭을 죽이기 위해 정육점 칼을 사용하는 것과 같습니다. 과격하고 매우 부적절하게 사용됩니다. 따라서 사용해야 할 것을 사용하고 단지 위치를 지정하거나 띄우지 마십시오.

8. CSS 작성 문제

상위-하위 관계를 사용하여 정의해 보세요(예: #top .left img{}). 이렇게 하면 확장성이 향상되고 앞으로는 발생하지 않을 것입니다. 새로운 class="left"는 이 left와 충돌합니다. ID가 반복적으로 정의되지 않는 한 괜찮습니다.