首页 > 代码库 > [div+css]竖排菜单

[div+css]竖排菜单

2024-08-09 12:18:07   220人阅读

技术分享

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Menu</title>
 6     <style>
 7         
 8         body{
 9             background-color: #ffded0;
10         }
11         #box{
12             width:120px;
13             font-size: 12px;
14             font-family: "宋体";
15         }
16         #box ul{
17             margin:0px;
18             padding:0px;
19             list-style-type: none;
20         }
21         #box li{
22             border-bottom: #ed9f9f solid 1px;
23 
24         }
25         #box li a{
26             display: block;
27             padding: 5px 5px 5px 8px;
28             text-decoration: none;
29             border-left: 12px solid #711515;
30             border-right: 1px solid #711515;
31         }
32         /*动态菜单的效果*/
33         #box li a:link{
34             background-color: #c11136;
35             color:#ffffff;
36         }
37         #box li a:visited{
38             background-color: #c11136;
39             color:#ffffff;
40         }
41         #box li a:hover{
42             background-color: #990020;
43             color:#ffff00;
44         }
45     </style>
46 </head>
47 <body>
48     <div id="box">
49         <ul>
50             <li><a href="#">首页</a></li>
51             <li><a href="#">音乐MP3</a></li>
52             <li><a href="#">个人相册</a></li>
53             <li><a href="#">我的博客</a></li>
54             <li><a href="#">我的空间</a></li>
55         </ul>
56     </div>
57 </body>
58 </html>

 

[div+css]竖排菜单


联系
我们