div 정렬 및 웹 페이지 레이아웃에 대한 자세한 설명-HTML 튜토리얼-php.cn

div 정렬 및 웹 페이지 레이아웃에 대한 자세한 설명

巴扎黑

풀어 주다： 2017-09-02 09:54:23

원래의

1454명이 탐색했습니다.

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>