导航条和简单的一个布局
试着做一些综合性的练习，后期做的页面丰富性会高一点的。导航条在网页中非常常见的，网页中的导航器或者导航条一般都是用无序列表制作的，今天我做了一个简单的导航条和一个简单的布局框架。
感兴趣的话可以在我这个代码上修改，也可以自己去试着写写，其实是很简单的。
在这里一般我把CSS代码和html写在一起了 方便一点。
导航条的源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条的练习</title>
<style>
*{
/*初始化网页设置*/
margin: 0;
padding: 0;
}
.nav{
width: 600px;
margin: 10px auto;
background-color: #6366ff;
/*子元素浮动时 要解决父元素高度塌陷问题*/
overflow: hidden;
}
.nav a{
display: block;
width: 100%;
padding: 3px 0;
text-decoration: none;
text-align: center;
font-weight: bolder;
color: white;
}
.nav li{
/*为子元素设置浮动*/
float: left;
width: 100px;
list-style-type: none;
}
.nav a:hover{
/*设置一个鼠标划过的效果*/
background-color: brown;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#" title="首页">首页</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>
</body>
</html>一般的导航器或者是导航条都会用无序列表来制作，在制作的时候，用到了浮动属性。对于浮动属性，当子元素添加浮动时，父元素会有高度塌陷的问题，一定不能忘记解决
解决父元素的高度塌陷问题：
1. 对于IE6以及一下版本 使用 zoom：1
2. 对于火狐、谷歌浏览器使用 overflow的非默认值。 一般常用overflow：hidde
显示效果
扫描二维码关注公众号，回复：
8601880 查看本文章
简单布局的源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个简单的布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.header{
width: 800px;
height: 100px;
margin: 5px auto;
text-align: center;
background-color: #fba;
}
.content{
width: 800px;
height: 400px;
margin: 5px auto;
background-color: #eb00e8;
overflow: hidden;
}
.menu{
width: 200px;
height: 100%;
text-align: center;
background-color: bisque;
float: left;
}
.news{
width: 380px;
height: 100%;
margin: 0 10px;
background-color: #a08796;
float: left;
overflow: hidden;
}
.news1{
width: 120px;
height: 50%;
text-align: center;
background-color: #6366ff;
float: left;
}
.news2{
width: 120px;
height: 50%;
margin: 0 10px;
text-align: center;
background-color: #feb7ff;
float: left;
}
.news3{
width: 120px;
height: 50%;
text-align: center;
background-color: #b3fff5;
float: left;
}
.news4{
width: 380px;
height: 50%;
/*position: relative;*/
/*top: 200px;*/
/*left: 0;*/
text-align: center;
background-color: deepskyblue;
}
.pro_photo{
width: 200px;
height: 100%;
text-align: center;
background-color: pink;
float: left;
}
.footer {
width: 800px;
height: 100px;
margin: 0 auto;
text-align: center;
background-color: orange;
}
</style>
</head>
<body>
<!--<div class="wed">-->
<div class="header">
<p>这里放banner、导航条、登录注册信息等</p>
</div>
<div class="content">
<div class="menu">
<p>这是存放一系列的菜单选项</p>
</div>
<div class="news">
<div class="news4">这里是div 新闻4</div>
<div class="news1">这里是div新闻1</div>
<div class="news2">这里是div新闻2</div>
<div class="news3">这里是div新闻3</div>
</div>
<div class="pro_photo">
<p>这里是图片栏</p>
</div>
</div>
<div class="footer">这里是网页的页脚</div>
<!--</div>-->
</body>
</html>一般的网页布局是这样的艾，在这个基础上做一些修改，添加一些复杂的东西，一个不错的静态网页就成了阿，颜色搭配的话为了鲜明一点，选的颜色突出一些，平时也可以提升提升自己的审美的。
下面是显示效果
