列表与导航栏实例
【步骤1】无样式
一、效果
二、HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>列表与导航栏</title></head><body> <ul> <li><a href="#">home</a></li> <li><a href="#">about us</a></li> <li><a href="#">products</a></li> <li><a href="#">services</a></li> <li><a href="#">contact</a></li> </ul></body></html>
【步骤2】基本样式
一、效果
二、HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>列表与导航栏</title> <link href="css/navigation.css" rel="stylesheet" type="text/css" /></head><body> <ul> <li><a href="#">home</a></li> <li><a href="#">about us</a></li> <li><a href="#">products</a></li> <li><a href="#">services</a></li> <li><a href="#">contact</a></li> </ul></body></html>
三、CSS
*{ margin:0; padding:0; }body{ font:11px Verdana, Geneva, sans-serif; background:#666; }ul{ list-style:none; }
【步骤3】横向导航条
一、效果
二、HTML
<ul id="nav"> <li><a href="#">home</a></li> <li><a href="#">about us</a></li> <li><a href="#">products</a></li> <li><a href="#">services</a></li> <li><a href="#">contact</a></li></ul>
三、CSS
#nav{ background:url(../images/nav-bg.png) repeat-x; height:1%; overflow:hidden; margin-top:50px; text-transform:capitalize; }#nav li{ float:left; background:url(../images/line.gif) no-repeat center right; padding-right:1px; }#nav li a{ display:block; padding:0 20px; text-decoration:none; color:black; height:30px; line-height:30px; float:left;}#nav li a:hover{ background:url(../images/nav-bg.png) repeat-x left bottom; color:white; }
【附图】
line.gif
nav-bg.png
