今天小编跟大家讲解下有关div+css实现软件公司网站蓝色导航菜单代码 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关div+css实现软件公司网站蓝色导航菜单代码 的相关资料,希望小伙伴们看了有所帮助。
本文实例讲述了div+css实现软件公司网站蓝色导航菜单代码。分享给大家供大家参考。具体如下:
这是一款基于div+css实现的软件公司网站蓝色导航菜单 非常大气的菜单 鼠标移过菜单的时候 菜单的背景就变化了 觉得挺实用 也比较好看的菜单 除了软件公司可使用 企业一类的站都可以用。
运行效果截图如下:
在线演示地址如下:
http://demo.aidi.net.cn/js/2015/div-css-soft-web-blue-nav-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=gb2312"/><title>软件公司网站蓝色导航菜单</title><style>* {PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px}BODY {BACKGROUND-COLOR: #ffffff; MARGIN: 0px auto; COLOR: #000000; FONT-SIZE: 9pt}.nav{ width:938px; margin:0 auto; background:url(images/menu_bj_2.gif) no-repeat 0 0; height:46px; line-height:54px; vertical-align:bottom; margin-top:100px; }.nav ul,.nav li{ float:left;}.nav li{ width:102px; display:block; background:url(images/menu_bj_1.gif) no-repeat 0 50%; padding-left:2px;}.nav li.bgno1{ background:url(images/menu_over.jpg) no-repeat 2px 0px; color:#FFFFFF;padding-left:2px;}.nav li.bgno{ background:url(images/menu_bj_4.gif) no-repeat 0 0px; color:#FFFFFF;padding-left:2px;}.nav li.bgcolor a{ color:#ecde29;}.nav li.bgcolor a:hover{ color:#ecde29;}.nav li,.nav li a{float:left;font-size:14px; color:#FFFFFF;}.nav li a{font-weight:bold; color:#fff;width:100px; text-align:center;padding-left:1px; text-decoration:none;}.nav li a:hover{ text-decoration:none;background:url(images/menu_over.jpg) no-repeat;color:#fff;}.nav li.bgno a{ color:#fff;}</style></head><body style="text-align:center"> <div class="nav"> <ul class="clearfix"> <li class="bgno"><a href="https://www.aidi.net.cn/">源码爱好者</a></li> <li><a href="">解决方案</a></li> <li><a href="">软件服务</a></li> <li><a href="">软件产品</a></li> <li><a href="">职位招聘</a></li> <li><a href="">免费模板</a></li> <li><a href="">css代码</a></li> <li><a href="">css导航</a></li> <li class="bgcolor"><a href="">CSS菜单</a></li> </ul> </div></body></html>
希望本文所述对大家的div+css网页设计有所帮助。
来源:爱蒂网