css实战之怪异导航制作
如图：
类似这种菱形的不规则导航一般有三种制作方法：
第一种：将LINK和HOVER 两种状态的图片 合成一个CSS Sprite,通过定位，制作出相应的效果；
第二种：是将LINK和HOVER 两种状态的图片分别制作成CSS Sprite，然后分别定位；
第三种：就是用绝对定位；
以上三种方式，都必须要用图片，那么，如何不用图片就可以做出效果呢？
答案是：用CSS 和 XHTML画出来;
这样做的好处就是，优化前端性能！ google的工程师们就是这样做的。
上面的图是在VS里的效果：
这种梯形 
结构，使用 <b><b/> 一个一个搭起来。 下面是代码结构：
View Code
1 <li><a href="#nogo1"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>母婴</em><span></span></a></li>
而 右侧的三角是用 <span></span>模拟的,下面是效果图：
这是代码结构和CSS 样式：
1 <span></span>
2
3 span {height:0; border-top:25px solid #ef8010; border-right:25px solid #fff;}
技巧是，只给其中两侧的border ， 不给高。
好了，下面是完整代码：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>Untitled Document</title>
6 <style type="text/css">
7 /* for this demo only */
8 #slant {border-top:25px solid #fff; border-bottom:125px solid #fff;}
9
10 /* the stylesheet */
11 #slant {padding:0; margin:0; list-style:none;}
12 #slant li {float:left; text-align:center; margin-right:-20px;}
13 #slant a {display:block; text-decoration:none;}
14 #slant a em {font-style:normal; display:block; padding:0 15px; height:25px; background:#ef8010; float:left; cursor:pointer; color:#f8eab1; line-height:24px;}
15
16 #slant a b, a span {cursor:pointer; display:block; width:0; overflow:hidden; float:left; background:#ef8010;}
17
18 #slant a span {height:0; border-top:25px solid #ef8010; border-right:25px solid #fff;}
19 span {height:0; border-top:25px solid #ef8010; border-right:25px solid #fff;}
20
21 #slant a b.p1,
22 #slant a b.p2,
23 #slant a b.p3,
24 #slant a b.p4,
25 #slant a b.p5 {border-top:5px solid #fff; border-right:5px solid #ef8010;}
26
27 #slant a b.p1 {height:0; margin-top:20px;}
28 #slant a b.p2 {height:5px; margin-top:15px;}
29 #slant a b.p3 {height:10px; margin-top:10px;}
30 #slant a b.p4 {height:15px; margin-top:5px;}
31 #slant a b.p5 {height:20px;}
32
33 #slant a b.p6,
34 #slant a b.p7,
35 #slant a b.p8,
36 #slant a b.p9,
37 #slant a b.p10 {border-bottom:5px solid #fff; border-left:5px solid #ef8010;}
38
39 #slant a b.p6 {height:20px;}
40 #slant a b.p7 {height:15px;}
41 #slant a b.p8 {height:10px;}
42 #slant a b.p9 {height:5px;}
43 #slant a b.p10 {height:0;}
44
45 #slant a:hover {background:#ef8010;}
46
47 #slant a:hover em {color:#030; background:#ef8010;}
48
49 #slant a:hover b.p1,
50 #slant a:hover b.p2,
51 #slant a:hover b.p3,
52 #slant a:hover b.p4,
53 #slant a:hover b.p5 {border-right-color:#ef8010; background: #ef8010;}
54
55 #slant a:hover b.p6,
56 #slant a:hover b.p7,
57 #slant a:hover b.p8,
58 #slant a:hover b.p9,
59 #slant a:hover b.p10 {border-left-color:#ef8010; background: #ef8010;}
60
61 #slant a:hover span {border-top-color:#ef8010;}
62
63
64 </style>
65 </head>
66 <body>
67 <script type="text/javascript">
68 function bluring(){
69 if(event.srcElement.tagName=="a" || event.srcElement.tagName == "img"){
70 document.body.focus();
71 };
72
73 }
74 document.onfocus=bluring;
75 </script>
76 <ul id="slant">
77
78 <li><a href="#nogo1"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>母婴</em><span></span></a></li>
79
80 <li><a href="#nogo2"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>儿童</em><span></span></a></li>
81
82 <li><a href="#nogo2"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>少年</em><span></span></a></li>
83
84 <li><a href="#nogo2"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>Four</em><span></span></a></li>
85
86 <li><a href="#nogo2"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>.. and Five</em><span></span></a></li>
87
88 <li><a href="#nogo2"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>6</em><b class="p6"></b><b class="p7"></b><b class="p8"></b><b class="p9"></b><b class="p10"></b></a></li>
89
90 </ul
91
92 <span></span>
93 </body>
94 </html>
