第六讲 列表样式及导航条

基本列表样式 Read s Write chapter Go shopping Cook dinner Watch Lost

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

结果

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

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

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

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

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

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

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

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