CSS制作垂直菜单效果

czcd

 1 <style type="text/css">
 2 #czcd a{        /*后代选择器，外层的标记写在前面，内层的标记写在后面，在ID选择器“czcd”内的a标记选择器*/
 3     font-size: 14px;
 4     color: blue;
 5     text-decoration: none;
 6     background-color: yellow;
 7     display: block;        /*通过display定义为块级元素*/
 8     width: 83px;
 9     padding: 6px 10px 4px;        /*给出3个属性值代表上边距、左右边距、下边距*/
10     border:1px solid #000000;
11     margin: 2px;
12 }
13 #czcd a:hover{
14     color: yellow;
15     background-color: blue;
16 }
17 </style>
18 
19 <body>
20 <div id="czcd">
21     <a href="#">起始菜单000</a>
22     <a href="#">垂直菜单001</a>
23     <a href="#">垂直菜单002</a>
24     <a href="#">垂直菜单003</a>
25     <a href="#">垂直菜单004</a>            
26 </div>
27 </body>

 

posted @ 2012-05-13 21:08  roytanlu  阅读(352)  评论(2)    收藏  举报