Div+Css教程模板無憂>建站教程>Div+Css教程>DIV+CSS實(shí)例>

DIVCSS圖形菜單之仿DreamWeaver_DIV+CSS實(shí)例

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　這是為了實(shí)現(xiàn)一個(gè)效果，而提前作的測試代碼！看起來很簡單的一個(gè)東西，到這會，大約四個(gè)小時(shí)過去了。不知道是IE6的BUG；還是我自已的BUG！有人問，你的CSS里邊寫的太麻煩了，呵呵，你可以用簡單的方法試一試；IE6，7，F(xiàn)IREFOX都走一次就知道了。

HTML代碼：

示例代碼 [m.dounai2.com]

加了hidefocus，是為了去掉點(diǎn)擊鏈接時(shí)的虛線。

示例代碼 [m.dounai2.com]

hidefocus="true"

CSS代碼：

示例代碼 [m.dounai2.com]

*{ margin:0; padding:0; list-style:none; border:none; line-height:1.8;}

#info{ background:#5F768B; padding:10px;}
#info ul{background:url(http://www.zishu.cn/attachments/month_0706/images/bg.gif) repeat-x left top; padding:2px 10px;height:31px;}
#info li{float:left;padding:2px;}

a:link,a:visited{ background:none;float:left;display:block; padding:4px;}
a:hover{background:url(http://www.zishu.cn/attachments/month_0706/images/on.gif) no-repeat left top; float:left; display:block;}
a:active{background:url(http://www.zishu.cn/attachments/month_0706/images/on2.gif) no-repeat left top; float:left; display:block;}

看最終的運(yùn)行效果：

代碼調(diào)試框 [m.dounai2.com]

<!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>test</title>
<style>
/*www.zishu.cn*/
*{ margin:0; padding:0; list-style:none; border:none; line-height:1.8;}

#info{ background:#5F768B; padding:10px;}
#info ul{background:url(http://www.zishu.cn/attachments/month_0706/images/bg.gif) repeat-x left top; padding:2px 10px;height:31px;}
#info li{float:left;padding:2px;}

a:link,a:visited{ background:none;float:left;display:block; padding:4px;}
a:hover{background:url(http://www.zishu.cn/attachments/month_0706/images/on.gif) no-repeat left top; float:left; display:block;}
a:active{background:url(http://www.zishu.cn/attachments/month_0706/images/on2.gif) no-repeat left top; float:left; display:block;}
</style>
</head>
<body>
<div   class="hlr5ztn"   id="info">
  <ul>
    <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/1.gif" alt="A" align="absmiddle" /></li>
    <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/2.gif" alt="B" align="absmiddle" /></li>
    <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/3.gif" alt="C" align="absmiddle" /></li>
    <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/4.gif" alt="D" align="absmiddle" /></li>
    <li><img src="http://p1.mb5u.com/divcss/m.gif" alt="M" align="absmiddle" /></li>
    <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/5.gif" alt="E" align="absmiddle" /></li>
    <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/6.gif" alt="F" align="absmiddle" /></li>
    <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/7.gif" alt="G" align="absmiddle" /></li>
    <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/8.gif" alt="H" align="absmiddle" /></li>
    <li><img src="http://p1.mb5u.com/divcss/m.gif" alt="M" align="absmiddle" /></li>
    <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/9.gif" alt="I" align="absmiddle" /></li>
    <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/10.gif" alt="J" align="absmiddle" /></li>
    <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/11.gif" alt="K" align="absmiddle" /></li>
    <li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/12.gif" alt="L" align="absmiddle" /></li>
  </ul>
</div>
<p style="clear:both"></p>
子鼠2007年06月13日晚
</body>
</html>

[ 可先修改部分代碼再運(yùn)行查看效果 ]

　　說實(shí)話，直到寫到這里，直到我再次修改這篇文章的時(shí)候，這個(gè)BUG我才終于處理完。但正常使用是不會有問題的！
　　本文作者：zishu