布局方式
一列布局
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px}
div{ text-align:center; font-weight:bold}
.main,.footer{ width:960px; margin:0 auto;}
.head{ width:100%; height:100px; background:#ccc}
.main{ height:600px; background:#FCC}
.footer{ height:50px; background:#9CF}
</style>
</head>
<body>
<div class="head">head</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
</html>
效果：
二列布局
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.main{ width:100%; height:600px; margin:0 auto}
.left{ width:38%; height:600px;background:#ccc; float:left;text-align:left; }/*左浮動(dòng)樣式*/
.right{ width:60%; height:600px; background:#FCC; float:right;text-align:left;}/*右浮動(dòng)樣式*/
</style>
</head>
<body>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
效果：
三列布局
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ line-height:50px}
.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:600px; margin:0 310px 0 210px; background:#9CF}
.right{ height:600px; width:300px; right:0;top:0; position:absolute; background:#FCC;}
</style>
</head>
<body>
<div class="left">left</div>
<div class="main">設(shè)計(jì)首頁(yè)的第一步是設(shè)計(jì)版面布局膊升。就象傳統(tǒng)的報(bào)刊雜志編輯一樣摩幔，我們將網(wǎng)頁(yè)看作一張報(bào)紙沃斤，一本雜志來(lái)進(jìn)行排版布局。 雖然動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)的發(fā)展使得我們開(kāi)始趨向于學(xué)習(xí)場(chǎng)景編劇抡四，但是固定的網(wǎng)頁(yè)版面設(shè)計(jì)基礎(chǔ)依然是必須學(xué)習(xí)和掌握的钧萍。它們的基本原理是共通的狈邑，你可以領(lǐng)會(huì)要點(diǎn)，舉一反三碘菜。</div>
<div class="right">right</div>
</body>
</html>
效果：
混合布局
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局</title>
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.top{ height:100px;background:#9CF}
.head,.main{ width:960px; margin:0 auto;}
.head{ height:100px; background:#F90}
.left{ width:220px; height:600px; background:#ccc; float:left;}
.right{ width:740px; height:600px;background:#FCC; float:right}
.r_sub_left{ width:540px; height:600px; background:#9C3; float:left}
.r_sub_right{ width:200px; height:600px; background:#9FC; float:right;}
.footer{ width:960px; height:50px; background:#9F9;clear:both; margin: 0 auto;}
</style>
</head>
<body>
<div class="top">
<div class="head">head</div>
</div>
<div class="main">
<div class="left">left</div>
<div class="right">
<div class="r_sub_left">sub_left
</div>
<div class=" r_sub_right">sub_right
</div>
</div>
</div>
<div class="footer">footer</div>
</body>
</html>
效果：
布局分析
1凹蜈、標(biāo)準(zhǔn)流
常見(jiàn)塊級(jí)元素：div,H1~H6,table,p,ol,ul,li（獨(dú)占一行）
常見(jiàn)內(nèi)聯(lián)元素：a,span,img,input（當(dāng)前一行位置不夠時(shí)被擠到下一行）
2、定位布局
static 標(biāo)準(zhǔn)文檔流忍啸，默認(rèn)設(shè)置的值
relative 相對(duì)于自己原來(lái)的位置進(jìn)行定位
absolute 相對(duì)于父類元素（非static）進(jìn)行定位仰坦。父類元素需要是absolute或者relative。
fixed 相對(duì)于窗口進(jìn)行定位计雌，不受限于父元素悄晃。
inherit 繼承父元素的定位。
3凿滤、z-index
z-index只作用于帶有定位屬性的元素（position:static除外）妈橄，普通元素中也存在層級(jí)關(guān)系（margin-top:-50px）
z-index可以設(shè)置元素的疊加順序庶近，但是要依賴定位屬性
z-index大的元素會(huì)覆蓋z-index小的元素
z-index為auto的元素不參與層級(jí)比較
z-inde為負(fù)值，元素被普通流中的元素覆蓋
注意：父元素的層級(jí)大于相鄰元素的層級(jí) 不論層級(jí)多小,都可以繼承父元素的層級(jí),大于相鄰元素層級(jí)眷细。
4拦盹、盒子模型和定位
盒子模型：通過(guò)改變盒子的外邊或者內(nèi)邊來(lái)實(shí)現(xiàn)元素的移動(dòng)
定位：通過(guò)元素的位置移動(dòng)來(lái)改變出現(xiàn)在網(wǎng)頁(yè)的相對(duì)位置中
例如：實(shí)現(xiàn)登錄頁(yè)面水平和垂直居中，div先相對(duì)于網(wǎng)頁(yè)left和top50%fixed定位溪椎，然后使用margin-left和margin-top負(fù)div寬和高的一半普舆，可以得到居中的登錄頁(yè)面
側(cè)邊欄案例案例分析：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>側(cè)邊欄案例分析</title>
<!--<link rel="stylesheet" href="css/bootstrap.css">-->
<!--<script src="jquery/jquery-3.3.1.js"></script>-->
<!--<script src="js/bootstrap.js"></script>-->
<style>
* {
padding: 0;
margin: 0;
}
.page {
width: 100%;
height: 1400px;
background: url("image/time.jpg") center top no-repeat;
}
.nav {
width: 160px;
height: 205px;
position: fixed;
left: 0;
top: 50%;
margin-top: -103px;
font-family: 'Microsoft YaHei';
}
.nav-li {
width: 160px;
height: auto;
border-bottom: 1px solid #FFF;
background: #333;
text-align: center;
line-height: 40px;
color: #FFF;
font-size: 16px;
cursor: pointer;
}
.tit {
width: 160px;
height: 40px;
}
/*鼠標(biāo)移動(dòng)到ul才顯示*/
.nav-li:hover ul{
display: block;
}
.nav-li ul{
width: 160px;
height: auto;
display: none;
}
.nav-li ul li{
width: 160px;
height: 40px;
border-bottom: 1px dashed #666;
color: #FFF;
background: grey;
font-size: 16px;
position: relative;
}
.nav-li ul li:hover .list-3{
display: block;
}
.list-3 {
width: 160px;
height: auto;
position: absolute;
left: 160px;
top: 0;
display: none;
}
.list-3Dom {
width: 160px;
height: 40px;
background: #444;
border-bottom: 1px solid #FFF;
text-align: center;
line-height: 40px;
color: #FFF;
}
</style>
</head>
<body>
<div class="page">
<div class="nav">
<div class="nav-li">
<div class="tit">側(cè)邊欄導(dǎo)航</div>
<ul>
<li>
二級(jí)欄目
<div class="list-3">
<div class="list-3Dom">三級(jí)欄目</div>
<div class="list-3Dom">三級(jí)欄目</div>
<div class="list-3Dom">三級(jí)欄目</div>
</div>
</li>
<li>二級(jí)欄目
<div class="list-3">
<div class="list-3Dom">三級(jí)欄目</div>
<div class="list-3Dom">三級(jí)欄目</div>
<div class="list-3Dom">三級(jí)欄目</div>
</div>
</li>
<li>二級(jí)欄目
<div class="list-3">
<div class="list-3Dom">三級(jí)欄目</div>
<div class="list-3Dom">三級(jí)欄目</div>
<div class="list-3Dom">三級(jí)欄目</div>
</div>
</li>
</ul>
</div>
<div class="nav-li">
<div class="tit">側(cè)邊欄導(dǎo)航</div>
<ul>
<li>二級(jí)欄目</li>
<li>二級(jí)欄目</li>
<li>二級(jí)欄目</li>
</ul>
</div>
<div class="nav-li">
<div class="tit">側(cè)邊欄導(dǎo)航</div>
<ul>
<li>二級(jí)欄目</li>
<li>二級(jí)欄目</li>
<li>二級(jí)欄目</li>
</ul>
</div>
<div class="nav-li">
<div class="tit">側(cè)邊欄導(dǎo)航</div>
<ul>
<li>二級(jí)欄目</li>
<li>二級(jí)欄目</li>
<li>二級(jí)欄目</li>
</ul>
</div>
<div class="nav-li">
<div class="tit">側(cè)邊欄導(dǎo)航</div>
<ul>
<li>二級(jí)欄目</li>
<li>二級(jí)欄目</li>
<li>二級(jí)欄目</li>
</ul>
</div>
</div>
</div>
</body>
效果：
（內(nèi)容參考慕課網(wǎng)）
