实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>利用圣杯布局进行网站首页布局</title>
<style type="text/css">
body,h1,p{
margin: 0;
}
.slider {
width: 90%;
margin: 0 auto;
/* 图片居中 */
}
.slider img {
width: 100%;
}
/*头部设置：1、底部背景色2、内容区大小颜色3、内容块样式4、最具体内容样式*/
.header{
background-color: #444444;
}
.header .content{
width: 90%;
height: 60px;
background-color: #444444;
margin: 0 auto;
}
.header .content .nav{
margin: 0;
padding: 0;
}
.header .content .nav .item{
list-style: none;
}
.header .content .nav .item a{
float: left;
min-height: 60px;
min-width: 80px;
text-align: center;
line-height: 60px;
text-decoration: none;
color: white;
padding: 0 15px;
}
.header .content .nav .item a:hover{
color: red;
font-size: 1.3rem;
}
/*主体部分：1、设置主体的宽度2、三列区域宽高设置设置3、三块浮动4、计算并摆好各个块位置*/
.container {
width: 90%;
background-color: lightgray;
margin: 5px auto;
}
.left {
width: 200px;
min-height: 800px;
background-color: lightseagreen;
}
.right {
width: 200px;
min-height: 800px;
background-color: lightblue;
}
.main {
width: 100%;
min-height: 800px;
background-color: lightcoral;
}
.main,.left,.right{
float: left;
}
.container {
overflow: hidden;
/*测试用border: 1px solid red;*/
}
.main {
box-sizing: border-box;
/*padding易导致该块元素撑开父级元素。古增加box-sizing:border-box;*/
padding-left: 200px;
padding-right: 200px;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -200px;
}
/* 设置主体样式 */
.item_1{
width: 250px;
height: 300px;
overflow: hidden;
display: inline-block;
}
.info{
padding:20px 20px;
}
.info img {
width: 250px;
float: left;
}
.info span {
float: left;
}
.info button {
float: right;
}
.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;
font-size: 1.1rem;
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: red;
font-size: 1.3rem;
text-decoration: underline;
cursor: pointer;
}
/*底部设置：1、底部背景色2、内容区大小颜色3、内容块样式4、最具体内容样式*/
.footer {
background-color: black;
}
.footer .content {
width: 90%;
height: 60px;
background-color: black;
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;
font-size: 1.3rem;
}
</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>
</ul>
</div>
</div>
<div class="slider">
<img src="timg.jpg" alt="">
</div>
<!--主体-->
<div class="container">
<!-- 圣杯DOM结构-->
<!-- 主体-->
<div class="main">
<h1>商品展示</h1>
<div class="item_1">
<div class="info">
<img src="http://47.105.172.158/images/1.jpg" alt="">
<span >￥<strong>9.9</strong></span>
<button >***</button></span>
</div>
</div>
<div class="item_1">
<div class="info">
<img src="http://47.105.172.158/images/2.jpg" alt="">
<span >￥<strong>9.9</strong></span>
<button >***</button></span>
</div>
</div>
<div class="item_1">
<div class="info">
<img src="http://47.105.172.158/images/3.jpg" alt="">
<span >￥<strong>9.9</strong></span>
<button >***</button></span>
</div>
</div>
<div class="item_1">
<div class="info">
<img src="http://47.105.172.158/images/4.jpg" alt="">
<span >￥<strong>9.9</strong></span>
<button >***</button></span>
</div>
</div>
<div class="item_1">
<div class="info">
<img src="http://47.105.172.158/images/5.jpg" alt="">
<span >￥<strong>9.9</strong></span>
<button >***</button></span>
</div>
</div>
<div class="item_1">
<div class="info">
<img src="http://47.105.172.158/images/6.jpg" alt="">
<span >￥<strong>9.9</strong></span>
<button >***</button></span>
</div>
</div>
<div class="item_1">
<div class="info">
<img src="http://47.105.172.158/images/7.jpg" alt="">
<span >￥<strong>9.9</strong></span>
<button >***</button></span>
</div>
</div>
</div>
<!-- 左侧边栏-->
<div class="left">
<h1>商品列表</h1>
<ul>
<li><a href="">特价可比克薯片</a></li>
<li><a href="">特价酱香牛肉干</a></li>
<li><a href="">特价四川腊肉</a></li>
<li><a href="">特价餐饮好评贴</a></li>
<li><a href="">特价快餐盒</a></li>
<li><a href="">特价土豆</a></li>
<li><a href="">特价香花生</a></li>
</ul>
</div>
<!-- 右侧边栏-->
<div class="right"><h1>
<h1>最受欢迎购物榜</h1>
<ul>
<li><a href="">喜之郎果冻</a></li>
<li><a href="">傻瓜花生</a></li>
<li><a href="">今麦郎方便面</a></li>
<li><a href="">盼盼小馒头</a></li>
<li><a href="">可爱多冰激凌</a></li>
<li><a href="">土豆泥</a></li>
<li><a href="">薯条包</a></li>
</ul>
</h1></div>
</div>
<!--底部-->
<div class="footer">
<!-- 底部内容区-->
<div class="content">
<p>
<a href="">© php中文网版本所有</a> |
<a href="">0551-666***999</a> |
<a href="">皖ICP备19***666</a>
</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：第一次实现全面布局，基本排位布局建立基本框架没有问题。现在自己最大的问题是在元素在框架内的排列还显得很生疏。这个布局还是我在参考其他同学的基础上实现，通过这个功能实现发现过去一周的课程掌握不是很扎实。只能在后续中通过不断的联系来提升。
现在最大问题是：
1、布局的概念还是很单调，只能通过一些简单的排布。嵌套中标签超过5个，感觉有点乱，看不懂。
2、嵌套中样式一多，感觉有些样式实现没有底