圣杯布局使用起来十分方便!
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="/css/style.css"> <title>布局案例: 通用的圣杯布局</title> </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> </ul> </div> </div> <div class="slider"> <img src="static/images/timg.jpg" alt=""> </div> <!--主体--> <div class="container"> <!-- 圣杯DOM结构--> <!-- 主体--> <div class="main"> <h1>商品展示区</h1> <div class="list"> <div class="item"> <a href=""> <div class="shop"> <img src="https://new.168.com/images/file_upload/folder/2019-01-15/1547529476892-649001-2019-01-15.jpg" alt=""> <div class="price"> <small>原价：<del>¥1000</del></small> <span>特价：¥680</span> </div> <p><button>立即抢购</button></p> </div> </a> </div> </div> <div class="list"> <div class="item"> <a href=""> <div class="shop"> <img src="https://new.168.com/images/file_upload/folder/2019-01-15/1547529476892-649001-2019-01-15.jpg" alt=""> <div class="price"> <small>原价：<del>¥1000</del></small> <span>特价：¥680</span> </div> <p><button>立即抢购</button></p> </div> </a> </div> </div> <div class="list"> <div class="item"> <a href=""> <div class="shop"> <img src="https://new.168.com/images/file_upload/folder/2019-01-15/1547529476892-649001-2019-01-15.jpg" alt=""> <div class="price"> <small>原价：<del>¥1000</del></small> <span>特价：¥680</span> </div> <p><button>立即抢购</button></p> </div> </a> </div> </div> <div class="list"> <div class="item"> <a href=""> <div class="shop"> <img src="https://new.168.com/images/file_upload/folder/2019-01-15/1547529476892-649001-2019-01-15.jpg" alt=""> <div class="price"> <small>原价：<del>¥1000</del></small> <span>特价：¥680</span> </div> <p><button>立即抢购</button></p> </div> </a> </div> </div> <div class="list"> <div class="item"> <a href=""> <div class="shop"> <img src="https://new.168.com/images/file_upload/folder/2019-01-15/1547529476892-649001-2019-01-15.jpg" alt=""> <div class="price"> <small>原价：<del>¥1000</del></small> <span>特价：¥680</span> </div> <p><button>立即抢购</button></p> </div> </a> </div> </div> <div class="list"> <div class="item"> <a href=""> <div class="shop"> <img src="https://new.168.com/images/file_upload/folder/2019-01-15/1547529476892-649001-2019-01-15.jpg" alt=""> <div class="price"> <small>原价：<del>¥1000</del></small> <span>特价：¥680</span> </div> <p><button>立即抢购</button></p> </div> </a> </div> </div> <div class="list"> <div class="item"> <a href=""> <div class="shop"> <img src="https://new.168.com/images/file_upload/folder/2019-01-15/1547529476892-649001-2019-01-15.jpg" alt=""> <div class="price"> <small>原价：<del>¥1000</del></small> <span>特价：¥680</span> </div> <p><button>立即抢购</button></p> </div> </a> </div> </div> <div class="list"> <div class="item"> <a href=""> <div class="shop"> <img src="https://new.168.com/images/file_upload/folder/2019-01-15/1547529476892-649001-2019-01-15.jpg" alt=""> <div class="price"> <small>原价：<del>¥1000</del></small> <span>特价：¥680</span> </div> <p><button>立即抢购</button></p> </div> </a> </div> </div> </div> <!-- 左侧边栏--> <div class="left"> <h1>商品列表</h1> <ul> <li><a href="">我的商品1</a></li> <li><a href="">我的商品2</a></li> <li><a href="">我的商品3</a></li> <li><a href="">我的商品4</a></li> <li><a href="">我的商品5</a></li> <li><a href="">我的商品6</a></li> <li><a href="">我的商品7</a></li> <li><a href="">我的商品8</a></li> <li><a href="">我的商品9</a></li> <li><a href="">我的商品10</a></li> </ul> </div> <!-- 右侧边栏--> <div class="right"> <h1>最新新闻</h1> <ul> <li><a href="">行业新闻1</a></li> <li><a href="">行业新闻2</a></li> <li><a href="">行业新闻3</a></li> <li><a href="">行业新闻4</a></li> <li><a href="">行业新闻5</a></li> <li><a href="">行业新闻6</a></li> <li><a href="">行业新闻7</a></li> <li><a href="">行业新闻8</a></li> <li><a href="">行业新闻9</a></li> <li><a href="">行业新闻10</a></li> </ul> </div> </div> <!--底部--> <div class="footer"> <!-- 底部内容区--> <div class="content"> <p> <a href="">© 版本所有</a> | <a href="">0551-666***999</a> | <a href="">皖ICP备19***666</a> </p> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
body,
h1,
p {
/*border: 1px solid red;*/
margin: 0;
}
/*头部样式 开始*/
.header {
/*background-color: lightgray;*/
background-color: black;
}
/*头部内容区*/
.header .content {
width: 90%;
background-color: black;
margin: 0 auto;
height: 60px;
}
/*头部中的导航*/
.header .content .nav {
/*清空ul默认样式*/
/*margin-top: 0;*/
/*margin-bottom: 0;*/
/*padding-left: 0;*/
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;
/*去掉a标签的默认下划线*/
text-decoration: none;
}
.header .content .nav .item a:hover {
background-color: red;
font-size: 1.1rem;
}
/*设置轮播图*/
.slider {
width: 90%;
margin: 0 auto;
}
.slider img {
width: 100%;
}
/*设置商品列表样式*/
.left {
box-sizing: border-box;
padding: 10px;
border: 1px solid #555555;
}
.left h1 {
color: #555;
font-size: 1.3rem;
border-bottom: 1px solid #555555;
}
.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;
}
/* 右侧排行版 */
.right {
box-sizing: border-box;
padding: 10px;
border: 1px solid #555555;
}
.right h1 {
color: #555;
font-size: 1.3rem;
border-bottom: 1px solid #555555;
}
.right ul {
margin-top: 20px;
padding: 0;
}
.right ul li {
list-style: none;
padding: 10px 20px;
}
.right ul li a {
text-decoration: none;
color: #555555;
}
.right ul li a:hover {
color: coral;
text-decoration: underline;
cursor: pointer;
}
/*主体使用圣杯来实现*/
/*第一步: 设置主体的宽度*/
.container {
width: 90%;
/* background-color: lightgray; */
margin: 5px auto;
/*border: 5px dashed black;*/
}
/*第二步: 将中间内容区, 左侧和右侧的宽高进行设置*/
.left {
width: 200px;
min-height: 880px;
/* background-color: lightgreen; */
}
.right {
width: 200px;
min-height: 880px;
/* background-color: lightcoral; */
}
.main {
width: 100%;
/* background-color: lightblue; */
min-height: 800px;
}
/*第三步: 将主体,左, 右全部浮动*/
.main,
.left,
.right {
float: left;
}
.container {
overflow: hidden;
}
/*第四步: 将左右区块移动到正确的位置上*/
.main {
/*设置一个盒模型的大小的计算方式, 默认大小由内容决定*/
box-sizing: border-box;
padding-left: 200px;
padding-right: 200px;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -200px;
}
/*页面的底部样式开始*/
.footer {
/*background-color: lightgray;*/
}
.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;
}
/* 商品展示区 */
.main {
box-sizing: border-box;
border: 1px solid #555555;
}
.main h1 {
color: #555;
padding: 5px 5px;
margin: 5px 5px;
border-bottom: 1px solid #555555;
}
.main .list .shop p,
.main .list .shop .price {
text-align: center;
height: 30px;
padding: 5px 15px;
}
.main .list .shop p {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.main .list .shop .price small {
float: left;
line-height: 30px;
}
.main .list .shop .price span {
float: right;
line-height: 30px;
color: red;
}
.main .list .item {
width: 25%;
float: left;
box-sizing: border-box;
padding: 5px;
}
.main .list .item a {
text-decoration: none;
color: #999;
}
.main .item img {
width: 100%;
box-sizing: border-box;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
这个圣杯布局使用起来十分方便,以后可以轻松运用到实战中了~~