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