列表样式及导航条.PPT

第六讲 列表样式及导航条 基本列表样式 ul liRead emails/li liWrite chapter/li liGo shopping/li liCook dinner/li liWatch Lost/li /ul 相应的CSS ul { margin: 0; padding: 0; list-style-type: none; } li { background: url(/img/bullet.gif) no-repeat 0 50%; padding-left: 30px; } 结果 垂直导航条 ul class=nav lia href=home.htmHome/a/li lia href=about.htmAbout/a/li lia href=services.htmOur Services/a/li lia href=work.htmOur Work/a/li lia href=news.htmNews/a/li lia href=contact.htmContact/a/li /ul 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代码 ul class=nav lia href=home.htmHome/a/li lia href=about.htmAbout/a/li lia href=news.htmNews/a/li lia href=products.htmProducts/a/li lia href=services.htmServices/a/li lia href=clients.htmClients/a/li lia href=case-studies.htmCase Studies/a/li /ul 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: 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; } 去掉第一个列表项的分隔线 ul.nav a:hover , ul.nav a:focus { color: #333; } ul.nav li:first-child a { background: none; } 本讲结束 （注：本讲素材来自教材《精通CSS·高级Web标准解决方案》） * * * * * * * * * * * * * * * * * * * * * * * * * * * *