p 레이아웃은 학습의 초점입니다. 이 글에서는 p 정렬과 웹 페이지 레이아웃 관련 학습 자료를 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.
p 레이아웃을 배워야 하는 이유 I 이해하세요. 테이블 레이아웃이 정말 어색하기 때문이죠. 같은 테이블에 있으면 각 행의 사양 분포를 전혀 조정할 수 없습니다. 예를 들어 다음과 같은 매우 간단한 코드는
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <table border="1"> <tr> <td width="5%">11111111111111</td> <td width="85%">11111111111111</td> <td width="5%">11111111111111</td> <td width="5%">11111111111111</td> </tr> <tr> <td width="5%">11111111111111</td> <td width="5%">11111111111111</td> <td width="85%">11111111111111</td> <td width="5%">11111111111111</td> </tr> </table> </body> </html>
Ben I입니다. 다음과 같은 레이아웃을 작성하고 싶습니다.
그러나 실제 효과는 다음과 같습니다.
이것은 정상입니다. 왜냐하면 테이블 레이아웃의 첫 번째 행만 td 설정에 유효하고 나머지는 td에 적용되기 때문입니다. 각 행의 설정은 첫 번째 행의 td 설정으로 덮어쓰여집니다.
이 문제는 매우 심각합니다. 특히 웹 디자이너에게는 테이블의 테두리 속성을 0으로 설정하면 무슨 일이 일어났는지 파악하기 어렵습니다.
이 문제를 해결하려면 여전히 테이블 레이아웃을 사용하는 경우 두 가지 방법이 있습니다. 하나는 두 행을 동일한 테이블에 두지 않는 것이고, 다른 하나는 테이블 중첩을 사용하는 것입니다.
그런데 이건 너무 고통스럽죠? 레이아웃할 때마다 새로운 테이블을 사용해야 하는 거 아닌가요? 그리고 스크립트 번호가 어떻게 그렇게 많은 테이블을 지정합니까? 제어하는 방법?
그래서 테이블의 웹 페이지 레이아웃은 그다지 유용하지 않으며 인라인 레이아웃에만 사용할 수 있습니다. 인라인 레이아웃에서 테이블의 역할은 실제로 p에서 훨씬 더 강력합니다.
하지만 p 레이아웃도 인라인 레이아웃을 완성할 수 있지만 스타일에서 float 속성을 정의해야 하며 인라인 레이아웃을 완성하려면 스타일에서 Clear:both를 사용하여 줄을 끊어야 합니다.
위 레이어 배열은 다음 코드를 통해 이루어집니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>p</title> </head> <body> <!--默认情况下的p对齐--> <p style="background:#aa0; width:15%; height:100px;"></p> <p style="background:#0a0; width:15%; height:100px;"></p> <!--更换对齐方式,必须使用clear:both换行,这个换行符的高度为10px,默认为0px,颜色同网页的背景色--> <p style="clear:both; height:10px;"></p> <!--使用了行内右对齐的方式,是先写最右图层,再写次右图层,与常人思维相反--> <p style="background:#F00; width:10%; height:100px; float:right; margin-right:10%"></p> <p style="background:#00f; width:10%; height:100px; float:right;"></p> <p style="clear:both; height:10px;"></p> <!--使用行内左对齐方式--> <p style="background:#0f0; width:10%; height:100px; float:left;"></p> <p style="background:#F00; width:10%; height:100px; float:left;"></p> <p style="clear:both; height:10px;"></p> <p style="background:#00f; width:10%; height:100px; float:left;"></p> <!--如果你更换对齐方式,这里是希望从行内左对齐更变成一个无论大小的图层占用一行,而不用clear:both换行的话,这两个图层会叠放在一起,出错--> <p style="background:#0af; width:15%; height:100px;"></p> <!--此乃正确的使用方式。--> <p style="clear:both; height:10px;"></p> <p style="background:#aa0; width:15%; height:100px;"></p> <p style="background:#0a0; width:15%; height:100px;"></p> </body> </html>
페이지 시작 또는 끝 부분에 고정되는 탐색 모음과 같은 일부 레이어의 경우 일부는 시스템 외부에 있습니다. , 위치 정렬을 사용해야 합니다. 전자는 고정되어 있고 후자는 절대적입니다.
위 코드에 다음 코드를 계속 추가합니다.
<p style="background:#eee; width:15%; height:100px; position:absolute; top:5%; left:80%;">游离于体系之外</p> <p style="background:#aaa; width:100%; height:30px; position:fixed; top:0%;left:0%">游离于体系之外</p> <!--下面两个图层,只是为了说明上面两行代码可以放在任何位置,但不影响网页布局之用--> <p style="background:#aa0; width:15%; height:100px;"></p> <p style="background:#0a0; width:15%; height:100px;"></p>
다음 효과가 나타납니다.
위치가 고정된 레이어는 스크롤 막대를 당겨도 항상 머리가 매달립니다. down :
"Navigation Bar" 레이어와 "Advertising" 레이어에 있는 위의 두 줄의 코드는 네트워크 레이아웃에 영향을 주지 않고 어디에든 배치할 수 있습니다. 그러면 웹페이지의 모든 코드는 다음과 같이 발전합니다.
p <p style="background:#eee; width:15%; height:100px; position:absolute; top:5%; left:80%;">游离于体系之外</p> <p style="background:#aaa; width:100%; height:30px; position:fixed; top:0%;left:0%">游离于体系之外</p> <!--下面两个图层,只是为了说明上面两行代码可以放在任何位置,但不影响网页布局之用--> <p style="background:#aa0; width:15%; height:100px;"></p> <p style="background:#0a0; width:15%; height:100px;"></p>
그래서 p 레이아웃은 테이블 레이아웃보다 훨씬 강력하고 제어 가능하며 사용하기 쉽습니다
위 내용은 div 정렬 및 웹 페이지 레이아웃에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!