对双飞布局，及圣杯布局的学习，掌握了他的核心原理和技巧。让我非常受益。
核心点就是在中间main盒模型的左右内边距及给盒模型设置box-sizing:border-box，为左右两列预留出相应的空间。然后设左右两列负外边距margin设置相应的值。就实现了。
双飞布局由于使用了宽度分离，所以就不用box-sizing:border-box;
实例演示
<!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>
body,
h1,
p {
/*border: 1px solid red;*/
margin: 0;
}
/*头部样式 开始*/
.header {
/*background-color: lightgray;*/
background-color: blue;
}
/*头部内容区*/
.header .content {
width: 90%;
background-color: blue;
margin: 0 auto;
height: 60px;
}
/*导航*/
.header .content .nav {
margin: 0;
padding: 0;
}
.header .content .nav .item {
list-style: none;
}
.header .content .nav .item a {
float: left;
min-width: 80px;
min-height: 60px;
text-align: center;
line-height: 60px;
color: white;
padding: 0 15px;
text-decoration: none;
}
.header .content .nav .item a:hover {
background-color: #963659;
font-size: 1.1rem;
}
/*设置轮播图*/
.slider {
width: 90%;
margin: 10px auto;
}
.slider img {
width: 100%;
}
/*主体使用圣杯来实现*/
.container {
width: 90%;
margin: 5px auto;
}
/* 将中间内容区, 左侧和右侧的宽高进行设置*/
.left {
width: 200px;
min-height: 800px;
}
.right {
width: 200px;
min-height: 800px;
}
.main {
width: 100%;
min-height: 800px;
}
/*将主体、左、右全部浮动*/
.main,
.left,
.right {
float: left;
}
.container {
overflow: hidden;
}
.main {
/*设置盒子大小*/
box-sizing: border-box;
padding-left: 220px;
padding-right: 220px;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -200px;
}
/*设置商品列表样式*/
.left {
box-sizing: border-box;
padding: 10px;
border: 1px solid #cccccc;
}
.left h1 {
color: #555;
font-size: 1.3rem;
border-bottom: 1px solid #cccccc;
height: 50px;
line-height: 50px;
}
.left ul {
margin-top: 20px;
padding: 0;
}
.left ul li {
list-style: none;
padding: 10px 20px;
}
.left ul li a {
text-decoration: none;
color: #555555;
}
.left ul li a:hover {
color: coral;
text-decoration: underline;
cursor: pointer;
}
/* 设置中间内容信息 */
.container h1 {
color: #555;
font-size: 1.3rem;
border-bottom: 1px solid #cccccc;
height: 50px;
line-height: 50px;
}
.container .main ul {
overflow: hidden;
margin: 0;
padding: 0;
}
.container .main .p-list {
float: left;
list-style-type: none;
padding: 10px;
border: 1px solid #ccc;
margin: 10px;
}
.container .main .p-list .p-img {
width: 200px;
height: 140px;
background-color: #444444;
}
.container .main .p-list .p-img img {
width: 200px;
height: 140px;
}
.container .main .p-list .p-name {
line-height: 30px;
text-align: center;
}
.container .main .p-list .p-name a {
text-decoration: none;
font-size: 14px;
}
/*设置右侧热销产品*/
.right {
box-sizing: border-box;
padding: 10px;
border: 1px solid #cccccc;
}
.right h1 {
color: #555;
font-size: 1.3rem;
border-bottom: 1px solid #cccccc;
height: 50px;
line-height: 50px;
}
.right .r-list {
list-style-type: none;
position: relative;
}
.right ul {
margin: 0;
padding: 0;
}
.right .r-list {
margin: 10px auto;
}
.right .r-list .p-info {
line-height: 30px;
overflow: hidden;
}
.right .r-list .p-info .p-count {
float: left;
}
.right .r-list .p-info .p-price {
float: right;
color: #ff0000;
}
.right .r-list .p-num {
position: absolute;
left: 0;
bottom: 0;
width: 15px;
height: 15px;
border-radius: 50%;
line-height: 15px;
text-align: center;
background-color: #963659;
}
.p-uname {
height: 30px;
line-height: 30px;
font-size: 1rem;
font-weight: bold;
}
.right .r-list .p-img {
width: 180px;
height: 120px;
}
.right .r-list .p-img img {
width: 180px;
height: 120px;
}
/*页面的底部样式开始*/
.footer {}
.footer .content {
width: 90%;
background-color: #444444;
height: 60px;
margin: 0 auto;
}
.footer .content p {
/*水平居中*/
text-align: center;
/*垂直居中*/
line-height: 60px;
}
.footer .content p a {
color: #999999;
text-decoration: none;
}
.footer .content p a:hover {
color: white;
}
</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="">手机频道</a></li>
<li class="item"><a href="">家居频道</a></li>
<li class="item"><a href="">食品频道</a></li>
<li class="item"><a href="">电器频道</a></li>
<li class="item"><a href="">图书频道</a></li>
<li class="item"><a href="">艺术频道</a></li>
<li class="item"><a href="">***频道</a></li>
<li class="item"><a href="">相机频道</a></li>
<li class="item"><a href="">户外频道</a></li>
<li class="item"><a href="">生活频道</a></li>
</ul>
</div>
</div>
<!-- 轮播图 -->
<div class="slider">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567741982877&di=5960291c788d99d5d5ddea8a26db62e1&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01ce8b582439aea84a0e282ba855d9.jpg" alt="">
</div>
<!--主体内容-->
<div class="container">
<!-- 主体-->
<div class="main">
<h1>产品展厅</h1>
<ul>
<li class="p-list">
<div class="p-img">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567742521909&di=f497339bf36e8d21484afd9074a1af33&imgtype=0&src=http%3A%2F%2Fi0.hexunimg.cn%2F2014-02-25%2F162484165.jpg" alt="手机"></a>
</div>
<div class="p-name"><a href="">诺基亚手机</a></div>
</li>
<li class="p-list">
<div class="p-img">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567742521909&di=f497339bf36e8d21484afd9074a1af33&imgtype=0&src=http%3A%2F%2Fi0.hexunimg.cn%2F2014-02-25%2F162484165.jpg" alt="手机"></a>
</div>
<div class="p-name"><a href="">诺基亚手机</a></div>
</li>
<li class="p-list">
<div class="p-img">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567742521909&di=f497339bf36e8d21484afd9074a1af33&imgtype=0&src=http%3A%2F%2Fi0.hexunimg.cn%2F2014-02-25%2F162484165.jpg" alt="手机"></a>
</div>
<div class="p-name"><a href="">诺基亚手机</a></div>
</li>
<li class="p-list">
<div class="p-img">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567742521909&di=f497339bf36e8d21484afd9074a1af33&imgtype=0&src=http%3A%2F%2Fi0.hexunimg.cn%2F2014-02-25%2F162484165.jpg" alt="手机"></a>
</div>
<div class="p-name"><a href="">诺基亚手机</a></div>
</li>
<li class="p-list">
<div class="p-img">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567742521909&di=f497339bf36e8d21484afd9074a1af33&imgtype=0&src=http%3A%2F%2Fi0.hexunimg.cn%2F2014-02-25%2F162484165.jpg" alt="手机"></a>
</div>
<div class="p-name"><a href="">诺基亚手机</a></div>
</li>
<li class="p-list">
<div class="p-img">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567742521909&di=f497339bf36e8d21484afd9074a1af33&imgtype=0&src=http%3A%2F%2Fi0.hexunimg.cn%2F2014-02-25%2F162484165.jpg" alt="手机"></a>
</div>
<div class="p-name"><a href="">诺基亚手机</a></div>
</li>
<li class="p-list">
<div class="p-img">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567742521909&di=f497339bf36e8d21484afd9074a1af33&imgtype=0&src=http%3A%2F%2Fi0.hexunimg.cn%2F2014-02-25%2F162484165.jpg" alt="手机"></a>
</div>
<div class="p-name"><a href="">诺基亚手机</a></div>
</li>
<li class="p-list">
<div class="p-img">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567742521909&di=f497339bf36e8d21484afd9074a1af33&imgtype=0&src=http%3A%2F%2Fi0.hexunimg.cn%2F2014-02-25%2F162484165.jpg" alt="手机"></a>
</div>
<div class="p-name"><a href="">诺基亚手机</a></div>
</li>
<li class="p-list">
<div class="p-img">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567742521909&di=f497339bf36e8d21484afd9074a1af33&imgtype=0&src=http%3A%2F%2Fi0.hexunimg.cn%2F2014-02-25%2F162484165.jpg" alt="手机"></a>
</div>
<div class="p-name"><a href="">诺基亚手机</a></div>
</li>
<li class="p-list">
<div class="p-img">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567742521909&di=f497339bf36e8d21484afd9074a1af33&imgtype=0&src=http%3A%2F%2Fi0.hexunimg.cn%2F2014-02-25%2F162484165.jpg" alt="手机"></a>
</div>
<div class="p-name"><a href="">诺基亚手机</a></div>
</li>
<li class="p-list">
<div class="p-img">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567742521909&di=f497339bf36e8d21484afd9074a1af33&imgtype=0&src=http%3A%2F%2Fi0.hexunimg.cn%2F2014-02-25%2F162484165.jpg" alt="手机"></a>
</div>
<div class="p-name"><a href="">诺基亚手机</a></div>
</li>
<li class="p-list">
<div class="p-img">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567742521909&di=f497339bf36e8d21484afd9074a1af33&imgtype=0&src=http%3A%2F%2Fi0.hexunimg.cn%2F2014-02-25%2F162484165.jpg" alt="手机"></a>
</div>
<div class="p-name"><a href="">诺基亚手机</a></div>
</li>
<li class="p-list">
<div class="p-img">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567742521909&di=f497339bf36e8d21484afd9074a1af33&imgtype=0&src=http%3A%2F%2Fi0.hexunimg.cn%2F2014-02-25%2F162484165.jpg" alt="手机"></a>
</div>
<div class="p-name"><a href="">诺基亚手机</a></div>
</li>
<li class="p-list">
<div class="p-img">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567742521909&di=f497339bf36e8d21484afd9074a1af33&imgtype=0&src=http%3A%2F%2Fi0.hexunimg.cn%2F2014-02-25%2F162484165.jpg" alt="手机"></a>
</div>
<div class="p-name"><a href="">诺基亚手机</a></div>
</li>
<li class="p-list">
<div class="p-img">
<a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567742521909&di=f497339bf36e8d21484afd9074a1af33&imgtype=0&src=http%3A%2F%2Fi0.hexunimg.cn%2F2014-02-25%2F162484165.jpg" alt="手机"></a>
</div>
<div class="p-name"><a href="">诺基亚手机</a></div>
</li>
</ul>
</div>
<!-- 左侧边栏-->
<div class="left">
<h1>商品分类</h1>
<ul>
<li class="pro"><a href="">电脑</a></li>
<li class="pro"><a href="">手机</a></li>
<li class="pro"><a href="">相机</a></li>
<li class="pro"><a href="">相机</a></li>
<li class="pro"><a href="">电器</a></li>
<li class="pro"><a href="">家居</a></li>
<li class="pro"><a href="">***</a></li>
<li class="pro"><a href="">食品</a></li>
<li class="pro"><a href="">图书</a></li>
<li class="pro"><a href="">艺术</a></li>
</ul>
</div>
<!--右侧边栏-->
<div class="right">
<h1>热销TOP 10</h1>
<ul>
<li class="r-list">
<div class="p-uname">联想电脑喜欢2000</div>
<div class="p-img"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567748961513&di=1de10174200c09693bd883b84311cace&imgtype=0&src=http%3A%2F%2Farticle.fd.zol-img.com.cn%2Ft_s640x2000%2Fg5%2FM00%2F0A%2F0E%2FChMkJ1ofZhSISHmiAAC6Q6ykKwkAAimVgFkylUAALpb210.jpg"
alt="jney
"></div>
<div class="p-info">
<div class="p-count">热销 <em>3000件</em></div>
<div class="p-price">10.00</div>
</div>
</li>
<li class="r-list">
<div class="p-uname">联想电脑喜欢2000</div>
<div class="p-img"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567748961513&di=1de10174200c09693bd883b84311cace&imgtype=0&src=http%3A%2F%2Farticle.fd.zol-img.com.cn%2Ft_s640x2000%2Fg5%2FM00%2F0A%2F0E%2FChMkJ1ofZhSISHmiAAC6Q6ykKwkAAimVgFkylUAALpb210.jpg"
alt="jney
"></div>
<div class="p-info">
<div class="p-count">热销 <em>3000件</em></div>
<div class="p-price">10.00</div>
</div>
</li>
<li class="r-list">
<div class="p-uname">联想电脑喜欢2000</div>
<div class="p-img"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567748961513&di=1de10174200c09693bd883b84311cace&imgtype=0&src=http%3A%2F%2Farticle.fd.zol-img.com.cn%2Ft_s640x2000%2Fg5%2FM00%2F0A%2F0E%2FChMkJ1ofZhSISHmiAAC6Q6ykKwkAAimVgFkylUAALpb210.jpg"
alt="jney
"></div>
<div class="p-info">
<div class="p-count">热销 <em>3000件</em></div>
<div class="p-price">10.00</div>
</div>
</li>
</ul>
</div>
</div>
<!--底部代码-->
<div class="footer">
<!-- 底部内容区-->
<div class="content">
<p>
<a href="">© 京西网版本所有</a> |
<a href="">010-66993344</a> |
<a href="">京ICP备998745688</a>
</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例