收藏
批改状态：合格
老师批语：这二者的布局的思想基本上一致, 很多时候, 难以完全区别, 而是二者的合体, 具体实现方式, 每个人都有自己的思想, 不一定非要按这个来
采用圣杯布局的方法，制作首页的一个小案例
<!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;
}
/* 伪类清浮动来解决父级塌陷的问题 */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* 案例样式开始 */
.header {
background: #333;
/* overflow: hidden;这里我注释掉了，因为我想尝试使用一下伪类清浮动的方法去解决父级塌陷的问题 */
}
.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的原因是不想紧贴在左右两边上，空个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>
<!-- 头部内容 -->
<div class="header clearfix">
<div class="nav">
<div class="logo"><a>LOGO</a></div>
<ul class="navul">
<li><a>首页</a></li>
<li><a>产品介绍</a></li>
<li><a>新闻内容</a></li>
<li><a>关于我们</a></li>
<li><a>联系我们</a></li>
</ul>
</div>
</div>
<!-- 幻灯内容 -->
<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>
<!-- 网站内容 采用圣杯3栏布局，中间main部分自适应并优先展示-->
<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="">这是一个商品名称</a>
</div>
<span class="main_price">价格：100</span>
<span class="buy"><a href="/">点击***</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="">这是一个商品名称</a>
</div>
<span class="main_price">价格：100</span>
<span class="buy"><a href="/">点击***</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="">这是一个商品名称</a>
</div>
<span class="main_price">价格：100</span>
<span class="buy"><a href="/">点击***</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="">这是一个商品名称</a>
</div>
<span class="main_price">价格：100</span>
<span class="buy"><a href="/">点击***</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="">这是一个商品名称</a>
</div>
<span class="main_price">价格：100</span>
<span class="buy"><a href="/">点击***</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="">这是一个商品名称</a>
</div>
<span class="main_price">价格：100</span>
<span class="buy"><a href="/">点击***</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>
<!-- 底部内容 -->
<div class="footer">
<p>
<a href="">© php中文网版本所有</a>
<a href="">0551-666***999</a>
<a href="">皖ICP备19***666</a>
</p>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：
圣杯布局和双飞翼布局，在区别上，是中间区域main这个级块，外面是否再包含一个div，但是在实际的应用和页面美化需求上，很容易在main里面设置一些div，这里好像圣杯布局又变成了双飞翼布局的感觉。
布局的细节，特别是等间距布局的问题。
清浮动的作用和使用情况。简单的理解，存在父子级包含div块的时候，解决父级高端被折叠需要使用，还有浮动对齐的时候，需要使用，主要解决同级div位置的问题。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
