DIV+CSS實現(xiàn)仿DreamWeaver界面圖形菜單效果代碼
發(fā)布時間：2015-09-14 15:14:53 作者：佚名 
我要評論
我要評論這篇文章主要為大家介紹了DIV+CSS實現(xiàn)仿DreamWeaver界面圖形菜單效果代碼,可實現(xiàn)類似DreamWeaver頁面效果的菜單欄,頁面美觀大方,需要的朋友可以參考下
本文實例講述了DIV+CSS實現(xiàn)仿DreamWeaver界面圖形菜單效果代碼。分享給大家供大家參考。具體如下：
這是一款DIV+CSS實現(xiàn)的圖形菜單仿DreamWeaver效果，做了兼容性處理，火狐和IE都無Bug了。
運行效果截圖如下：
在線演示地址如下：
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>
希望本文所述對大家的div+css程序設(shè)計有所幫助。
相關(guān)文章
Dreamweaver如何創(chuàng)建自己的站點并管理刪除呢?
Dreamweaver提供了對站點的創(chuàng)建及管理功能，通過以樹型結(jié)構(gòu)來展示網(wǎng)站的內(nèi)容分布，從而實現(xiàn)了對站點布局及細節(jié)內(nèi)容的展示及修改，這項功能對于各位網(wǎng)頁設(shè)計者而言更有用，2016-02-17Dreamweaver如何建立超鏈接?DW建立超鏈接方法介紹
超鏈接大家都知道吧，就是你點到的話會直接彈出另一個鏈接的頁面。這是很有用的推廣手段之一。那么Dreamweaver如何建立超鏈接?下面小編就為大家介紹DW建立超鏈接方法，來看2016-02-17- 今天為大家分享Dreamweaver新建文檔和打開文檔圖文教程，教程比較基礎(chǔ)，主要針對新手來學(xué)習(xí)，推薦到腳本之家，喜歡的朋友快快來學(xué)習(xí)吧2016-02-12
Dreamweaver8怎么制作個人風(fēng)格的界面和欄?
Dreamweaver8怎么制作個人風(fēng)格的界面和欄？自己的電腦可以給dw界面設(shè)置成個人風(fēng)格的，這樣能快速調(diào)用自己的一些習(xí)慣，提高資源利用，該怎么設(shè)置呢？下面分析哪個詳細的教程2016-01-31- 我們用Dreamweaver制作網(wǎng)頁的時候,都用F12來看一下制作后的效果，那么Dreamweaver在哪里添加瀏覽器?如何添加瀏覽器?下面小編就為大家詳細介紹一下，不會的朋友快快來學(xué)習(xí)吧2016-01-22
Dreamweaver怎么設(shè)置代碼視圖的字體大小?
Dreamweaver怎么設(shè)置代碼視圖的字體大??？很多的時候，我們看代碼時間長了就會覺得代碼很小，看起來很累，想將代碼字體設(shè)置大一點，該怎么設(shè)置呢？下面分享Dreamweaver代碼2016-01-21Dreamweaver怎么創(chuàng)建簡單的html頁面并保存?
Dreamweaver怎么創(chuàng)建簡單的html頁面并保存？Dreamweaver中怎么簡單建立一個html格式的網(wǎng)頁文件，其實很簡單，在建立頁面的時候選擇html就可以了，詳細的操作請看下文介紹2016-01-11Dreamweaver8制作網(wǎng)頁滾動文字效果的實例教程
很多網(wǎng)友都會存在動態(tài)文字，這樣吸引眼球，其實這個看上去高大上的功能卻很好實現(xiàn)，今天我們就使用Dreamweaver8來制作網(wǎng)頁滾動文字效果的教程，需要的朋友可以參考下2016-01-07dw模板怎么制作?Dreamweaver制作網(wǎng)頁模板的詳細教程
dw模板怎么制作？制作一個好的網(wǎng)頁模版，以后建站就會很輕松快速的建立了，但是怎么才能制作一個模板呢？今天我們來看看Dreamweaver制作網(wǎng)頁模板的詳細教程，需要的朋友可2015-12-30- 制作網(wǎng)站的朋友愛用Dreamweaver CS6這款軟件，很多新手朋友不會利用Dreamweaver的站點來管理網(wǎng)頁，那么Dreamweaver如何新建站點?下面小編就為大家介紹DW新建站點方法，來看2015-12-21