abstract：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圣杯布局</title>&nb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
/* 頭部 */
.header{
/* 通常寬度默認(rèn)為100% */
width: 100%;
background-color: lightgreen;
}
.header .content{
/* 頭部?jī)?nèi)容區(qū),應(yīng)該居中顯示,所有要有寬度 */
height: 60px;
width: 1000px;
background-color: lightcoral;
/* 上下外邊距為0,左右自動(dòng)居中 */
margin: 0 auto;
}
.header .content .nav{
/* 清空導(dǎo)航UL元素的默認(rèn)樣式 */
margin: 0;
padding-left: 0;
}
.header .content .nav .item{
list-style-type: none;
}
.header .content .nav .item a{
/* 一定要將浮動(dòng)設(shè)置到鏈接標(biāo)簽<a>上面,否則無(wú)法實(shí)現(xiàn)導(dǎo)航區(qū)的點(diǎn)擊與高亮 */
float: left;
/* 設(shè)置最小寬度與最小高寬,以適應(yīng)導(dǎo)航文本的變化 */
min-width: 40px;
min-height: 60px;
/* 設(shè)置行高與頭部區(qū)塊等高,使導(dǎo)航文本可以垂直居中顯示 */
line-height: 60px;
color: blueviolet;
/* 將導(dǎo)航文本設(shè)置為系統(tǒng)根字體大小的1.2倍 */
font-size:1.2rem;
/* 設(shè)置民航文本的左右內(nèi)邊距,使導(dǎo)航文本不要挨的太緊 */
padding: 0 40px;
/* 去掉鏈接標(biāo)簽?zāi)J(rèn)的下劃線 */
text-decoration: none;
/* 讓導(dǎo)航文本在每一個(gè)小區(qū)塊中居中顯示 */
text-align: center;
}
.header .content .nav .item a:hover {
/* 當(dāng)鼠標(biāo)移入到導(dǎo)航鏈接上時(shí)改變背景色與文本前景色,實(shí)現(xiàn)當(dāng)前導(dǎo)航高亮功能 */
background-color: #444;
color: white;
}
/* 使用圣杯布局實(shí)現(xiàn)主體部分 */
/* 第一步: 主體容器設(shè)置的寬度與中間區(qū)塊相同,并水平居中 */
.container {
width: 600px;
min-height: 600px;
margin: 5px auto;
background-color: #ccc;
}
/* 第二步: 左,右二側(cè)固定寬度,中間區(qū)塊繼承父級(jí)container寬度*/
.main {
width: inherit;
min-height: 600px;
background-color: lightcyan;
}
/* 設(shè)置左,右區(qū)塊的寬度和高度(因?yàn)闊o(wú)內(nèi)容,所以設(shè)置了最小高度),并設(shè)置參考色塊 */
.left {
width: 200px;
min-height: 600px;
background-color: lightcoral;
}
.right {
width: 200px;
min-height: 600px;
background-color: lightseagreen
}
/* 第三步:將中間,左,右區(qū)塊全部左浮動(dòng) */
/* 因中間區(qū)塊寬度100%,所以左右會(huì)被擠壓到下面 */
.main, .left, .right {
float: left;
}
/* 第四步: 將left和right拉回到中間區(qū)塊的二邊 */
/* 通過(guò)設(shè)置區(qū)塊的負(fù)外邊距的方式,實(shí)現(xiàn)向反方向移動(dòng)區(qū)塊 */
.left {
margin-left: -100%; /* -100%等價(jià)于-1000px,將左區(qū)塊拉回到中間的起點(diǎn)處*/
}
.right {
margin-left: -200px; /* -200px就正好將右區(qū)塊上移到中間區(qū)塊右側(cè)顯示 */
}
/* 現(xiàn)在還有最后一個(gè)問(wèn)題,中間內(nèi)容區(qū)塊main沒(méi)有顯示出來(lái) */
/* 第五步: 設(shè)置容器container內(nèi)邊距給左右區(qū)塊預(yù)留位置 */
.container {
padding-left:200px;
padding-right: 200px;
}
/* 第六步:左右區(qū)塊使用相對(duì)定位,回到正確的位置上 */
.left {
position: relative;
left: -200px;
}
.right {
position: relative;
left: 200px;
}
/* 底部與頭部的基本樣式類似 */
.footer {
width: 100%;
background-color: lightseagreen;
}
.footer .content {
width: 1000px;
height: 60px;
background-color: lightblue;
margin: 0 auto;
}
.footer .content p {
text-align: center;
line-height: 60px;
}
.footer .content a {
text-decoration: none;
color: black;
}
/* 鼠標(biāo)移入時(shí)顯示下劃線并加深字體前景色 */
.footer .content a:hover {
text-decoration: underline;
color: white;
}
</style>
</head>
<body>
<!-- 頭部 -->
<div class="header">
<div class="content">
<ul class="nav">
<li class="item"><a href="">首頁(yè)</a></li>
<li class="item"><a href="">公司新聞</a></li>
<li class="item"><a href="">最新產(chǎn)品</a></li>
<li class="item"><a href="">聯(lián)系我們</a></li>
</ul>
</div>
</div>
<!-- 中間主體 -->
<div class="container">
<!-- 中間內(nèi)容main區(qū)塊中 -->
<div class="main">主體內(nèi)容區(qū)</div>
<!-- 創(chuàng)建左側(cè)邊欄區(qū)塊 -->
<div class="left">左側(cè)</div>
<!-- 創(chuàng)建右側(cè)邊欄區(qū)塊 -->
<div class="right">右側(cè)</div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="content">
<p>
<a href="">? PHP中文網(wǎng)版權(quán)所有</a> |
<a href="">0551-88889999</a> |
<a href="">皖I(lǐng)CP2016098801-1</a>
</p>
</div>
</div>
</body>
</html>
Correcting teacher：查無(wú)此人Correction time：2019-04-30 09:18:58
Teacher's summary：完成的不錯(cuò)。浮動(dòng)一般在手機(jī)網(wǎng)頁(yè)用的比較多。繼續(xù)加油