接着之前第6个案例进行布局的小改进，增加了侧边导航栏制作的方法介绍，使用float属性后，在导航栏使用li列表来布局，同时注意使用超链接a的样式设置。
本例的参考代码如下：
<!DOCTYPE html>
<html>
<head>
<title>第7个案例</title>
<link rel="stylesheet" type="text/css" href="css/ex07.css">
</head>
<body>
<h2>网页布局实例2</h2>
<hr>
<div class="box">
<div class="header"></div>
<div class="main">
<div class="pl">
<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>
</ul>
</div>
<div class="pr"></div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
对应的CSS代码如下：
.box{
width: 600px;
min-height: 300px;
border: 1px solid #666;
margin: 0px auto;
}
.header{
width: 100%;
height: 50px;
background: #666;
}
.main{
width: 100%;
height: 400px;
background: #f0f0f0;
}
.main .pl{
width: 30%;
height: 100%;
border: 1px solid blue;
float: left;
}
.pl ul{
padding: 0px;
}
.pl li{
list-style: none;
height: 30px;
font-size: 18px;
margin-top:25px;
border-bottom: 1px solid #f30;
text-align: center;
}
a{
color:#333;
text-decoration: none;
}
a:hover{
color:#f30;
}
.main .pr{
width: 69%;
height: 100%;
border: 1px solid red;
float: left;
}
.footer{
width: 100%;
height: 30px;
background: #666;
}