首頁  >  文章  >  web前端  >  CSS中3種常見頁面佈局:雙飛翼佈局、黏連佈局、左右兩列佈局

CSS中3種常見頁面佈局:雙飛翼佈局、黏連佈局、左右兩列佈局

青灯夜游
青灯夜游轉載
2020-12-14 18:01:103036瀏覽

本文就來為大家介紹3種常見的CSS頁面佈局:雙飛翼佈局、黏連佈局、左右兩列佈局,希望對大家有一定的幫助。

CSS中3種常見頁面佈局:雙飛翼佈局、黏連佈局、左右兩列佈局

(推薦教學: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>

效果如下:

CSS中3種常見頁面佈局:雙飛翼佈局、黏連佈局、左右兩列佈局

#2、必要說明

外層容器con如果要固定寬度,right元素的overflow: hidden;是必須的,否則會出現rig中的字體不在rig裡面。

外層容器con寬度如果是100%,或是默認,此時right元素的overflow: hidden;可有可無,頁面不會因此受到影響。

二、黏連版面

1、程式碼如下:

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

效果如下:

CSS中3種常見頁面佈局:雙飛翼佈局、黏連佈局、左右兩列佈局

#更多程式相關知識,請造訪:程式設計教學! !

以上是CSS中3種常見頁面佈局:雙飛翼佈局、黏連佈局、左右兩列佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:cnblogs.com。如有侵權,請聯絡admin@php.cn刪除