CSS盒子模型学习记录3（侧面导航栏）

学习http://www.blueidea.com/tech/web/2007/4545_2.asp

代码试验

html

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <link rel="stylesheet" type="text/css" href="2.css">
 7 </head>
 8 
 9 <body>
10 <ul id="nav">
11     <li>
12       <a href="#">Home</a>
13     </li>
14     
15     <li>
16       <a href="#">About Us</a>
17     </li>
18     
19     <li>
20       <a href="#">Services</a>
21     </li>
22     
23     <li>
24       <a href="#">Clients</a>
25     </li>
26     
27     <li>
28       <a href="#">Contacts</a>
29     </li>
30 </ul>
31 
32 </body>
33 </html>

css

 1 * {
 2     margin: 0px;
 3     padding: 0px;
 4     }
 5 #nav {
 6     background:url(4.png) repeat-y;
 7     width: 200px;
 8     overflow: hidden;
 9 }
10 #nav li {
11     height: 35px;
12     width: 190px;
13     padding-top:15px;
14 }
15 
16 #nav a {
17     background:#60758C no-repeat left center;
18     text-decoration: none;
19     height: 30px;
20     width: 155px;
21     display: block;               <!--让链接以块状方式呈现-->
22     float: right;
23     padding: 0px 0px 0px 5px;
24     font-weight: bold;
25     font-size: 15pt;
26     line-height: 30px;
27     color:#FFF;
28     border-left:10px solid #F66;  <!--组装黄色修饰块盒子(a的左边框，如果又独立用一个盒子来做就不科学了，因为此方法最简单)，直接给a加入下面一条样式即可-->
29 }
30 
31 #nav a:hover {
32     background: #00A8D5; <!--鼠标移到链接上时，链接风格的改变指定一个样式-->
33     color: #FFFFFF;
34 }

显示结果

CSS盒子模型学习记录3（侧面导航栏）

推荐阅读