1. 第六讲 列表样式及导航条

2. 基本列表样式 Read emails Write chapter Go shopping Cook dinner Watch Lost

3. 相应的 CSS ul { margin: 0; padding: 0; list-style-type: none; } li { background: url(/img/bullet.gif) no-repeat 0 50%; padding-left: 30px; }

4. 结果

5. 垂直导航条 Home About Our Services Our Work News Contact

6. ul.nav { margin: 0; padding: 0; width: 8em; list-style-type: none; float: left; background-color: #8BD400; border: 1px solid #486B02; border-bottom: none; }

7. 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; }

8. ul.last a { border-bottom: 0; } ul.nav a:hover, ul.nav a:focus, ul.nav.selected a { color: #E4FFD3; background-color: #6DA203; }

9. 图形化水平导航条 HTML 代码 Home About News Products Services Clients Case Studies

10. ul 初始设置 ul.nav { margin: 0; padding: 0; overflow: hidden; width: 72em; background: #FAA819 url(img/mainNavBg.gif) repeat-x; list-style: none; text-transform: uppercase; }

11. 列表项左浮动 ul.nav li { float: left; white-space: nowrap; }

12. 链接设置 ul.nav a { padding: 0 2.96em; line-height: 2.1em; background: url(img/divider.gif) repeat-y left top; text-decoration: none; color: #fff; float: left; display: block; }

13. 去掉第一个列表项的分隔线 ul.nav a:hover, ul.nav a:focus { color: #333; } ul.nav li:first-child a { background: none; }

14. 本讲结束 （注：本讲素材来自教材《精通 CSS· 高级 Web 标准解决方案》）