导航条练习

最新推荐文章于 2024-09-12 23:00:00 发布
最新推荐文章于 2024-09-12 23:00:00 发布
阅读量123 收藏
点赞数
文章标签： xhtml php javascript ViewUI
原文链接：http://www.cnblogs.com/traces/archive/2012/05/26/2519521.html
版权

练习安排：
1.先按照所给4案例的效果，在不看其源码的基础上还原出来（可使用文件夹提供的图片源）

案例1：

案例2：

案例3：

案例4：

完成结果推荐代码为：

案例1：

 1 <!DOCTYPE HTML>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style type="text/css" media="screen">
 7     /* Simple scalable breadcrumb by Veerle Pieters
 8     ------------------------------------------------------------------*/
 9     body {
10         font:71%/165% "Lucida Grande", Lucida, Verdana, sans-serif;
11         }
12     ul, li {
13         list-style-type:none;
14         padding:0;
15         margin:0;
16         }        
17     #crumbs {
18         height:2.3em;
19         border:1px solid #dedede;
20         }
21     #crumbs li {
22         float:left;
23         line-height:2.3em;
24         color:#777;
25         padding-left:.75em;
26         }        
27     #crumbs li a {
28         background:url(crumbs.jpg) no-repeat right center;
29         display:block;
30         padding:0 15px 0 0;
31         }                            
32     #crumbs li a:link,
33     #crumbs li a:visited {
34         color:#777;
35         text-decoration:none;
36         }    
37     a:link, a:visited,    
38     #crumbs li a:hover,
39     #crumbs li a:focus {
40         color:#dd2c0d;
41         }        
42     </style>
43 </head>
44 <body>
45     <ul id="crumbs">
46     <li><a href="#">Home</a></li>
47     <li><a href="#">Main section</a></li>
48     <li><a href="#">Sub section</a></li>
49     <li><a href="#">Sub sub section</a></li>
50     <li>The page you are on right now</li>
51     </ul>
52 </body>
53 </html>

其中图片：crumbs.jpg  

 

案例2：

index.html

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 2         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 4 <head>
 5     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 6     <title></title>
 7     <link rel="stylesheet" href="menu_style.css" type="text/css" />
 8 </head>
 9 <body>
10     <br>
11     <br>
12     <div class="menu">
13         <ul>
14             <li><a href="#" >Home</a></li>
15             <li><a href="#" id="current">Products</a>
16                 <ul>
17                     <li><a href="#">Drop Down CSS Menus</a></li>
18                     <li><a href="#">Horizontal CSS Menus</a></li>
19                     <li><a href="#">Vertical CSS Menus</a></li>
20                     <li><a href="#">Dreamweaver Menus</a></li>
21                </ul>
22           </li>
23             <li><a href="/faq.php">FAQ</a>
24                 <ul>
25                 <li><a href="#">Drop Down CSS Menus</a></li>
26                 <li><a href="#">Horizontal CSS Menus</a></li>
27                 <li><a href="#">Vertical CSS Menus</a></li>
28                 <li><a href="#">Dreamweaver Menus</a></li>
29                 </ul>
30           </li>
31             <li><a href="/contact/contact.php">Contact</a></li>
32         </ul>
33     </div>
34 
35 </body>
36 </html>

其中图片有：

hover.gif：

hover_sub.gif：

seperator.gif：

sub_sep.gif：

 menu_style.css

 1 .menu{
 2     border:none;
 3     border:0px;
 4     margin:0px;
 5     padding:0px;
 6     font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
 7     font-size:14px;
 8     font-weight:bold;
 9     }
10 .menu ul{
11     background:#333333;
12     height:35px;
13     list-style:none;
14     margin:0;
15     padding:0;
16     }
17     .menu li{
18         float:left;
19         padding:0px;
20         }
21     .menu li a{
22         background:#333333 url("images/seperator.gif") bottom right no-repeat;
23         color:#cccccc;
24         display:block;
25         font-weight:normal;
26         line-height:35px;
27         margin:0px;
28         padding:0px 25px;
29         text-align:center;
30         text-decoration:none;
31         }
32         .menu li a:hover, .menu ul li:hover a{
33             background: #2580a2 url("images/hover.gif") bottom center no-repeat;
34             color:#FFFFFF;
35             text-decoration:none;
36             }
37     .menu li ul{
38         background:#333333;
39         display:none;
40         height:auto;
41         padding:0px;
42         margin:0px;
43         border:0px;
44         position:absolute;
45         width:225px;
46         z-index:200;
47         /*top:1em;
48         /*left:0;*/
49         }
50     .menu li:hover ul{
51         display:block;
52         
53         }
54     .menu li li {
55         background:url('images/sub_sep.gif') bottom left no-repeat;
56         display:block;
57         float:none;
58         margin:0px;
59         padding:0px;
60         width:225px;
61         }
62     .menu li:hover li a{
63         background:none;
64         
65         }
66     .menu li ul a{
67         display:block;
68         height:35px;
69         font-size:12px;
70         font-style:normal;
71         margin:0px;
72         padding:0px 10px 0px 15px;
73         text-align:left;
74         }
75         .menu li ul a:hover, .menu li ul li:hover a{
76             background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
77             border:0px;
78             color:#ffffff;
79             text-decoration:none;
80             }
81     .menu p{
82         clear:left;
83         }

 案例3：

index.html

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4 <title>Massive Blue ~ CSS Vertical Menu</title>
 5 <style type="text/css">
 6     @import url(menu_style.css); 
 7 </style>
 8 </head>
 9 <body>
10 
11 <ul id="menu">
12     <li><a href="#" title="Home">Home</a></li>
13     <li><a href="#" title="Products">Products</a></li>
14     <li><a href="#" title="Services">Services</a></li>
15     <li><a href="#" title="Support">Support</a></li>
16     <li><a href="#" title="FAQ">FAQ</a></li>
17 </ul>
18 
19 </body>
20 </html>

其中图片有：

hover.gif： 

seperator.gif： 

menu_style.css

 1 #menu {
 2     background: #333;
 3     float: left;
 4     list-style: none;
 5     margin: 0;
 6     padding: 0;
 7     width: 12em;
 8 }
 9 #menu li {
10     font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
11     margin: 0;
12     padding: 0;
13 }
14 #menu a {
15     background: #333;
16     border-bottom: 1px solid #393939;
17     color: #ccc;
18     display: block;
19     margin: 0;
20     padding: 8px 12px;
21     text-decoration: none;
22 }
23 #menu a:hover {
24     background: #2580a2 url("images/hover.gif") left center no-repeat;
25     color: #fff;
26     padding-bottom: 8px;
27 }

 

 案例4：

使用css2.0：

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2 <html>
  3     <head>
  4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5         <title>CSS Menu</title>
  6         <style type="text/css">
  7             body {
  8                 padding: 50px;
  9             }
 10             /* The CSS Code for the menu starts here */
 11             #menu {
 12                 font-family: Arial, sans-serif;
 13                 font-weight: bold;
 14                 text-transform: uppercase;
 15                 margin: 50px 0;
 16                 padding: 0;
 17                 list-style-type: none;
 18                 background-color: #eee;
 19                 font-size: 13px;
 20                 height: 40px;
 21                 border-top: 2px solid #eee;
 22                 border-bottom: 2px solid #ccc;
 23             }
 24             #menu li {
 25                 float: left;
 26                 margin: 0;                
 27             }
 28             #menu li a {
 29                 text-decoration: none;
 30                 display: block;
 31                 padding: 0 20px;
 32                 line-height: 40px;
 33                 color: #666;
 34             }
 35             #menu li a:hover, #menu li.active a {
 36                 background-color: #f5f5f5;
 37                 border-bottom: 2px solid #DDD;
 38                 color: #999;
 39             }
 40             #menu_wrapper ul {margin-left: 12px;}
 41             #menu_wrapper {padding: 0 16px 0 0; background: url(images/grey.png) no-repeat right;}
 42             #menu_wrapper div {float: left; height: 44px; width: 12px; background: url(images/grey.png) no-repeat left;}
 43             
 44             /* Black Menu */
 45             #menu_wrapper.black ul {
 46                 border-top: 2px solid #333;
 47                 border-bottom: 2px solid #000;
 48                 background: #333;}
 49             #menu_wrapper.black a {color: #CCC;}
 50             #menu_wrapper.black li a:hover, #menu_wrapper.black li.active a {color: #999; background: #555; border-bottom: 2px solid #444;}
 51             #menu_wrapper.black {background: url(images/black.png) no-repeat right;}
 52             #menu_wrapper.black div {background: url(images/black.png) no-repeat left;}
 53             
 54             /* Blue Menu */
 55             #menu_wrapper.blue ul {
 56                 border-top: 2px solid #356AA0;
 57                 border-bottom: 2px solid #204061;
 58                 background: #356AA0;}
 59             #menu_wrapper.blue a {color: #fff;}
 60             #menu_wrapper.blue li a:hover, #menu_wrapper.blue li.active a {color: #90CDFF; background: #3D7BBB; border-bottom: 2px solid #356AA0;}
 61             #menu_wrapper.blue {background: url(images/blue.png) no-repeat right;}
 62             #menu_wrapper.blue div {background: url(images/blue.png) no-repeat left;}
 63             
 64             /* Red Menu */
 65             #menu_wrapper.red ul {
 66                 border-top: 2px solid #660000;
 67                 border-bottom: 2px solid #450000;
 68                 background: #660000;}
 69             #menu_wrapper.red a {color: #fff;}
 70             #menu_wrapper.red li a:hover, #menu_wrapper.red li.active a {color: #F27F84; background: #990000; border-bottom: 2px solid #660000;}
 71             #menu_wrapper.red {background: url(images/red.png) no-repeat right;}
 72             #menu_wrapper.red div {background: url(images/red.png) no-repeat left;}
 73             
 74             /* Orange Menu */
 75             #menu_wrapper.orange ul {
 76                 border-top: 2px solid #d15600;
 77                 border-bottom: 2px solid #B44500;
 78                 background: #d15600;}
 79             #menu_wrapper.orange a {color: #fff;}
 80             #menu_wrapper.orange li a:hover, #menu_wrapper.orange li.active a {color: #FA9B5B; background: #B44500; border-bottom: 2px solid #d15600;}
 81             #menu_wrapper.orange {background: url(images/orange.png) no-repeat right;}
 82             #menu_wrapper.orange div {background: url(images/orange.png) no-repeat left;}
 83         </style>
 84     </head>
 85     <body>
 86         <!-- Grey Menu -->
 87         <div id="menu_wrapper" class="grey">
 88             <div class="left"></div>
 89             <ul id="menu">
 90                 <li><a href="#">Home</a></li>
 91                 <li class="active"><a href="#">About</a></li>
 92                 <li><a href="#">Services</a></li>
 93                 <li><a href="#">Products</a></li>
 94                 <li><a href="#">Contact</a></li>
 95             </ul>
 96         </div>
 97         
 98         <!-- Black Menu -->
 99         <div id="menu_wrapper" class="black">
100         <div class="left"></div>
101             <ul id="menu">
102                 <li><a href="#">Home</a></li>
103                 <li class="active"><a href="#">About</a></li>
104                 <li><a href="#">Services</a></li>
105                 <li><a href="#">Products</a></li>
106                 <li><a href="#">Contact</a></li>
107             </ul>
108         </div>
109         
110         <!-- Blue Menu -->
111         <div id="menu_wrapper" class="blue">
112         <div class="left"></div>
113             <ul id="menu">
114                 <li><a href="#">Home</a></li>
115                 <li class="active"><a href="#">About</a></li>
116                 <li><a href="#">Services</a></li>
117                 <li><a href="#">Products</a></li>
118                 <li><a href="#">Contact</a></li>
119             </ul>
120         </div>
121         
122         <!-- Red Menu -->
123         <div id="menu_wrapper" class="red">
124         <div class="left"></div>
125             <ul id="menu">
126                 <li><a href="#">Home</a></li>
127                 <li class="active"><a href="#">About</a></li>
128                 <li><a href="#">Services</a></li>
129                 <li><a href="#">Products</a></li>
130                 <li><a href="#">Contact</a></li>
131             </ul>
132         </div>
133         
134         <!-- Orange Menu -->
135         <div id="menu_wrapper" class="orange">
136         <div class="left"></div>
137             <ul id="menu">
138                 <li><a href="#">Home</a></li>
139                 <li class="active"><a href="#">About</a></li>
140                 <li><a href="#">Services</a></li>
141                 <li><a href="#">Products</a></li>
142                 <li><a href="#">Contact</a></li>
143             </ul>
144         </div>
145     </body>
146 </html>

使用css3:

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2 <html>
  3     <head>
  4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5         <title>CSS Menu</title>
  6         <style type="text/css">
  7             body {
  8                 padding: 50px;
  9             }
 10             /* The CSS Code for the menu starts here */
 11             #menu {
 12                 font-family: Arial, sans-serif;
 13                 font-weight: bold;
 14                 text-transform: uppercase;
 15                 margin: 50px 0;
 16                 padding: 0 0 0 10px;
 17                 list-style-type: none;
 18                 font-size: 13px;
 19                 background: #eee;
 20                 height: 40px;
 21                 -moz-border-radius: 10px;
 22                 -webkit-border-radius: 10px;
 23                 border-top: 2px solid #eee;
 24                 border-left: 2px solid #eee;
 25                 border-bottom: 2px solid #ccc;
 26                 border-right: 2px solid #ccc;
 27             }
 28             #menu li {
 29                 float: left;
 30                 margin: 0;
 31                 
 32             }
 33             #menu li a {
 34                 text-decoration: none;
 35                 display: block;
 36                 padding: 0 20px;
 37                 line-height: 40px;
 38                 color: #666;
 39             }
 40             #menu li a:hover, #menu li.active a {
 41                 background-color: #f5f5f5;
 42                 border-bottom: 2px solid #DDD;
 43                 color: #999;
 44             }
 45             
 46             /* Black Menu */
 47             #menu.black {
 48                 border-top: 2px solid #333;
 49                 border-left: 2px solid #333;
 50                 border-bottom: 2px solid #000;
 51                 border-right: 2px solid #000;
 52                 background: #333;}
 53             #menu.black a {color: #CCC;}
 54             #menu.black li a:hover, #menu.black li.active a {color: #999; background: #555; border-bottom: 2px solid #444;}
 55 
 56             
 57             /* Blue Menu */
 58             #menu.blue {
 59                 border-top: 2px solid #356AA0;
 60                 border-left: 2px solid #356AA0;
 61                 border-bottom: 2px solid #204061;
 62                 border-right: 2px solid #204061;
 63                 background: #356AA0;}
 64             #menu.blue a {color: #fff;}
 65             #menu.blue li a:hover, #menu.blue li.active a {color: #90CDFF; background: #3D7BBB; border-bottom: 2px solid #356AA0;}
 66             
 67             /* Red Menu */
 68             #menu.red {
 69                 border-top: 2px solid #660000;
 70                 border-left: 2px solid #660000;
 71                 border-bottom: 2px solid #450000;
 72                 border-right: 2px solid #450000;
 73                 background: #660000;}
 74             #menu.red a {color: #fff;}
 75             #menu.red li a:hover, #menu.red li.active a {color: #F27F84; background: #990000; border-bottom: 2px solid #660000;}
 76             
 77             /* Orange Menu */
 78             #menu.orange {
 79                 border-top: 2px solid #d15600;
 80                 border-left: 2px solid #d15600;
 81                 border-bottom: 2px solid #B44500;
 82                 border-right: 2px solid #B44500;
 83                 background: #d15600;}
 84             #menu.orange a {color: #fff;}
 85             #menu.orange li a:hover, #menu.orange li.active a {color: #FA9B5B; background: #B44500; border-bottom: 2px solid #d15600;}
 86         </style>
 87     </head>
 88     <body>
 89         <!-- Grey Menu -->
 90         <ul id="menu" class="grey">
 91             <li><a href="#">Home</a></li>
 92             <li class="active"><a href="#">About</a></li>
 93             <li><a href="#">Services</a></li>
 94             <li><a href="#">Products</a></li>
 95             <li><a href="#">Contact</a></li>
 96         </ul>
 97         
 98         <!-- Black Menu -->
 99         <ul id="menu" class="black">
100             <li><a href="#">Home</a></li>
101             <li class="active"><a href="#">About</a></li>
102             <li><a href="#">Services</a></li>
103             <li><a href="#">Products</a></li>
104             <li><a href="#">Contact</a></li>
105         </ul>
106         
107         <!-- Blue Menu -->
108         <ul id="menu" class="blue">
109             <li><a href="#">Home</a></li>
110             <li class="active"><a href="#">About</a></li>
111             <li><a href="#">Services</a></li>
112             <li><a href="#">Products</a></li>
113             <li><a href="#">Contact</a></li>
114         </ul>
115         
116         <!-- Red Menu -->
117         <ul id="menu" class="red">
118             <li><a href="#">Home</a></li>
119             <li class="active"><a href="#">About</a></li>
120             <li><a href="#">Services</a></li>
121             <li><a href="#">Products</a></li>
122             <li><a href="#">Contact</a></li>
123         </ul>
124         
125         <!-- Orange Menu -->
126         <ul id="menu" class="orange">
127             <li><a href="#">Home</a></li>
128             <li class="active"><a href="#">About</a></li>
129             <li><a href="#">Services</a></li>
130             <li><a href="#">Products</a></li>
131             <li><a href="#">Contact</a></li>
132         </ul>
133     </body>
134 </html>

其中图片有：

black.png:

blue.png:

white.png:

orange.png:

red.png:

2.还原出4个案例导航后，完成a，b，c的小任务

a任务 b任务 c任务
                           a任务                                                    b任务                                                     c任务
 
完成后的推荐代码为：

a任务：

a.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4    <meta charset="utf-8" />
 5     <link rel="stylesheet" type="text/css" href="a.css" />
 6     <script type="text/javascript" src="a.js"></script>
 7 </head>
 8 <body onmousedown="disappear()">
 9     <ul id="nav">
10       <li><a href=" #">Web</a></li>
11       <li><a href=" #">Images</a></li>
12       <li><a href=" #">Videos</a></li>
13       <li><a href=" #">Maps</a></li>
14       <li><a href=" #">News</a></li>
15       <li><a href=" #">Gmail</a></li>
16       <li  class="more0"><a href=" #" onmousedown="appear()" onmouseover="a1()"onmouseout="a0()">more</a>
17          <ul id="more">
18            <li><a href=" #">Shopping</a></li>
19            <li><a href=" #">Translate</a></li>
20            <li><a href=" #">Books</a></li>
21            <li><a href=" #">Finance</a></li>
22            <li><a href=" #">Scholar</a></li>
23            <li><a href=" #">Blogs</a></li>
24            <li><a href=" #">YouTube</a></li>
25            <li><a href=" #">Calendar</a></li>
26            <li><a href=" #">Photos</a></li>
27            <li><a href=" #">Documents</a></li>
28            <li><a href=" #">Reader</a></li>
29            <li><a href=" #">Sites</a></li>
30            <li><a href=" #">Groups</a></li>
31            <li><a href=" #">even more >></a></li>
32          </ul>
33       </li>
34     </ul>
35 </body>
36 </html>

其中图片有：

a.png:

a.css

 1 body{
 2     margin:0;
 3     padding:0;
 4     border:0;
 5     font-family:arial,"\5b8b\4f53",Verdana,sans-serif;
 6     height:900px;
 7     }
 8 #nav{
 9     background:#2D2D2D;
10     margin:3px;
11     height:30px;
12     }
13 #nav li{
14     margin:0px;
15     padding:0px;
16     float:left;
17     }
18 #nav li a{
19     font-size:13px;
20     color:#CBCBC6;
21     display:block;
22     padding:7px;
23     text-decoration:none;
24     }
25 #nav li a:hover{
26     background:white;
27     color:#3266CB;
28     }
29 #nav li:hover a{
30     background:white;
31     color:#3266CB;
32     }
33 #nav li ul{
34     position:relative;
35     background:white;
36     border:1px #CBCBC6 solid;
37     width:90px;
38     height:400px;
39     display:none;
40     }
41 #nav li ul li{
42     clear:both;
43     }
44 #nav li ul li a{
45     font-size:12px;
46     color:#3266CB;
47     display:block;
48     padding:5px;
49     width:79px;
50     }
51 #nav li ul li a:hover{
52     background:#EFF3FB;
53     }
54 .more0 a:hover{
55     width:79px;
56     background:none;
57     background: #FFFFFF url("a.png") no-repeat center right;
58 }

a.js

 1 var a=0;
 2 function a1(){
 3   a=1;
 4 }
 5 function a0(){
 6     a=0;
 7 }
 8 function appear(){
 9   var y=document.getElementById("more");
10   if(!y.style.display)
11   y.style.display="none";
12   if(y.style.display=="none")
13     y.style.display="block";
14   else y.style.display="none";
15 }
16 function disappear(){
17   var y=document.getElementById("more"); 
18   if(y.style.display!="none"&&a==0)
19   y.style.display="none";
20 }

 b任务：

方法一：

b.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4    <meta charset="utf-8" />
 5     <link rel="stylesheet" type="text/css" href="b.css" />
 6     <script type="text/javascript" src="b.js"></script>
 7 </head>
 8 <body>
 9     <ul id="nav">
10       <li><a href=" #">Home</a></li>
11       <li><a href=" #">Products</a>
12          <ul id="products">
13            <li><a href=" #">Drop Down CSS Menus</a></li>
14            <li><a href=" #">Horizontal CSS Menus</a>
15                 <ul class="product0">
16                     <li><a href=" #">product1</a></li>
17                     <li><a href=" #">product2</a></li>
18                     <li><a href=" #">product3</a></li>
19                     <li><a href=" #">product4</a></li>
20                 </ul>
21            </li>
22            <li><a href=" #">Vertical CSS Menus</a>
23                 <ul class="menu0">
24                     <li><a href=" #">menu1</a></li>
25                     <li><a href=" #">menu2</a></li>
26                     <li><a href=" #">menu3</a></li>
27                     <li><a href=" #">menu4</a></li>
28                 </ul>
29            </li>
30            <li><a href=" #">Dreamweaver Menus</a></li>
31          </ul>
32       </li>
33       <li><a href=" #">FAQ</a>
34          <ul id="faq">
35            <li><a href=" #">Drop Down CSS Menus</a></li>
36            <li><a href=" #">Horizontal CSS Menus</a></li>
37            <li><a href=" #">Vertical CSS Menus</a></li>
38            <li><a href=" #">Dreamweaver Menus</a></li>
39          </ul>
40       </li>
41       <li><a href=" #">Contact</a></li>
42     </ul>
43 </body>
44 </html>

b.css

 1 body{ 
 2   margin:0;
 3   padding:0;
 4   border:0;
 5   font-family:arial,"\5b8b\4f53",Verdana,sans-serif;
 6   height:800px;
 7   }
 8 #nav{
 9   height:37px;
10   background-color:#333333;
11   margin:41px 5px;
12 }
13 #nav li {
14   margin:0px;
15   float:left;
16   padding:0px;
17   background:#333333 url("images/seperator.gif") bottom right no-repeat;
18   text-align:center;
19 }
20 #nav li a{
21   color:white;
22   font-size:15px;
23   display:block;
24   text-decoration:none;
25   padding:10px 24px;
26 }
27 #nav li ul{
28   display:none;
29 }
30 #nav  li:hover ul{
31   background-color:#333333;
32   display:block;
33   position:absolute;
34 }
35 #nav  li.sfhover ul{
36   background-color:#333333;
37   display:block;
38   position:absolute;
39 }
40 #nav li:hover{
41    background:#478baf url("images/hover.gif") bottom center no-repeat;  
42 }
43 #nav li a:hover{
44    background:#478baf url("images/hover.gif") bottom center no-repeat; 
45 }
46 #nav li ul li{
47   clear:both;
48   text-decoration:none;
49   width:225px;
50   background:#333333 url("images/sub_sep.gif") bottom left no-repeat;
51 }
52 #nav li ul li a{
53   font-size:12px;
54   text-align:left;
55 }
56 #nav li ul li a:hover{
57   background:#478baf url("images/hover_sub.gif") center left no-repeat;
58 }
59 #nav li:hover ul li ul{
60     display:none;
61      width:220px;
62     height:140px; 
63 }
64 #nav li.sfHover ul li ul{
65     display:none;
66      width:220px;
67     height:140px; 
68 }
69 .product0{
70     position:absolute;
71     top:35px;
72     left:225px;
73 }
74 .menu0{
75     position:absolute;
76     top:70px;
77     left:225px;
78 }
79 #nav0{
80     position:absolute;
81     top:70px;
82     left:225px;
83 }
84 
85 #nav li:hover ul li:hover ul{
86     display:block;
87 }
88 #nav li.sfHover ul li.sffHover ul{
89     display:block;
90 }
91 #nav li ul li ul li{
92     text-decoration:none;
93     width:225px;
94     background:#333333 url("images/sub_sep.gif") bottom left no-repeat;
95 }
96 #nav li ul li ul li a{
97     font-size:12px;
98     text-align:left;
99 }

b.js

 1 sfHover =function() {
 2 var sfEls = document.getElementById("nav").getElementsByTagName("li");
 3 for (var i=0; i<sfEls.length; i++) {
 4 sfEls[i].onmouseover=function() {
 5 this.className+=" sfhover";
 6 }
 7 sfEls[i].onmouseout=function() {
 8 this.className=this.className.replace(new RegExp(" sfhover\b"), "");
 9 }
10 }
11 }
12 
13 sffHover =function() {
14 var sffEls = document.getElementById("products").getElementsByTagName("li");
15 for (var j=0; j<sffEls.length; j++) {
16 sffEls[j].onmouseover=function() {
17 this.className=" sffhover";
18 }
19 sffEls[j].onmouseout=function() {
20 this.className=this.className.replace(new RegExp(" sffhover\b"), "");
21 }
22 }
23 }
24 if (window.attachEvent) window.attachEvent("onload", sffHover);
25 if (window.attachEvent) window.attachEvent("onload", sfHover);

 

方法二：

b2.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4    <meta charset="utf-8" />
 5     <link rel="stylesheet" type="text/css" href="b2.css" />
 6 </head>
 7 <body>
 8     <ul id="nav">
 9       <li><a href=" #">Home</a></li>
10       <li><a href=" #">Products<![if !IE 6]></a><![endif]>
11         <![if IE 6]>
12         <table class="pro"><tr><td>
13         <![endif]>
14          <ul>
15            <li><a href=" #">Drop Down CSS Menus</a></li>
16            <li><a href=" #" class="drop">Horizontal CSS Menus<![if !IE 6]></a><![endif]>
17            <![if IE 6]>
18            <table class="pro0"><tr><td>
19            <![endif]>
20                 <ul class="product0">
21                     <li><a href=" #">product1</a></li>
22                     <li><a href=" #">product2</a></li>
23                     <li><a href=" #">product3</a></li>
24                     <li><a href=" #">product4</a></li>
25                 </ul>
26             <![if IE 6]>
27             </td></tr></table>
28            </a>
29            <![endif]>
30            </li>
31            <li><a href=" #" class="drop">Vertical CSS Menus<![if !IE 6]></a><![endif]>
32            <![if IE 6]>
33            <table class="men0"><tr><td>
34            <![endif]>
35                 <ul class="menu0">
36                     <li><a href=" #">menu1</a></li>
37                     <li><a href=" #">menu2</a></li>
38                     <li><a href=" #">menu3</a></li>
39                     <li><a href=" #">menu4</a></li>
40                 </ul>
41             <![if IE 6]>
42            </td></tr></table>
43            </a>
44            <![endif]>
45            </li>
46            <li><a href=" #">Dreamweaver Menus</a></li>
47          </ul>
48          <![if IE 6]>
49          </td></tr></table>
50          </a>
51          <![endif]>
52       </li>
53       <li><a href=" #">FAQ<![if !IE 6]></a><![endif]>
54         <![if IE 6]>
55         <table class="faq"><tr><td>
56         <![endif]>
57          <ul>
58            <li><a href=" #">Drop Down CSS Menus</a></li>
59            <li><a href=" #">Horizontal CSS Menus</a></li>
60            <li><a href=" #">Vertical CSS Menus</a></li>
61            <li><a href=" #">Dreamweaver Menus</a></li>
62          </ul>
63          <![if IE 6]>
64          </td></tr></table>
65          </a>
66          <![endif]>
67       </li>
68       <li><a href=" #">Contact</a></li>
69     </ul>
70 </body>
71 </html>

b2.css

  1 body{ 
  2   margin:0;
  3   padding:0;
  4   border:0;
  5   font-family:arial,"\5b8b\4f53",Verdana,sans-serif;
  6   height:800px;
  7   }
  8   
  9 #nav{
 10   height:37px;
 11   background-color:#333333;
 12   margin:41px 5px;
 13 }
 14 #nav li {
 15   margin:0px;
 16   float:left;
 17   padding:0px;
 18   background:#333333 url("images/seperator.gif") bottom right no-repeat;
 19   text-align:center;
 20 }
 21 #nav li a{
 22   color:white;
 23   font-size:15px;
 24   display:block;
 25   text-decoration:none;
 26   padding:10px 24px;
 27 }
 28 #nav li ul{
 29   display:none;
 30 }
 31 #nav li a table{
 32   display:none;
 33 }
 34 .pro{
 35   left:92px;
 36 }
 37 .faq{
 38   left:199px;
 39 }
 40 
 41 #nav  li:hover ul{
 42   background-color:#333333;
 43   display:block;
 44   position:absolute;
 45 }
 46 
 47 #nav li a:hover table{
 48   position:absolute;
 49   top:78px;
 50   display:block;
 51 }
 52 #nav li a:hover table ul{
 53   display:block;
 54   position:relative;
 55 }
 56 
 57 #nav li:hover{
 58    background:#478baf url("images/hover.gif") bottom center no-repeat;  
 59 }
 60 #nav li a:hover{
 61    background:#478baf url("images/hover.gif") bottom center no-repeat; 
 62 }
 63 #nav li ul li{
 64   clear:both;
 65   text-decoration:none;
 66   width:225px;
 67   background:#333333 url("images/sub_sep.gif") bottom left no-repeat;
 68 }
 69 #nav li ul li a{
 70   font-size:12px;
 71   text-align:left;
 72 }
 73 #nav li ul li a:hover{
 74   background:#478baf url("images/hover_sub.gif") center left no-repeat;
 75 }
 76 #nav li a table{
 77   margin:0px;
 78   padding:0px;
 79   border:0px;
 80 }
 81 #nav li:hover ul li ul{
 82     display:none;
 83      width:220px;
 84     height:140px; 
 85 }
 86 #nav li a:hover ul li ul{
 87     display:none;
 88      width:220px;
 89     height:140px; 
 90 }
 91 .pro0{
 92     position:absolute;
 93     top:35px;
 94     left:225px;
 95 }
 96 .men0{
 97     position:absolute;
 98     top:70px;
 99     left:225px;
100 }
101 .product0{
102     position:absolute;
103     *top:35px;
104     *left:225px;
105 }
106 .menu0{
107     position:absolute;
108     *top:70px;
109     *left:225px;
110 }
112 #nav li:hover ul li:hover ul{
113     display:block;
114 }
115 #nav li a:hover table ul li a:hover  table ul{
116     display:block;
117 }
118 #nav li ul li ul li{
119     text-decoration:none;
120     width:225px;
121     background:#333333 url("images/sub_sep.gif") bottom left no-repeat;
122 }
123 #nav li ul li ul li a{
124     font-size:12px;
125     text-align:left;
126 }

 

c任务：

c.css

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4    <meta charset="utf-8" />
 5     <link rel="stylesheet" type="text/css" href="c.css" />
 6 </head>
 7 <body>
 8     <ul id="nav">
 9       <li><a href=" #">Home</a></li>
10       <li><a href=" #">Products</a>
11         <ul class="product0">
12             <li><a href=" #">product1</a></li>
13             <li><a href=" #">product2</a>
14                 <ul class="product2_0">
15                     <li><a href=" #">product2.1</a></li>
16                     <li><a href=" #">product2.2</a></li>
17                     <li><a href=" #">product2.3</a></li>
18                     <li><a href=" #">product2.4</a></li>
19                 </ul>
20             </li>
21             <li><a href=" #">product3</a>
22                 <ul class="product3_0">
23                     <li><a href=" #">product3.1</a></li>
24                     <li><a href=" #">product3.2</a></li>
25                     <li><a href=" #">product3.3</a></li>
26                     <li><a href=" #">product3.4</a></li>
27                 </ul>
28             </li>
29             <li><a href=" #">product4</a></li>
30         </ul>
31       </li>
32       <li><a href=" #">Services</a>
33         <ul class="service0">
34             <li><a href=" #">service1</a></li>
35             <li><a href=" #">service2</a></li>
36             <li><a href=" #">service3</a></li>
37             <li><a href=" #">service4</a></li>
38         </ul>
39       </li>
40       <li><a href=" #">Support</a></li>
41       <li><a href=" #">FAQ</a></li>
42     </ul>
43 </body>
44 </html>

b2.css

 1 body{ 
 2   margin:0;
 3   padding:0;
 4   border:0;
 5   font-family:arial,"\5b8b\4f53",Verdana,sans-serif;
 6   }
 7 #nav{
 8   width:190px;
 9   background-color:#333333;
10   margin:5px 5px;
11 }
12 #nav li {
13   margin:0px;
14   padding:0px;
15   background:#333333 url("images/seperator.gif") bottom right no-repeat;
16   text-align:center;
17   width:190px;
18   border:0px;
19 }
20 #nav li a{
21   color:#CCCCCC;
22   display:block;
23   text-decoration:none;
24   font-size:11px;
25   text-align:left;
26   padding:8px 15px;
27   border-bottom:1px solid #393939;
28   margin:0px;
29 }
30 #nav li:hover{
31    background:#478baf url("images/hover.gif") center left no-repeat;  
32 }
33 #nav li a:hover{
34    background:#478baf url("images/hover.gif") center left no-repeat; 
35 }
36 #nav li ul{
37     display:none;
38 }
39 #nav li:hover ul{
40     display:block;
41     position:absolute;
42     left:195px;
43 }
44 .product0{
45     top:36px;
46 }
47 .service0{
48     top:68px;
49 }
50 #nav li:hover ul{
51     *left:198px;
52 }
53 .product0{
54     *top:42px;
55 }
56 .service0{
57     *top:74px;
58 }
59 #nav li:hover ul li ul{
60     display:none;
61 }
62 #nav li:hover ul li:hover ul{
63     display:block;
64     position:absolute;
65     left:190px;
66 }
67 .product2_0{
68     top:36px;
69 }
70 .product3_0{
71     top:68px;
72 }
73 .product2_0{
74     *top:31px;
75 }
76 .product3_0{
77     *top:63px;
78 }
79 #nav li ul li{
80   *margin:-3px;
81 }

 

转载于:https://www.cnblogs.com/traces/archive/2012/05/26/2519521.html

weixin_30825581
关注
CSS-导航条练习
主营前端方向，技术栈是vue
11-14 204
导航条练习
京东左侧导航条练习笔记
Bai_mengxia的博客
03-07 168
盒子小结：1.京东左侧导航条练习
CSS导航条练习
一李
10-16 353
首先清楚清除浏览器吗，默认的格式 设置ul的格式 子元素到父元素 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0...
导航条练习HTML
丁七岁的博客
11-28 366
刚刚学习了HTML与CSS基础，于是写了一个网页上的导航条的练习，供大家参考与学习交流。. ** 一：HTML代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="../css/demo1...
尚硅谷-导航条练习
weixin_70320000的博客
12-19 110
尚硅谷老师的导航条练习，针对未做出来的内容梳理总结
2021/8/8 京东导航条练习
neversleepy的博客
08-09 88
冻结导航条使用
CSS基本基础---导航条练习
chen_zan_yu_的博客
05-28 313
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .nav{ li...
~56导航条练习
sanda_nd的博客
01-27 220
w3scool导航条练习
m0_62520946的博客
02-05 145
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>导航条练习</title> <link rel="stylesheet" href="reset.css"> <style type="text/css"> .nav{ width: 1175px; height: 48px; backgroun.
HTML课程导航作业,HTML&CSS基础_导航条练习
weixin_28745975的博客
06-07 629
2020.10.04主要内容：导航条练习/*清除默认样式*/*{margin: 0px;padding: 0px;}/*设置ul*/.nav{/*去除项目符号*/list-style: none;/*为ul设置一个背景颜色*/background-color: #6495ED;/*设置一个宽度*/width: 1000px;/*设置元素居中*/margin: 50px auto;/*解决高度塌陷*...
[84-86]_京东顶部导航条练习.zip
08-22
【前端技术解析——京东顶部导航条实践】 在前端开发领域，构建用户界面是核心任务之一，而顶部导航条作为网站布局的重要组成部分，它通常包含网站的主要功能入口、搜索框、用户登录状态等元素，为用户提供方便快捷...
京东导航条.zip csshtml练习
07-28
在“京东导航条”这个练习中，我们需要用CSS来实现以下几点： 1. **布局**：使用`display`属性（如`flex`或`grid`）来实现水平排列的导航项，确保它们在不同屏幕尺寸下都能正确对齐。 2. **颜色和背景**：通过设置`...
XHTML简介
qq_48501521的博客
09-11 979
XHTML 指的是可扩展超文本标记语言XHTML 与 HTML 4.01 几乎是相同的XHTML 是更严格更纯净的 HTML 版本XHTML 是以 XML 应用的方式定义的 HTMLXHTML 是 2001 年 1 月发布的 W3C 推荐标准XHTML 得到所有主流浏览器的支持。
一码空传临时网盘PHP源码，支持提取码功能
爱酷码的博客
09-11 392
一码空传临时网盘源码V2.0免费授权，该源码提供了一个简单易用的无数据库版临时网盘解决方案。前端采用了layui开发框架，后端使用原生PHP编写，没有引入任何开发框架，保持了代码的简洁和高效。这个程序使用了一个无数据库配置读写类，并借鉴了网络上的config文件读写代码。用户可以通过提取码来提取文件，无需上传文件到服务器。该程序还配备了一个后台管理系统，而且不需要数据库支持。用户上传的文件会保存在upload文件夹中，并按照md5算法进行加密和重命名，确保每次加密结果都不相同。
Redis 多线程模型详解
lssffy的博客
09-11 929
在 Redis 的早期版本中，Redis 采用了典型的单线程模型，即所有的客户端请求都是由 Redis 的主线程依次处理的。具体来说，Redis 使用单线程的事件循环模型来处理客户端的请求和响应，使用了操作系统的selectpoll或epoll来管理多个客户端连接。为什么 Redis 选择单线程？简单性：单线程模型不需要考虑线程间数据竞争问题，避免了锁机制带来的复杂性和潜在的性能开销。避免上下文切换：多线程环境下，线程的上下文切换会引入额外的 CPU 负担，而单线程架构没有这个问题。性能足够。
[极客大挑战 2019]Http
2201_75556700的博客
09-10 568
3、访问Secret.php发现页面有提示，它说它不是来自这个网页。6、添加X-Forwarded-For: 127.0.0.1。5、修改User-Agent为：Syclover。2、查看页面源码发现一个。
Netty笔记03-组件Channel
最新发布
weixin_46425661的博客
09-12 749
本文主要讲解Netty中的组件Channel、ChannelFuture和CloseFuture
Thinkphp5 + Swoole实现邮箱异步通知
Crazy_shark的博客
09-11 695
通过 Swoole 实现的异步任务处理机制，可以将耗时操作如发送邮件等操作放入后台异步执行，提升用户体验和系统性能。Swoole 的 Task 机制非常适合处理这种场景，结合 ThinkPHP 使得开发异步任务更加简单高效。
【网络安全】-rce漏洞-pikachu
weixin_65311462的博客
09-12 1052
由于应用程序在处理用户输入时未能正确验证、过滤或限制输入数据，导致hacker能通过网络在目标系统上执行任意代码或命令，从而完全控制受影响的系统。RCE漏洞是一种严重的安全漏洞类型，对系统安全构成重大威胁。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值