This article illustrates the green Level level menu code implemented by DIV+CSS. Share to everyone for your reference. Specifically as follows:
This is a div+css based on the implementation of the Green Level site menu, I believe you like a CSS menu, green style, used a few background pictures, we follow the path to download the picture. The overall feeling of this menu is good, compatibility and good, whether it is used in your website or learning to study CSS, are a good choice.
The screenshot of the running effect is as follows:
The
code is as follows: <! 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> Green level CSS menu </title>
<style>
Body{font-size:12px;font-family:arial,helvetica, ' XXFarEastFont-Arial ', 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" > New </div>
<a href= "#" title= "Home" class= "actived" style= "margin-left:0;padding-left:0;" > Home </a>
<a href= "#" title= "ASP source" >asp Source </a>
<a href= "#" title= "php source" >php Source </a>
<a href= "#" title= ". NET source code "". NET Source </a>
<a href= "#" title= "JSP source" >jsp Source </a>
<a href= "#" title= "htm source" >htm Source </a>
<a href= "#" title= "Web Menu" > Web Menu </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>
I hope this article will help you with the DIV+CSS web design.
