提示:您可以先修改部分代碼再運行
DIV+css導航代碼<!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=gb2312" /><title>DIV+css導航</title><style type="text/css"><!--ul, li { margin:0; padding:0; }.nav { background: url(yun_qi_img/01.gif) no-repeat; height: 33px; width: 585px; line-height: 31px; padding-left: 15px; }.nav ul { list-style: none; }.nav ul li { display: block; float: left; margin-left: 7px; }.nav ul li a { font: 13px/29px "微軟雅黑", Verdana, Geneva, sans-serif; color: #000; text-decoration: none; display: block; height: 28px; width: 84px; text-align: center; padding-top: 1px; }.nav ul li a:hover { font: 13px/29px "微軟雅黑", Verdana, Geneva, sans-serif; text-decoration: none; background: url(yun_qi_img/hover_1.gif) no-repeat; text-align: center; display: block; height: 28px; width: 84px; line-height: 29px; padding-top: 1px; }.hover_1 { font-size: 13px; text-decoration: none; background: url(yun_qi_img/hover_1.gif) no-repeat; text-align: center; display: block; height: 27px; width: 84px; line-height: 29px; padding-top: 2px; }/**/.nav_1 { background: url(yun_qi_img/02.gif) no-repeat; height: 33px; width: 585px; line-height: 31px; padding-left: 15px; }.nav_1 ul { list-style: none; }.nav_1 ul li { display: block; float: left; margin-left: 7px; }.nav_1 ul li a { font: 13px/29px "微軟雅黑", Verdana, Geneva, sans-serif; color: #000; text-decoration: none; display: block; height: 28px; width: 84px; text-align: center; padding-top: 1px; }.nav_1 ul li a:hover { font: 13px/29px "微軟雅黑", Verdana, Geneva, sans-serif; text-decoration: none; background: url(yun_qi_img/hover_2.gif) no-repeat; text-align: center; display: block; height: 28px; width: 84px; line-height: 29px; padding-top: 1px; }.hover_2 { font-size: 13px; text-decoration: none; background: url(yun_qi_img/hover_2.gif) no-repeat; text-align: center; display: block; height: 27px; width: 84px; line-height: 29px; padding-top: 2px; }--></style></head><body>莫名苑<br /><br /><div class="nav"> <ul> <li>莫名苑</li> <li>散文欣賞</li> <li>愛情小憩</li> <li>心靈雞湯</li> <li>生活貼士</li> <li>竊竊私語</li> </ul></div><br />莫名苑<br /><br /><div class="nav_1"> <ul> <li>莫名苑</li> <li>散文欣賞</li> <li>愛情小憩</li> <li>心靈雞湯</li> <li>生活貼士</li> <li>竊竊私語</li> </ul></div></body></html>
提示:您可以先修改部分代碼再運行