实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style5.css">
<title>布局案例1：通用的底部与头部布局技巧</title>
<style>
/*********************************头部样式开始*/
.header {
background-color: lightgray;
}
/*头部内容区*/
.header .content {
/*头部内容区，应该居中显示，所以要有宽度*/
width: 1200px;
height: 20px;
/*参考色块*/
/*background-color: black;*/
/*上下外边距为0，左右自动居中*/
/*因为上下相等，左右也相等，所以可以简写为： margin: 0 atuo;*/
margin: 0 auto;
}
/*头部内容区的导航*/
.header .content .nav {
/* 清空导航UL元素的默认样式*/
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
}
/*头部导航中列表项样式*/
.header .content .nav .item {
list-style-type: none;
}
/*头部导航中的链接样式： 重点*/
.header .content .nav .item a {
/* 一定要将浮动设置到链接标签<a>上面，否则无法实现导航区的点击与高亮*/
float: left;
/*设置最小宽度与最小高度，以使用导航文本的变化*/
min-width: 50px;
min-height: 20px;
/*设置行高与头部区块等高，是导航文本可以垂直居中显示*/
line-height: 20px;
color: black;
/*设置导航文本的左右内边距，使导航文本不要挨的太紧*/
padding: 0 15px;
/*去掉下划线*/
text-decoration: none;
/* 让导航文本在每一个小区块中居中显示*/
text-align: center;
}
.header .content .nav .item a:hover {
/*当鼠标移入到导航链接上时改变背景颜色文本前景色，实现当前导航高亮功能*/
color: red;
/* 将导航文本设置为系统跟字体大小的1.2倍*/
font-size:1.1rem;
}
/*******************************头部样式结束*/
/*******************************主体样式开始*/
/*主体容器设置宽度并居中*/
.container {
width:1200px;
min-height: 600px;
margin:5px auto;
background-color: lightblue;
overflow: hidden;
}
/*中间区块宽度设置在容器wrap中*/
.wrap {
/* 继承父级宽度*/
width:inherit;
min-height: 800px;
background-color: cyan;
}
/*左边栏样式*/
.left {
width: 200px;
min-height: 800px;
background-color: lightcoral;
}
/*右边栏样式*/
.right {
width: 200px;
min-height: 800px;
background-color: lightcoral;
}
/*因中间区块宽度100%，左右会到下面*/
.wrap, .left, .right {
float: left;
}
/*设置区块的负外边距，把区块反向移动*/
.left {
margin-left: -100%;
}
.right {
margin-left: -200px;
}
/*显示中间的main*/
.main {
padding-left: 200px;
padding-right: 200px;
}
/****************主体样式结束*/
/****************底部样式开始*/
/*与头部类似*/
.footer {
background-color: lightgray;
}
.footer .content p {
text-align: center;
line-height: 40px;
}
.footer .content a {
text-decoration: none;
color:black;
}
/****************底部样式结束*/
</style>
</head>
<body>
<div class="header">
<div class="content">
<div class="left-nav">
<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>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="wrap">
<div class="main">商品展示</div>
</div>
<div class="left">主题***</div>
<div class="right">个人信息</div>
</div>
<div class="footer">
<div class="content">
<p>
<a href="">taobao所有</a> |
<a href="">6666-6666666</a> |
<a href="">47298374938</a>
</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例