This article illustrates the CSS implementation of the Orange navigation menu code for the group buying website. Share to everyone for your reference. Specifically as follows:
This is an orange style CSS menu, no use of JavaScript technology, complete CSS code to achieve, the original is mainly to use in group buying site, we modify, you can use in a variety of web sites. The layout at both ends of the menu may be important for you to study.
The screenshot of the running effect is as follows:
The specific code 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> Orange Group Buying website navigation menu </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_box {width:960px; height:44px; Background:url (images/nav_bg.jpg); margin:0 auto; position:relative; overflow : visible; margin-top:100px; }
. nav_box_l {width:32px; height:57px; Background:url (images/nav_left.png) no-repeat; position:absolute; left:- 32px; top:0; }
. nav_box_r {width:31px; height:57px; Background:url (images/nav_right.png) no-repeat; position:absolute; right:- 31px; top:0; }
. nav_box li {float:left; padding:0 30px; font-size:16px; Font-weight:bold; line-height:40px; List-style:none;}
. Nav_box li.li_r {float:right; padding:0 10px; font-size:16px; line-height:40px; Color: #FFF; FONT-SIZE:12PX}
. Nav_box li a {color: #FFF; Text-decoration:none}
. Nav_box Li a.font_min {font-weight:400;}
</style>
</head>
<body style= "Text-align:center" >
<div class= "Nav_box" >
<div class= "nav_box_l" ></div>
<div class= "Nav_box_r" ></div>
<div class= "" >
<ul>
<li><a linkindex= href= "#" > Today Group buy </a></li>
<li><a linkindex= "" "href=" # "> On-time group buying </a></li>
<li><a linkindex= "href=" # "> Play Group buying </a></li>
<li><a linkindex= "A" href= "#" > FAQ </a></li>
<li class= "Li_r" ><a href= "#" > Login </a> | <a href= "#" > Registration </a></li>
<li class= "Li_r" ><a linkindex= "href=" "#" > << invite friends to buy back 10 yuan </a></li>
</ul>
</div>
</body>
</html>
I hope this article will help you with your DIV+CSS web design.
