DIV+CSS实现的绿色水平一级菜单代码

 本文实例讲述了DIV+CSS实现的绿色水平一级菜单代码。分享给大家供大家参考。具体如下:

这是一款基于DIV+CSS实现的绿色水平网站菜单,相信是你喜欢的一种CSS菜单,绿色风格,用到了几张背景图片,大家顺着路径把图片下载下来吧。这款菜单整体感觉效果不错,兼容性又好,不管是用在你的网站或是学习研究CSS,都是不错的选择。

运行效果截图如下:

代码如下:
<!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>绿色水平CSS菜单</title>
<style>
body{font-size:12px;font-family:Arial,Helvetica,'宋体',sans-serif;color:#333;background:#fff;margin:0;}
a:link{color:#0041D9;text-decoration:none;outline:none;}
a:visited{color:#0041D9;text-decoration:none;outline:none;}
a:hover{color:#f60;text-decoration:underline;outline:none;}
a:active{color:#0041D9;text-decoration:none;outline:none;}
#header{position:relative;width:100%;}
div.bar{position:relative;height:42px;background:url(images/mainmenu.bg14_6x42.gif) repeat-x;}
#header div.tabbar{width:900px;}
#header .tabbar div.tabs{left:266px;position:absolute;top:41px;font-size:14px;font-weight:bold;}
#header .tabbar .tabs a{float:left;width:80px;height:24px;line-height:24px;padding-top:7px;text-align:center;color:#000;font-weight:lighter;font-size:14px;background:transparent;}
#header .tabbar .tabs a:hover{background:#fff url(images/nav_hover_80x31.gif) no-repeat;text-decoration:none;margin-left:-1px;padding-left:1px;}
#header .tabbar .tabs a.actived{background:#fff url(images/nav_80x31.gif) no-repeat;font-weight:bold;color:#fff;margin-left:-1px;padding-left:1px;}
#header .tabbar .tabs a.actived:hover{background:#fff url(images/nav_80x31.gif) no-repeat;font-weight:bold;color:#fff;text-decoration:underline;}
#header .tabbar .bg{position:absolute;left:266px;top:41px;width:560px;height:31px;z-index:-1;}
#header .tabbar .bg .nw{float:left;width:80px;height:31px;background:transparent url(images/navleft2_80x31.gif) no-repeat;}
#header .tabbar .bg .cen{float:left;width:80px;height:31px;background:transparent url(images/navlcenter_80x31.gif) no-repeat;}
#header .tabbar .bg .ne{float:left;width:80px;height:31px;background:transparent url(images/navright_80x31.gif) no-repeat;}
#header .tabbar .float_icon{background:transparent url(images/new01_18x19.gif) no-repeat;font-size:0;height:19px;line-height:0;position:absolute;right:403px;text-indent:-999px;top:-4px;width:18px;}
#header{z-index:20;min-width:970px;}
#header div.banner{position:relative;height:72px;z-index:10;}
div.bar{height:7px;background:url(images/mainmenu.bg11_6x7.gif) repeat-x;}
</style>
</head>
<body>
<div id="header">
<div class="banner">
<div class="tabbar">
<div class="tabs">
<div class="float_icon">新</div>
<a href="#" title="首 页" class="actived" style="margin-left:0;padding-left:0;">首 页</a>
<a href="#" title="ASP源码">ASP源码</a>
<a href="#" title="PHP源码">PHP源码</a>
<a href="#" title=".NET源码">.NET源码</a>
<a href="#" title="JSP源码">JSP源码</a>
<a href="#" title="HTM源码">HTM源码</a>
<a href="#" title="网页菜单">网页菜单</a>
</div>
<div class="bg">
<div class="nw"></div>
<div class="cen"></div>
<div class="cen"></div>
<div class="cen"></div>
<div class="cen"></div>
<div class="cen"></div>
<div class="ne"></div>
</div>
</div>
</div>
<div class="bar"></div>
</div>
</body>
</html>

 

希望本文所述对大家的div+css网页设计有所帮助。

时间: 2016-09-12

DIV+CSS实现的绿色水平一级菜单代码的相关文章

纯css实现蓝色圆角效果水平导航菜单代码

         本文实例讲述了纯css实现蓝色圆角效果水平导航菜单代码.分享给大家供大家参考.具体如下:          这是一款可爱的蓝色圆角水平导航菜单,用到几张背景图片,我觉得这款菜单挺实用,特别是用在个人博客中非常合适.在兼容性方面做的也很好,几乎兼容所有的浏览器. 运行效果截图如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

jQuery+css实现非常漂亮的水平导航菜单效果_jquery

本文实例讲述了jQuery+css实现非常漂亮的水平导航菜单效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 用到的背景图片tab.gif如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

div+css实现仿猪八戒首页导航菜单效果

本文实例讲述了div+css实现仿猪八戒首页导航菜单效果.分享给大家供大家参考.具体如下: 这是一款仿猪八戒2010年首页的网页导航菜单,蓝色风格,非常漂亮大气.简洁专业,在此推荐给大家.菜单上有一个标记,指引当前的位置,也是本菜单的亮点.用CSS究竟是如何实现的呢?那么就请一起看代码吧. 先来看看运行效果截图: 具体代码如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h

DIV+CSS+JS不间断横向滚动实现代码_javascript技巧

DIV+CSS+JS实现不间断横向滚动代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>横向不间断滚动DIV CSS代码-DIVCSS5</title> </head> <body>

可刷新的Div+CSS+JS制作的树型菜单

css|js|菜单|刷新 Div+CSS+JS组和能够实现很多好看的特殊的效果,这里推荐一款可刷新的下拉菜单源代码: <style type="text/css"><!--*{margin:0;padding:0;border:0;}body { font-family: arial, 宋体, serif; font-size:12px;}#nav { width:180px; line-height: 24px; list-style-type: none; tex

不错的div+CSS的无限级扩展下拉菜单效果

我是菜单1 一一一级 01 一一一级 02 第222菜单 01 第222菜单 02 33333333_01 33333333_02 4444级菜单里的01 4444级菜单里的02 这个是第五级菜单 33333333_03 第222菜单 03 第222菜单 04 一一一级 03 一一一级 04 一一一级 05 我是菜单2 游戏业务部 游戏开发组 游戏事业部 海外事业部 我是菜单3 商业技术合作 网 站 合 作 客户服务中心 我是菜单4 公 司 动 态 发 展 历 程 开 发 进 度 其 他 新 闻

Div+CSS布局应该注重语义、注重代码的重用性!

css 普通的一个页面无非就是HTML以及CSS和JS等脚本组成,相对以前来说,大家都是用表格(table)来实现页面的布局,而现在呢,追求的是用层(div)来布局了.很多朋友说用层(div)布局跟用表格(table)布局的差别很大,这个我同意,因为表格(table)是用来体现二维数据的.但是既然我们以前能用,而且一直在用,也就说明表格(table)布局还是可以的.但是为什么我们现在要用用层(div)来布局呢?因为我们要让HTML的每个标签都能在语义上很好的体现出来,即使看源代码也能很明了它的作

CSS 的2级下拉菜单代码

 代码如下 复制代码 <style> .Nav { } .Nav li{   float:left;   display:block;   position:relative; } .Nav a{   float:left;   display:block;   position:relative;   padding:2px 10px 2px 10px;   font-size:13px;   text-decoration: none; } .Nav li a:hover {   colo

DIV+CSS网页另类上下布局的实例代码_经验交流

上面的 下面的