DIV+CSS實(shí)現(xiàn)仿DreamWeaver界面圖形菜單效果代碼
發(fā)布時(shí)間：2015-09-14 15:14:53 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要為大家介紹了DIV+CSS實(shí)現(xiàn)仿DreamWeaver界面圖形菜單效果代碼,可實(shí)現(xiàn)類(lèi)似DreamWeaver頁(yè)面效果的菜單欄,頁(yè)面美觀大方,需要的朋友可以參考下
本文實(shí)例講述了DIV+CSS實(shí)現(xiàn)仿DreamWeaver界面圖形菜單效果代碼。分享給大家供大家參考。具體如下：
這是一款DIV+CSS實(shí)現(xiàn)的圖形菜單仿DreamWeaver效果，做了兼容性處理，火狐和IE都無(wú)Bug了。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/div-css-f-dreamweaver-pic-menu-codes/
具體代碼如下：
復(fù)制代碼
代碼如下:<!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>DIV CSS之仿DreamWeaver圖形菜單</title>
<style>
*{ margin:0; padding:0; list-style:none; border:none; line-height:1.8;}
#info{ background:#5F768B; padding:10px;}
#info ul{background:url(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(images/on.gif) no-repeat left top; float:left; display:block;}
a:active{background:url(images/on2.gif) no-repeat left top; float:left; display:block;}
</style>
</head>
<body>
<div id="info">
<ul>
<li><a href="#" hidefocus="true"><img src="images/1.gif" alt="A" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="images/2.gif" alt="B" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="images/3.gif" alt="C" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="images/4.gif" alt="D" align="absmiddle" /></a></li>
<li><img src="images/m.gif" alt="M" align="absmiddle" /></li>
<li><a href="#" hidefocus="true"><img src="images/5.gif" alt="E" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="images/6.gif" alt="F" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="images/7.gif" alt="G" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="images/8.gif" alt="H" align="absmiddle" /></a></li>
<li><img src="images/m.gif" alt="M" align="absmiddle" /></li>
<li><a href="#" hidefocus="true"><img src="images/9.gif" alt="I" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="images/10.gif" alt="J" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="images/11.gif" alt="K" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="images/12.gif" alt="L" align="absmiddle" /></a></li>
</ul>
</div>
<p style="clear:both"></p>
</body>
</html>
"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>DIV CSS之仿DreamWeaver圖形菜單</title>
<style>
*{ margin:0; padding:0; list-style:none; border:none; line-height:1.8;}
#info{ background:#5F768B; padding:10px;}
#info ul{background:url(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(images/on.gif) no-repeat left top; float:left; display:block;}
a:active{background:url(images/on2.gif) no-repeat left top; float:left; display:block;}
</style>
</head>
<body>
<div id="info">
<ul>
<li><a href="#" hidefocus="true"><img src="images/1.gif" alt="A" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="images/2.gif" alt="B" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="images/3.gif" alt="C" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="images/4.gif" alt="D" align="absmiddle" /></a></li>
<li><img src="images/m.gif" alt="M" align="absmiddle" /></li>
<li><a href="#" hidefocus="true"><img src="images/5.gif" alt="E" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="images/6.gif" alt="F" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="images/7.gif" alt="G" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="images/8.gif" alt="H" align="absmiddle" /></a></li>
<li><img src="images/m.gif" alt="M" align="absmiddle" /></li>
<li><a href="#" hidefocus="true"><img src="images/9.gif" alt="I" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="images/10.gif" alt="J" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="images/11.gif" alt="K" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="images/12.gif" alt="L" align="absmiddle" /></a></li>
</ul>
</div>
<p style="clear:both"></p>
</body>
</html>
希望本文所述對(duì)大家的div+css程序設(shè)計(jì)有所幫助。
相關(guān)文章
Dreamweaver如何創(chuàng)建自己的站點(diǎn)并管理刪除呢?
Dreamweaver提供了對(duì)站點(diǎn)的創(chuàng)建及管理功能，通過(guò)以樹(shù)型結(jié)構(gòu)來(lái)展示網(wǎng)站的內(nèi)容分布，從而實(shí)現(xiàn)了對(duì)站點(diǎn)布局及細(xì)節(jié)內(nèi)容的展示及修改，這項(xiàng)功能對(duì)于各位網(wǎng)頁(yè)設(shè)計(jì)者而言更有用，2016-02-17Dreamweaver如何建立超鏈接?DW建立超鏈接方法介紹
超鏈接大家都知道吧，就是你點(diǎn)到的話會(huì)直接彈出另一個(gè)鏈接的頁(yè)面。這是很有用的推廣手段之一。那么Dreamweaver如何建立超鏈接?下面小編就為大家介紹DW建立超鏈接方法，來(lái)看2016-02-17- 今天為大家分享Dreamweaver新建文檔和打開(kāi)文檔圖文教程，教程比較基礎(chǔ)，主要針對(duì)新手來(lái)學(xué)習(xí)，推薦到腳本之家，喜歡的朋友快快來(lái)學(xué)習(xí)吧2016-02-12
Dreamweaver8怎么制作個(gè)人風(fēng)格的界面和欄?
Dreamweaver8怎么制作個(gè)人風(fēng)格的界面和欄？自己的電腦可以給dw界面設(shè)置成個(gè)人風(fēng)格的，這樣能快速調(diào)用自己的一些習(xí)慣，提高資源利用，該怎么設(shè)置呢？下面分析哪個(gè)詳細(xì)的教程2016-01-31- 我們用Dreamweaver制作網(wǎng)頁(yè)的時(shí)候,都用F12來(lái)看一下制作后的效果，那么Dreamweaver在哪里添加瀏覽器?如何添加瀏覽器?下面小編就為大家詳細(xì)介紹一下，不會(huì)的朋友快快來(lái)學(xué)習(xí)吧2016-01-22
Dreamweaver怎么設(shè)置代碼視圖的字體大小?
Dreamweaver怎么設(shè)置代碼視圖的字體大?。亢芏嗟臅r(shí)候，我們看代碼時(shí)間長(zhǎng)了就會(huì)覺(jué)得代碼很小，看起來(lái)很累，想將代碼字體設(shè)置大一點(diǎn)，該怎么設(shè)置呢？下面分享Dreamweaver代碼2016-01-21Dreamweaver怎么創(chuàng)建簡(jiǎn)單的html頁(yè)面并保存?
Dreamweaver怎么創(chuàng)建簡(jiǎn)單的html頁(yè)面并保存？Dreamweaver中怎么簡(jiǎn)單建立一個(gè)html格式的網(wǎng)頁(yè)文件，其實(shí)很簡(jiǎn)單，在建立頁(yè)面的時(shí)候選擇html就可以了，詳細(xì)的操作請(qǐng)看下文介紹2016-01-11Dreamweaver8制作網(wǎng)頁(yè)滾動(dòng)文字效果的實(shí)例教程
很多網(wǎng)友都會(huì)存在動(dòng)態(tài)文字，這樣吸引眼球，其實(shí)這個(gè)看上去高大上的功能卻很好實(shí)現(xiàn)，今天我們就使用Dreamweaver8來(lái)制作網(wǎng)頁(yè)滾動(dòng)文字效果的教程，需要的朋友可以參考下2016-01-07dw模板怎么制作?Dreamweaver制作網(wǎng)頁(yè)模板的詳細(xì)教程
dw模板怎么制作？制作一個(gè)好的網(wǎng)頁(yè)模版，以后建站就會(huì)很輕松快速的建立了，但是怎么才能制作一個(gè)模板呢？今天我們來(lái)看看Dreamweaver制作網(wǎng)頁(yè)模板的詳細(xì)教程，需要的朋友可2015-12-30Dreamweaver如何新建站點(diǎn)?DW新建站點(diǎn)方法
制作網(wǎng)站的朋友愛(ài)用Dreamweaver CS6這款軟件，很多新手朋友不會(huì)利用Dreamweaver的站點(diǎn)來(lái)管理網(wǎng)頁(yè)，那么Dreamweaver如何新建站點(diǎn)?下面小編就為大家介紹DW新建站點(diǎn)方法，來(lái)看2015-12-21