读书笔记--精通CSS高级Web标准解决方案（六）---无序列表样式
这部分讲解在web2.0中用得最多的ul已经li元素的CSS应用技巧。
1、基本列表样式
现在很少人直接用ul的内置样式，所以一般在使用ul的第一步就是去掉默认的ul样式，去左边的图标，去缩进：
ul{ margin:0; padding:0; list-style-type:none; }
2、创建基本的导航条
这个没什么好说的，比较简单，就是书上提到的一个小细节，如果把顶边框设置的比背景色浅，而让底边框深一点，就会实现一种斜面的立体效果。
实现代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Simple List</title> <style type="text/css"> <!-- body { font-family: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif; font-size: 1.4em; } ul.nav { margin: 0; padding: 0; width: 8em; list-style-type: none; float: left; background-color: #8BD400; border: 1px solid #486B02; border-bottom: none; } ul.nav li { display: inline: /* :KLUDGE: Removes large gaps in IE/Win */ } ul.nav a { display: block; color: #2B3F00; text-decoration: none; border-top: 1px solid #E4FFD3; border-bottom: 1px solid #486B02; background: url(img/arrow.gif) no-repeat 5% 50%; padding: 0.3em 1em; } /*ul .last a { border-bottom: 0; }*/ ul.nav a:hover, ul.nav a:focus, ul.nav .selected a { color: #E4FFD3; background-color: #6DA203; } --> </style> </head> <body> <ul class="nav"> <li class="selected"><a href="home.htm">Home</a></li> <li><a href="about.htm">About</a></li> <li><a href="services.htm">Our Services</a></li> <li><a href="work.htm">Our Work</a></li> <li><a href="news.htm">News</a></li> <li class="last"><a href="contact.htm">Contact</a></li> </ul> </body> </html>
3、在导航条中突出显示当前页面
书中的思路是导航条中每个导航按钮的class在各个页面中保持不变，但导航栏所在的页面是动态变化的，其body的id也是各不相同的，这样根据导航栏的body的id与导航栏按钮的class的匹配来决定导航栏按钮的样式。
#home .nav .home a,
#about .nav .about a{
/** 即在home页面的home导航栏按钮突出显示*/
}
4、简单的标签页式导航
标签页式导航的标签页一般是圆角的，所有其实现思路也和前面的圆角框类似，一般一个导航按钮时一个li元素嵌一个a元素，给li和a分别加不同背景图片，并且让右边的a的背景图盖在左边的li的背景图。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Simplified Sliding Doors</title> <style type="text/css"> <!-- /* Basic Styling ------------------------------------*/ body { font: 76%/1.8 "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; background-color: #fff; } /* mainNav ------------------------------------*/ ul { margin: 0; padding: 0; overflow: hidden; width: 72em; list-style: none; text-transform: uppercase; } ul li { float: left; background: url(img/tab-right.gif) no-repeat top right; } /* Hack to make IE/Mac play nice */ li a { padding: 0 2em; line-height: 2.5em; background: url(img/tab-left.gif) no-repeat top left; text-decoration: none; color: #fff; float: left; display: block; } ul a:hover { color: #333; } --> </style> </head> <body> <ul id="mainNav"> <li class="first"><a href="#">Home</a></li> <li><a href="about.htm">About</a></li> <li><a href="news.htm">News</a></li> <li><a href="products.htm">Products</a></li> <li><a href="services.htm">Services</a></li> <li><a href="clients.htm">Clients</a></li> <li><a href="casestudies.htm">Case Studies</a></li> </ul> </body> </html>
5、纯CSS下拉菜单
下拉菜单是目前用的最多的页面元素之一了，采用纯CSS也可以实现下拉菜单。其实现思路也是不复杂的：
两层ul，外层ul作为整个菜单，里层的ul放在li里面，作为下拉菜单
外层的ul以及其子元素进行浮动，已到达横向排列的效果
通过绝对定位将所有的下拉菜单移到屏幕外边
设置鼠标正在其上面的li的后代ul的不再偏移，从而显示下拉菜单（一般很难想到这种选择器）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Horizontal Nav</title> <style type="text/css"> <!-- body { font-family: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif; font-size: 1.4em; margin-top: 4em; } ul.nav, ul.nav ul { margin: 0; padding: 0; list-style-type: none; float: left; border: 1px solid #486B02; background-color: #8BD400; } ul.nav li { float: left; width: 8em; } ul.nav li ul { position: absolute; width: 8em; left: -999em; margin-left: -1px; }
/** 个人觉得这种选择方式较为出彩*/ .nav li:hover ul { left: auto; } ul.nav a { display: block; color: #2B3F00; text-decoration: none; padding: 0.3em 1em; border-right: 1px solid #486B02; border-left: 1px solid #E4FFD3;*/ } ul.nav li li a { border-top: 1px solid #E4FFD3; border-bottom: 1px solid #486B02; border-left: 0; border-right: 0; } ul.nav li:last-child a { border-right: 0; border-bottom: 0; } ul a:hover, ul a:focus { color: #E4FFD3; background-color: #6DA203; } --> </style> </head> <body> <ul class="nav"> <li><a href="/home/">Home</a></li> <li><a href="/products/">Products</a> <ul> <li><a href="/products/silverback/">Silverback</a></li> <li><a href="/products/fontdeck/">Font Deck</a></li> </ul> </li> <li><a href="/services/">Services</a> <ul> <li><a href="/services/design/">Design</a></li> <li><a href="/services/development/">Development</a></li> <li><a href="/services/consultancy/">Consultancy</a></li> </ul> </li> <li><a href="/contact/">Contact Us</a></li> </ul> </body> </html>
6、CSS图像映射
这部分内容不多描述，其实就是先定义一个ul及一系列的li，然后通过绝对定位，定位每个li的位置，从中我们可以知道，相同的html元素ul以及li，经过不同的CSS处理，可以以差异很大很大的形式展现在前台页面上，这也是CSS的魅力所在。
总结：
在这一节里面，发现很多之前感觉比较复杂的页面形式，都可以用很简单的方式给实现，个人觉得这就比爱因斯坦的质能公式一样，复杂的表象背后，往往都有一个简单的解。
