收藏
批改狀態(tài)：合格
老師批語：這二者的布局的思想基本上一致, 很多時(shí)候, 難以完全區(qū)別, 而是二者的合體, 具體實(shí)現(xiàn)方式, 每個(gè)人都有自己的思想, 不一定非要按這個(gè)來
采用圣杯布局的方法，制作首頁的一個(gè)小案例
<!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>圣杯布局首頁小案例</title>
<style>
/* 樣式初始化 */
* {
margin: 0;
padding: 0
}
img {
border: 0;
display: block
}
ul,
li {
list-style: none;
}
a {
outline: none;
}
a:link,
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
/* 偽類清浮動(dòng)來解決父級(jí)塌陷的問題 */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* 案例樣式開始 */
.header {
background: #333;
/* overflow: hidden;這里我注釋掉了，因?yàn)槲蚁雵L試使用一下偽類清浮動(dòng)的方法去解決父級(jí)塌陷的問題 */
}
.nav {
width: 90%;
background: antiquewhite;
margin: 0 auto;
}
.logo {
width: 10%;
float: left;
/* text-align: center; */
}
.logo a {
font-size: 20px;
line-height: 30px;
color: rgb(228, 231, 12);
}
.navul {
width: 90%;
float: left;
}
.navul a {
width: auto;
padding: 0 15px;
height: 30px;
line-height: 30px;
color: aliceblue;
font-size: 15px;
float: left;
}
.navul a:hover {
background: bisque;
color: rgb(12, 9, 240);
}
.slider {
width: 90%;
margin: 10px auto;
}
.slider img {
width: 100%;
}
/* 圣杯布局樣式 */
.content {
width: 90%;
margin: 10px auto;
}
.main {
width: 100%;
min-height: 500px;
float: left;
box-sizing: border-box;
padding-left: 210px;
/* 使用210px的原因是不想緊貼在左右兩邊上，空個(gè)10px左右的位置 */
padding-right: 210px;
background: bisque;
}
.left {
width: 200px;
min-height: 646px;
float: left;
margin-left: -100%;
background: rgb(228, 129, 7);
box-sizing: border-box;
padding: 0 10px;
}
.right {
width: 200px;
min-height: 646px;
float: left;
margin-left: -200px;
background: rgb(7, 176, 228);
box-sizing: border-box;
padding: 0 10px;
}
.footer {
background: #333;
}
.footer p {
width: 90%;
margin: 0 auto;
text-align: center;
}
.footer p a {
color: #eee;
width: auto;
padding-right: 15px;
}
.footer p a:after {
content: "|";
display: inline-block;
width: 1px;
position: relative;
left: 10px;
top: -2px;
color: #999;
font-size: 12px;
}
.footer p a:last-child:after {
display: none;
}
.main h3 a {
font-size: 24px;
text-align: center;
display: block;
width: 100%;
line-height: 60px;
}
.main li {
width: 20%;
margin: 2.5%;
box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
float: left;
padding: 0 0 10px 0;
}
.main_cp {
width: 100%;
text-align: center;
}
.main_cp img {
width: 100%;
}
.main_cp a {
color: rgb(22, 22, 22);
font-size: 16px;
line-height: 25px;
}
.main_price {
float: left;
color: rgb(114, 6, 6);
font-size: 16px;
padding-left: 10px;
}
.buy {
float: right;
font-size: 16px;
padding: 0 10px;
border: 1px solid #eee;
border-radius: 5px;
background: azure;
margin-right: 10px;
}
.buy a {
color: #000;
}
.left h3 a {
font-size: 24px;
display: block;
width: 100%;
line-height: 60px;
}
.left ul li a {
width: auto;
line-height: 30px;
}
.right h3 a {
font-size: 24px;
display: block;
width: 100%;
line-height: 60px;
}
.right ul li a {
width: auto;
line-height: 30px;
}
</style>
</head>
<body>
<!-- 頭部?jī)?nèi)容 -->
<div class="header clearfix">
<div class="nav">
<div class="logo"><a>LOGO</a></div>
<ul class="navul">
<li><a>首頁</a></li>
<li><a>產(chǎn)品介紹</a></li>
<li><a>新聞內(nèi)容</a></li>
<li><a>關(guān)于我們</a></li>
<li><a>聯(lián)系我們</a></li>
</ul>
</div>
</div>
<!-- 幻燈內(nèi)容 -->
<div class="slider">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567706007496&di=d32991ecd3e4c383b85e1410ac7008e2&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01084f5951fc51a8012193a3eddb28.jpg" alt="">
</div>
<!-- 網(wǎng)站內(nèi)容 采用圣杯3欄布局，中間main部分自適應(yīng)并優(yōu)先展示-->
<div class="content clearfix">
<div class="main">
<h3><a href="">商品展示</a></h3>
<ul>
<li>
<div class="main_cp">
<a href="/"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567780449421&di=ccc49d8075a13b67e078d76e4b09b5b3&imgtype=0&src=http%3A%2F%2Fn1.itc.cn%2Fimg8%2Fwb%2Frecom%2F2016%2F10%2F18%2F147677450793628401.JPEG"
alt="">這是一個(gè)商品名稱</a>
</div>
<span class="main_price">價(jià)格：100</span>
<span class="buy"><a href="/">點(diǎn)擊***</a></span>
</li>
<li>
<div class="main_cp">
<a href="/"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567780449421&di=ccc49d8075a13b67e078d76e4b09b5b3&imgtype=0&src=http%3A%2F%2Fn1.itc.cn%2Fimg8%2Fwb%2Frecom%2F2016%2F10%2F18%2F147677450793628401.JPEG"
alt="">這是一個(gè)商品名稱</a>
</div>
<span class="main_price">價(jià)格：100</span>
<span class="buy"><a href="/">點(diǎn)擊***</a></span>
</li>
<li>
<div class="main_cp">
<a href="/"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567780449421&di=ccc49d8075a13b67e078d76e4b09b5b3&imgtype=0&src=http%3A%2F%2Fn1.itc.cn%2Fimg8%2Fwb%2Frecom%2F2016%2F10%2F18%2F147677450793628401.JPEG"
alt="">這是一個(gè)商品名稱</a>
</div>
<span class="main_price">價(jià)格：100</span>
<span class="buy"><a href="/">點(diǎn)擊***</a></span>
</li>
<li>
<div class="main_cp">
<a href="/"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567780449421&di=ccc49d8075a13b67e078d76e4b09b5b3&imgtype=0&src=http%3A%2F%2Fn1.itc.cn%2Fimg8%2Fwb%2Frecom%2F2016%2F10%2F18%2F147677450793628401.JPEG"
alt="">這是一個(gè)商品名稱</a>
</div>
<span class="main_price">價(jià)格：100</span>
<span class="buy"><a href="/">點(diǎn)擊***</a></span>
</li>
<li>
<div class="main_cp">
<a href="/"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567780449421&di=ccc49d8075a13b67e078d76e4b09b5b3&imgtype=0&src=http%3A%2F%2Fn1.itc.cn%2Fimg8%2Fwb%2Frecom%2F2016%2F10%2F18%2F147677450793628401.JPEG"
alt="">這是一個(gè)商品名稱</a>
</div>
<span class="main_price">價(jià)格：100</span>
<span class="buy"><a href="/">點(diǎn)擊***</a></span>
</li>
<li>
<div class="main_cp">
<a href="/"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567780449421&di=ccc49d8075a13b67e078d76e4b09b5b3&imgtype=0&src=http%3A%2F%2Fn1.itc.cn%2Fimg8%2Fwb%2Frecom%2F2016%2F10%2F18%2F147677450793628401.JPEG"
alt="">這是一個(gè)商品名稱</a>
</div>
<span class="main_price">價(jià)格：100</span>
<span class="buy"><a href="/">點(diǎn)擊***</a></span>
</li>
</ul>
</div>
<div class="left">
<h3><a href="">商品分類</a></h3>
<ul>
<li>
<a>商品類型1</a>
</li>
<li>
<a>商品類型2</a>
</li>
<li>
<a>商品類型3</a>
</li>
<li>
<a>商品類型4</a>
</li>
<li>
<a>商品類型5</a>
</li>
</ul>
</div>
<div class="right">
<h3><a href="">推薦商品</a></h3>
<ul>
<li>
<a>商品1</a>
</li>
<li>
<a>商品2</a>
</li>
<li>
<a>商品3</a>
</li>
<li>
<a>商品4</a>
</li>
<li>
<a>商品5</a>
</li>
</ul>
</div>
</div>
<!-- 底部?jī)?nèi)容 -->
<div class="footer">
<p>
<a href="">? php中文網(wǎng)版本所有</a>
<a href="">0551-666***999</a>
<a href="">皖I(lǐng)CP備19***666</a>
</p>
</div>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
總結(jié)：
圣杯布局和雙飛翼布局，在區(qū)別上，是中間區(qū)域main這個(gè)級(jí)塊，外面是否再包含一個(gè)div，但是在實(shí)際的應(yīng)用和頁面美化需求上，很容易在main里面設(shè)置一些div，這里好像圣杯布局又變成了雙飛翼布局的感覺。
布局的細(xì)節(jié)，特別是等間距布局的問題。
清浮動(dòng)的作用和使用情況。簡(jiǎn)單的理解，存在父子級(jí)包含div塊的時(shí)候，解決父級(jí)高端被折疊需要使用，還有浮動(dòng)對(duì)齊的時(shí)候，需要使用，主要解決同級(jí)div位置的問題。
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)