CSS彻底研究 Demo

 

竖直菜单：

 

双竖线菜单 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3  <html xmlns="http://www.w3.org/1999/xhtml">
 4  <head>
 5     <title>双竖线菜单</title>
 6     <style type="text/css">
 7         /*对menu层的设置*/
 8         #menu 
 9         {
10             font-family: Arial;
11             font-size: 14px;
12             background: #ccc;
13             color: #000;
14             margin: 0 auto;
15             width: 120px;
16             padding: 8px;
17             border: 1px solid #ccc;
18         }
19         /*设置菜单选项*/
20         #menu a, #munu a:visited
21         {
22             display: block;
23             text-decoration: none;
24             color: #000;
25             margin: 8px 0;
26             padding: 4px 8px;
27             border-left: 8px solid #9ab;
28             border-right: 8px solid #9ab;
29             background-color: #fff;
30         }
31         #menu a:hover 
32         {
33             color: #f00;
34             border-color: #000;
35         }
36         /*使最上和最下的间距与中间的相等*/
37         #menu a#first, #menu a#last 
38         {
39             margin: 0;
40         }
41     </style>
42  </head>
43  <body>
44     <div id="menu">
45         <a href="#" id="first"> Home </a>
46         <a href="#"> Contact Us </a>
47         <a href="#"> Web Dev </a>
48         <a href="#"> Web Design </a>
49         <a href="#" id="last"> Map </a>
50     </div>
51  </body>
52  </html>
53  

箭头菜单效果图：

 

箭头菜单 
 1 <head>
 2     <title>箭头菜单</title>
 3     <style type="text/css">
 4         #menu
 5         {
 6             font-family: Arial;
 7             font-size: 16px;
 8             width: 140px;
 9             margin: 0 auto;
10             border: 1px solid #ccc;
11         }
12         #menu a, #menu a:visited
13         {
14             display: block;
15             text-decoration: none;
16             color: #c00;
17             margin: 8px 0;
18             padding: 4px;
19             background-color: #fff;
20             border: solid 1px #fff;
21             position: relative;
22             width: 130px;
23             text-align: center;
24         }
25         #menu a span 
26         {
27             display: none;
28         }
29         #menu a:hover 
30         {
31             border-color: #c00;
32         }
33         #menu a:hover span 
34         {
35             display: block;
36             position: absolute;
37             height: 0;
38             width: 0;
39             border: solid 8px #fff;
40             top: 4px;
41             overflow: hidden;
42         }
43         #menu a:hover span.left 
44         {
45             border-left-color:#c00;
46             left:8px;
47         }
48         #menu a:hover span.right 
49         {
50             border-right-color:#c00;
51             right:8px;
52         }
53     </style>
54  </head>
55  <body>
56     <div id="menu">
57        <a href="#">
58            <span class="left"></span> 
59                Home 
60             <span class="right"></span>
61         </a> 
62         <a href="#">
63             <span class="left"></span>
64                Contact Us
65             <span  class="right"></span>       
66         </a>
67         <a href="#">
68                <span class="left"></span>
69                 Web Dev
70             <span class="right"></span>       
71         </a> 
72         <a href="#">
73             <span class="left"></span>
74                    Web Design
75                <span class="right"></span>       
76            </a> 
77         <a href="#">
78                <span class="left"></span>
79                 Map
80             <span class="right"></span>        
81         </a>   
82      </div>
83  </body>

 

posted @ 2010-03-09 23:21  ued  阅读(201)  评论(0)    收藏  举报