收藏
批改狀態(tài)：合格
老師批語：
圣杯布局是一種相對布局，主體的中間欄要在瀏覽器中優(yōu)先展示渲染
具體實現(xiàn)方法：
設(shè)置HTML基本DOM框架，mian為主體的中間欄
<!-- 主體 -->
<div class="container">
<div class="main">主體內(nèi)容優(yōu)先顯示，所以將主體div寫在開頭</div>
<div class="left">左側(cè)</div>
<div class="right">右側(cè)</div>
</div>
設(shè)置基本的CSS樣式
.container{
width:600px;
height:800px;
margin: 5px auto;
}
.container .main,.left,.right{
height: inherit;
}
.main{
width:inherit;
background-color: lightblue;
}
.left{
width: 200px;
background-color: lightcyan;
}
.right{
width: 200px;
background-color: lightgreen;
}
例如上面的樣式，左右兩個區(qū)塊寬度都設(shè)置為200px，主體總寬度為1000px，扣去左右兩個區(qū)塊的寬度400px，中間區(qū)塊設(shè)置為600px
將主體的三個區(qū)塊修改為浮動：
.container .main,.left,.right{
float: left;
}
修改后的三個區(qū)塊都在同一浮動層內(nèi)，至此只要修改左邊區(qū)塊和右邊區(qū)塊到指定的位置就可以了
移動左邊區(qū)塊，先添加相對定位屬性，再修改他的左外邊距，令左區(qū)塊移動到浮動層（.container .main,.left,.right）的開頭
.left{
position: relative;
margin-left: -100%;
left: -200px;
}
負的margin-left會讓元素沿文檔流向左移動，如果負的數(shù)值比較大就會一直移動到上一行。
接著調(diào)整右邊區(qū)塊，也設(shè)置為相對定位并修改負的margin-left，使其向左移動
.right{
position: relative;
margin-left: -200px;
left: 200px;
}
這就完成了圣杯布局，主體區(qū)塊的中間內(nèi)容都會優(yōu)先向用戶展示，且無論瀏覽器的寬度有多窄，依然會顯示中間區(qū)塊的內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0%;
margin: 0%;
}
.clear {
clear: both;
}
.header {
width: 100%;
background-color: lightblue
}
.header .content {
width: 1000px;
height: 60px;
margin: 0 auto;
background: lightcoral;
}
.header .content .nav {
list-style: none;
}
.header .content .nav a {
text-decoration: none;
color: lightgray;
font-size: 1.2rem;
min-width: 80px;
min-height: 60px;
line-height: 60px;
text-align: center;
float: left;
padding: 0 15px;
}
.header .content .nav a:hover {
background-color: #444;
color: white;
}
.container{
width:600px;
height:800px;
margin: 5px auto;
}
.container .main,.left,.right{
height: inherit;
float: left;
}
.main{
width: inherit;
background-color: lightblue;
}
.left{
width: 200px;
background-color: lightcyan;
position: relative;
margin-left: -100%;
left: -200px;
}
.right{
width: 200px;
background-color: lightgreen;
position: relative;
margin-left: -200px;
left: 200px;
}
.footer {
width: 100%;
height: 60px;
background-color: antiquewhite;
}
.footer .content p {
text-align: center;
line-height: 60px;
background-color: azure;
}
.footer .content a {
text-decoration: none;
}
.footer .content a:hover {
text-decoration: underline;
color: #444;
}
</style>
</head>
<body>
<!-- 頭部導航 -->
<div class="header">
<div class="content">
<ul class="nav">
<li class="item"><a href="">首頁</a></li>
<li class="item"><a href="">公司新聞</a></li>
<li class="item"><a href="">最新產(chǎn)品</a></li>
<li class="item"><a href="">關(guān)于我們</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<!-- 主體 -->
<div class="container">
<div class="main">主體內(nèi)容優(yōu)先顯示，所以將主體div寫在開頭</div>
<div class="left">左側(cè)</div>
<div class="right">右側(cè)</div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="content">
<p>
<a href="">Copyright 2014-2018 http://ipnx.cn/ All Rights Reserved</a> |
<a href="">皖B2-20150071-9</a>
</p>
</div>
</div>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
總結(jié)思考：
圣杯布局使用了絕對定位來調(diào)整區(qū)塊位置，適當使用負邊距可以讓元素向左移動
微信掃碼
關(guān)注PHP中文網(wǎng)服務號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號