CSS의 세 가지 일반적인 페이지 레이아웃: 이중 날개 레이아웃, 글루 레이아웃, 왼쪽 및 오른쪽 열 레이아웃-CSS 튜토리얼-php.cn

CSS의 세 가지 일반적인 페이지 레이아웃: 이중 날개 레이아웃, 글루 레이아웃, 왼쪽 및 오른쪽 열 레이아웃

青灯夜游

풀어 주다： 2020-12-14 18:06:38

앞으로

3096명이 탐색했습니다.

이 기사에서는 세 가지 일반적인 CSS 페이지 레이아웃, 즉 이중 비행 날개 레이아웃, 글루 레이아웃, 왼쪽 및 오른쪽 열 레이아웃을 소개합니다.

CSS의 세 가지 일반적인 페이지 레이아웃: 이중 날개 레이아웃, 글루 레이아웃, 왼쪽 및 오른쪽 열 레이아웃

(권장 튜토리얼 : CSS 비디오 튜토리얼)

1은 다음과 같습니다. 2. 필수 지침Exception 레이어 컨테이너의 너비가 고정된 경우 오른쪽 요소의 Overflow:hidden이 필요합니다. 그렇지 않으면 리그의 글꼴이 리그에 포함되지 않습니다.

외부 컨테이너 con의 너비가 100% 또는 기본값인 경우 오른쪽 요소의 Overflow:hidden은 선택 사항이며 페이지는 영향을 받지 않습니다.

2. 접착 레이아웃

CSS의 세 가지 일반적인 페이지 레이아웃: 이중 날개 레이아웃, 글루 레이아웃, 왼쪽 및 오른쪽 열 레이아웃 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의 세 가지 일반적인 페이지 레이아웃: 이중 날개 레이아웃, 글루 레이아웃, 왼쪽 및 오른쪽 열 레이아웃 프로그래밍 관련 지식이 있는 경우 다음 페이지를 방문하세요: