• 欢迎访问秦皇岛网络公司-炎黄科技 | QHDSUDU.COM
  • 今天是:2024 年 06 月 23 日 网站已经正常运行 [7294] 天
信息讲堂

横向背景变换菜单

字号:     2012-03-16 09:35:23   来源:炎黄科技   上一条    下一条
这是段 横向背景变换菜单的代码样式都在页面里,直接粘到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="首页" href="http://www.yzci.com/">Home</a></li>
<li><a title="关于我们" href="http://www.yzci.com/aboutus.html">关于我们</a></li>
<li><a title="网站标准" href="http://www.yzci.com/webstandards.html">网站标准</a></li>
<li><a title="标准的好处" href="http://www.yzci.com/benefits.html">标准的好处</a></li>
<li><a title="怎样过渡" href="http://www.yzci.com /howto.html">怎样过渡</a></li>
<li><a title="相关教程" href="http://www.yzci.com/tutorial.html">相关教程</a></li>
<li><a title="工具" href="http://www.yzci.com/tools.html">工具</a></li>
</ul>
</div>


效果见附件:是原文件
/upload/art_pic/file/20120316/20120316093504_17626.rar
秦皇岛网络公司炎黄科技美工自己写的,源码分享给大家!
秦皇岛网络公司联系电话
致电 137 859 36100
7×24小时服务热线
秦皇岛网络公司工作时间
在线咨询
每工作日 9:00-17:30
点击进入>
预约秦皇岛网站制作专家
预约专家
为您提供一对一解决方案
点击进入>
秦皇岛网络公司的地图位置
地图位置
在地图上看我们的位置
点击进入>
秦皇岛网络公司官方微博
访问官方微博
唯一官方微博平台
点击进入>
版权所有 ? 2010-2011 秦皇岛网络公司 秦皇岛网站制作
Copyright ? 2010-2011 Qhdsudu.com All Rights Reserved 冀ICP备13009153号-13
联系电话:13785936100  电子邮箱:1514969798@qq.com
微信沟通 QQ客服
扫描二维码添加客服微信