이 기사에서는 세 가지 일반적인 CSS 페이지 레이아웃, 즉 이중 비행 날개 레이아웃, 글루 레이아웃, 왼쪽 및 오른쪽 열 레이아웃을 소개합니다.
(권장 튜토리얼 : CSS 비디오 튜토리얼)
1은 다음과 같습니다. 2. 필수 지침Exception 레이어 컨테이너의 너비가 고정된 경우 오른쪽 요소의 Overflow:hidden이 필요합니다. 그렇지 않으면 리그의 글꼴이 리그에 포함되지 않습니다.
외부 컨테이너 con의 너비가 100% 또는 기본값인 경우 오른쪽 요소의 Overflow:hidden은 선택 사항이며 페이지는 영향을 받지 않습니다.
2. 접착 레이아웃
1. 코드는 다음과 같습니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>两列布局</title> <!--左边列固定,右边列自适应--> <style type="text/css"> *{ padding: 0; margin: 0; } body{ min-width: 600px; } .lef{ width: 100px; height: 400px; background: hotpink; float: left; } .rig{ height: 400px; background: yellowgreen; margin-left: 50px; /*给right开启BFC 利用BFC的特性: bfc的区域不会与浮动的box重叠*/ /* 溢出内容部分被切割,所以使用省略号表示 */ overflow: hidden; /*出现省略号需要四个设置: * display: block; * overflow: hidden; * white-space: nowrap; * text-overflow: ellipsis * */ /* white-space: nowrap; */ /* text-overflow: ellipsis; */ } .con{ width: 300px; margin: 0 auto; } </style> </head> <body> <div class="con"> <div class="lef">left</div> <div class="rig"> lzprightrightrightrightrightrightrightrightrightrightrightrightrightright <br /> rightrightrightrightrightrightrightrightrightrightrightrightrightright <br /> rightrightrightrightrightrightrightrightrightrightrightrightrightright <br /> rightrightrightrightrightrightrightrightrightrightrightrightrightright <br /> </div> </div> </body> </html>
3. 이중 비행 날개 레이아웃
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"/> <title>粘连布局</title> <!-- 当页面中无内容或内容不足一屏时,footer在页面最底部显示 当页面内容很多一屏装不下时,footer紧随内容其后显示 --> <style type="text/css"> *{ padding: 0; margin: 0; } html, body{ height: 100%; } .wrap{ /* 设置wrap的最小高度,当main元素中的内容较少或者为空时,也能保持100%高度 */ min-height: 100%; background: yellowgreen; text-align: center; } .main{ /*main的height值由内容决定*/ /*当内容不足一屏时,下面的设置不会撑开父元素wrap,此时wrap的min-height设置生效, * 当内容刚好一屏时,下面的设置开始撑开父容器,其height值为100%+50px。 * 拉开这50px的原因是防止footer遮盖住main内容,这个值不是固定死的,由footer的高度值决定 * 为footer向上填充margin-top: -50px;做准备 * */ padding-bottom: 50px; } .footer{ height: 50px; line-height: 50px; background: deeppink; text-align: center; margin-top: -50px; } </style> </head> <body> <div class="wrap"> <div class="main"> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> mlzpain<br /> </div> </div> <!--footer元素放在wrap外--> <div class="footer"> footer </div> </body> </html>효과는 다음과 같습니다.
프로그래밍 관련 지식이 있는 경우 다음 페이지를 방문하세요:
프로그래밍 교육! !
위 내용은 CSS의 세 가지 일반적인 페이지 레이아웃: 이중 날개 레이아웃, 글루 레이아웃, 왼쪽 및 오른쪽 열 레이아웃의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!