- 您的當前位置: 網(wǎng)站首頁 ? 信息講堂 ? 技術文章 ? 橫向背景變換菜單
- ***
橫向背景變換菜單
這是段 橫向背景變換菜單的代碼樣式都在頁面里,直接粘到html頁面里就可以看到效果哦!
這是菜單用到的css樣式
#submenu {
MARGIN:160px 80px;
PADDING:5px;
BORDER: #fff 1px solid;
BACKGROUND: #dfdfdf;
COLOR: #666;
width:800px; height:25px;}
#submenu ul{ margin:0; padding:0; list-style:none;}
#submenu ul li{ margin:0; width:113px; text-align:center; float:left;}
#submenu ul li a{ padding:5px 0px; display:block; color:#000; text-decoration:none;}
#submenu ul li a:hover{ background:#ff6600; color:#FFFFFF; font-family:"微軟雅黑";}
下面是菜單的代碼:
<div id="submenu">
<ul>
<li><a title="首頁" >Home</a></li>
<li><a title="關于我們" >關于我們</a></li>
<li><a title="網(wǎng)站標準" >網(wǎng)站標準</a></li>
<li><a title="標準的好處" >標準的好處</a></li>
<li><a title="怎樣過渡" href="http://www.yzci.com /howto.html">怎樣過渡</a></li>
<li><a title="相關教程" >相關教程</a></li>
<li><a title="工具" >工具</a></li>
</ul>
</div>
效果見附件:是原文件
/upload/art_pic/file/20120316/20120316093504_17626.rar
秦皇島網(wǎng)絡公司炎黃科技美工自己寫的,源碼分享給大家!
這是菜單用到的css樣式
#submenu {
MARGIN:160px 80px;
PADDING:5px;
BORDER: #fff 1px solid;
BACKGROUND: #dfdfdf;
COLOR: #666;
width:800px; height:25px;}
#submenu ul{ margin:0; padding:0; list-style:none;}
#submenu ul li{ margin:0; width:113px; text-align:center; float:left;}
#submenu ul li a{ padding:5px 0px; display:block; color:#000; text-decoration:none;}
#submenu ul li a:hover{ background:#ff6600; color:#FFFFFF; font-family:"微軟雅黑";}
下面是菜單的代碼:
<div id="submenu">
<ul>
<li><a title="首頁" >Home</a></li>
<li><a title="關于我們" >關于我們</a></li>
<li><a title="網(wǎng)站標準" >網(wǎng)站標準</a></li>
<li><a title="標準的好處" >標準的好處</a></li>
<li><a title="怎樣過渡" href="http://www.yzci.com /howto.html">怎樣過渡</a></li>
<li><a title="相關教程" >相關教程</a></li>
<li><a title="工具" >工具</a></li>
</ul>
</div>
效果見附件:是原文件
/upload/art_pic/file/20120316/20120316093504_17626.rar
秦皇島網(wǎng)絡公司炎黃科技美工自己寫的,源碼分享給大家!