DIVCSS圖形菜單之仿DreamWeaver_DIV+CSS實(shí)例
教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!
這是為了實(shí)現(xiàn)一個(gè)效果，而提前作的測(cè)試代碼！看起來(lái)很簡(jiǎn)單的一個(gè)東西，到這會(huì)，大約四個(gè)小時(shí)過去了。不知道是IE6的BUG；還是我自已的BUG！有人問，你的CSS里邊寫的太麻煩了，呵呵， 你可以用簡(jiǎn)單的方法試一試；IE6，7，F(xiàn)IREFOX都走一次就知道了。
HTML代碼：
加了hidefocus，是為了去掉點(diǎn)擊鏈接時(shí)的虛線。
CSS代碼：
看最終的運(yùn)行效果：
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
說實(shí)話，直到寫到這里，直到我再次修改這篇文章的時(shí)候，這個(gè)BUG我才終于處理完。但正常使用是不會(huì)有問題的！
本文作者：zishu
HTML代碼：
示例代碼 [www.zhaotila.cn]
<div id="info">
<ul>
<li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/1.gif" alt="A" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/2.gif" alt="B" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/3.gif" alt="C" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/4.gif" alt="D" align="absmiddle" /></a></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" /></a></li>
<li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/6.gif" alt="F" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/7.gif" alt="G" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/8.gif" alt="H" align="absmiddle" /></a></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" /></a></li>
<li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/10.gif" alt="J" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/11.gif" alt="K" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/12.gif" alt="L" align="absmiddle" /></a></li>
</ul>
</div>
<ul>
<li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/1.gif" alt="A" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/2.gif" alt="B" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/3.gif" alt="C" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/4.gif" alt="D" align="absmiddle" /></a></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" /></a></li>
<li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/6.gif" alt="F" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/7.gif" alt="G" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/8.gif" alt="H" align="absmiddle" /></a></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" /></a></li>
<li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/10.gif" alt="J" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/11.gif" alt="K" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="http://p1.mb5u.com/divcss/12.gif" alt="L" align="absmiddle" /></a></li>
</ul>
</div>
加了hidefocus，是為了去掉點(diǎn)擊鏈接時(shí)的虛線。
示例代碼 [www.zhaotila.cn]
hidefocus="true"
CSS代碼：
示例代碼 [www.zhaotila.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;}
#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)試框 [www.zhaotila.cn]
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
說實(shí)話，直到寫到這里，直到我再次修改這篇文章的時(shí)候，這個(gè)BUG我才終于處理完。但正常使用是不會(huì)有問題的！
本文作者：zishu
相關(guān)DIV+CSS實(shí)例：
- 固定div容器的寬高，圖片居中（圖片不限制大小）
- 用css制作有滾動(dòng)條的居中彈出框
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- 10個(gè)很酷的涂鴉風(fēng)格國(guó)外網(wǎng)店設(shè)計(jì)展示
- jquery模擬瀏覽器滾動(dòng)條效果
- 仿谷歌google的搜索框下拉提示列表效果
- JS顯示網(wǎng)頁(yè)最后更新時(shí)間
- CSS技巧：text-indent隱藏文字(以圖換字)
- CSS實(shí)例：三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS布局實(shí)例：很實(shí)用的圖文混排CSS列表-富有語(yǔ)義
- DivCSS實(shí)例：CSS菜單Flash效果用圖片模擬實(shí)現(xiàn)
- DivCSS布局實(shí)例用dldtdd來(lái)制作列表
DIV+CSS實(shí)例Rss訂閱Div+Css教程搜索
DIV+CSS實(shí)例推薦
- jquery模擬瀏覽器滾動(dòng)條效果
- 用背景圖片實(shí)現(xiàn)CSS柱狀圖表一例
- DivCSS布局實(shí)例：三行單列上下固定高度中間自適應(yīng)
- CSS布局實(shí)例：隱藏input文字
- CSS實(shí)例教程：用列表ul制作CSS橫向菜單的基礎(chǔ)知識(shí)
- Web標(biāo)準(zhǔn)實(shí)戰(zhàn)CSS網(wǎng)頁(yè)布局豆瓣首頁(yè)
- 用css制作有滾動(dòng)條的居中彈出框
- CSS背景圖片background-image須注意路徑問題！
- DivCSS布局實(shí)例：詳解建立Flash上面浮動(dòng)層
- 實(shí)現(xiàn)三列布局相同高度的解決辦法
猜你也喜歡看這些
- WEB2.0標(biāo)準(zhǔn)教程：如何應(yīng)用WEB標(biāo)準(zhǔn)改善現(xiàn)有網(wǎng)站？
- DIVCSS實(shí)例教程：利用一張背景圖片實(shí)現(xiàn)的簡(jiǎn)單CSS導(dǎo)航菜單
- 簡(jiǎn)繁體轉(zhuǎn)換功能 支持cookie記憶狀態(tài)
- 左中右3欄布局中最先顯示中欄內(nèi)容的方法
- 如何讓IE ff Opera同時(shí)支持Alpha透明？
- CSS選擇符詳解
- block(塊元素)、inline(內(nèi)聯(lián)元素)的差別是什么？
- XHTMLCSS網(wǎng)頁(yè)布局中ID與class的理解應(yīng)用
- @import和link href兩種css調(diào)用方法有什么區(qū)別？
- CSS的margin邊界疊加深度剖析
- 相關(guān)鏈接：
- 教程說明：
DIV+CSS實(shí)例-DIVCSS圖形菜單之仿DreamWeaver
。