不足之处，请大家指教，第一次做;
夜的竖直导航栏
View Code
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">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>V_V夜的侧边导航</title>
6 <style type="text/css">
7 <!--
8 body {
9 font:20px Arial;
10 margin:0; padding:8px;/*Fire等默认margin:8px;padding:0; 而IE6,7默认margin:15px;padding:0;*/
11 }
12 ul.nav {
13 margin: 0; padding: 0;/*必须除去列表的边距*/
14 list-style-type: none; border: 1px solid #486B02; border-bottom: none;
15 width:8em; float:left;/*既然是侧边导航，当然得“定宽左漂浮”*/
16 background-color: #8BD400;/*导航栏背景色的声明位置也有猫腻，若是在a中声明，会有点儿小不爽，是关于background: ;与background-color: ;的问题*/
17 }
18 ul.nav li {
19 display: inline; /* For IE6 */
20 }
21 ul.nav a {
22 display: block;/*必须block才能良好地应用宽高边距，*/
23 text-decoration: none; color: #2B3F00; border-top: 1px solid #E4FFD3; border-bottom: 1px solid #486B02;/*下上边框过渡色*/
24 /*block无法使用vertical-align，那么如何在增大a的点击范围后，将文本垂直居中？*/
25 padding: 0.3em 1em; /*法一:(推荐)，法二：width:100px;height:30px;line-height:30px; （此法特别烂：代码多，宽高值难选择，可维护性与优美性奇烂）*/
26 }
27 /*ul .last a {border-bottom:0; }*/
28 ul.nav a:hover, ul.nav a:focus, ul.nav .selected a {color: #E4FFD3; background-color: #6DA203; }
29
30 /*~~~~~~~~~~~~~~~~~~~~还遗留了一个问题：IE6中链接的点击范围没有预想的大，只能点击文本生效；~~~~~~~~~~~~~~~~~~~~~~~~~~*/
31 div.test {clear:both; width:300px; }
32 div.test p a {display:block; background:orange; padding:2em; width:220px; }
33 /*~~找出原因了!这可能涉及到了IE6对width的解释与其它浏览器有差异；
34 因为其祖先元素（此处的div或者p都可以）指定了width: 而作为子(孙)元素的a 未指定，所以才有了IE6中的那种情况，
35 因此：解决方案是：若a的祖先元素之一指定了width，则a必须也跟进指定宽度，那这个宽度是多少才妥当呢？又得计算了；唉，，，
36 ~~*/
37 -->
38 </style>
39 </head>
40
41 <body>
42
43 <ul class="nav">
44 <li class="selected"><a href="home.htm">Home</a></li>
45 <li><a href="about.htm">About</a></li>
46 <li><a href="services.htm">Our Services</a></li>
47 <li><a href="work.htm">Our Work</a></li>
48 <li><a href="news.htm">News</a></li>
49 <li class="last"><a href="contact.htm">Contact</a></li>
50 </ul>
51
52 <div class="test">
53 <p><a href="#">luna</a></p>
54 </div>
55
56 </body>
57 </html>
夜的水平导航栏
View Code
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" lang="en" xml:lang="en">
3 <head>
4 <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
5 <title>v_v夜的水平导航栏</title>
6 <style type="text/css">
7 <!--
8 /*~~~~~~~~~~~~~~~~~由垂直导航栏推理，有以下两种方式变化为水平栏~~~~~~~~~~~~~~~~~~*/
9 /*~~
10 1. li-->display:inline;float:left; a-->display:block;
11 2. li-->display:inline; a-->display:block;float:left;
12 以上两种方式的共同点为：首先，a必须block（必须的），然后li必须inline（这是源自于垂直导航栏里面有的，为什么要inline？仅仅为了针对IE6,7）
13 那么：在此针对这种情况，其实可以用第三种方式！只需将li 浮动了，就不需要再将它 inline 了；
14 3. li-->float:left; a-->display:block;
15 ~~*/
16 body {padding:0; }
17 ul {margin:0; padding:0; list-style-type:none; }
18 ul li {list-style-type:none; float:left; }/*For IE6,7*/
19 ul li a {text-decoration:none; line-height:30px; text-align:center; display:block;
20 /*因为block，所以能对元素应用宽高补白属性，但随之也导致了无法应用vetical-align,所以采用将line-height与height相等的方法；
21 但我觉得指定a高度与行高不是一个好方法，不够智能；
22 还是用padding:更好，这样不用担心height取值偏小，然后，他们即使用padding 也还是指定了line-height;
23 而我在实际中发现：若是用padding,此处好像不必要另外指定line-height;*/
24 width:120px; height:30px; border-right:1px solid white;
25 background-color:pink;/*若是想在此对其添加背景图片，那么可得注意书写方式与顺序了；*/
26 }
27 ul li a:hover {background-color:silver; }
28 /*~~~~~~~
29 注：关于背景色的声明位置,通常他人是将其声明与ul中，然后这会因为li的浮动导致ul实际上不占据空间，而隐藏了该背景；
30 针对解决方案：1.对ul清除浮动；2.将ul也浮动；3.对ul overflow:hidden;
31 因为我暂时还没有遇到非得将背景色声明与ul 中的理由，所以为免麻烦，我干脆将其声明与a 中；不知道有何不妥；
32 ~~~~~~~*/
33 -->
34 </style>
35 </head>
36
37 <body>
38 <ul class="nav">
39 <li class="selected"><a href="home.htm">Home</a></li>
40 <li><a href="about.htm">About</a></li>
41 <li><a href="services.htm">Our Services</a></li>
42 <li><a href="work.htm">Our Work</a></li>
43 <li><a href="news.htm">News</a></li>
44 <li class="last"><a href="contact.htm">Contact</a></li>
45 </ul>
46 </body>
47 </html>
浙公网安备 33010602011771号