3種常見的css頁面佈局--雙飛翼佈局、粘連佈局、左右兩列布局

時間 2019-12-27

標籤常見的 css 頁面佈局雙飛粘連左右欄目 CSS 简体版

原文原文鏈接

1、左右兩列布局css

一、代碼以下，可先粘貼複製，自行運行html

<!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>佈局

二、必要說明字體

外層容器con若是爲固定寬度，right元素的overflow: hidden;是必須的，不然會出現rig中的字體不在rig裏面spa

外層容器con寬度若是是100%，或者默認，此時right元素的overflow: hidden;無關緊要，頁面不會所以受到影響scala

2、粘連佈局htm

一、代碼以下：ip

<!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>

<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>

<div class="footer">
footer
</div>
</body>
</html>it

3、雙飛翼佈局

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>雙飛翼三列布局</title>
<style type="text/css">
/*清除瀏覽器默認樣式*/
*{
padding: 0;
margin: 0;
}
/*設置body的最小寬度*/
body{
min-width: 600px;
}
/*左浮動*/
.fl{
float: left;
}
/*雙飛翼三列布局*/
.mid{
width: 100%;
}
.lef{
width: 200px;
background: mediumpurple;
margin-left: -100%;
}
.rig{
width: 200px;
background: orangered;
margin-left: -200px;
}
.inn_mid{
margin: 0 200px;
background: pink;
}
/*等高佈局*/
/* 先使子元素溢出父盒子範圍，而後在父盒子中設置overflow:hidden;清除溢出部分，從而由原來的不等高達到等高效果 */
.mid, .lef, .rig{
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.con{
border: 5px solid deepskyblue;
overflow: hidden;
}
</style>
</head>
<body>
<div class="con">
<div class="mid fl">
<div class="inn_mid">
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
</div>
</div>
<div class="lef fl">left</div>
<div class="rig fl">right</div>
</div>
</body>
</html>

end，至此三個常見佈局介紹完畢，建議稍微花點時間琢磨一下，其中微妙之處只可意會不可言傳

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。