Home > Developer > Web Develop
Today the main study of the Web navigation bar production. Note: When you introduce an external CSS style, you use the background:url (.. /images/1.png), you must remember to use . Jump out of the current folder and go back to the parent directory.
First, the navigation bar implementation steps:
1, the whole page is divided into the head, content, tail. The content section of the website center is alleys. The alleys is a fixed width.
2, set the alleys width. The rest of the content only needs to be set to a height.
3, the header part is divided into left, middle and right three parts. The div is wrapped separately, you can set the padding.
4, the NAV part with UL realization, Li in a tag for the line elements, to use display to block label, to Li set wide, High Line, you can achieve the center.
5, the mouse move up the effect with a:hover realization.
The navigation bar code is as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
body{
Font-family: "Microsoft Jas Black";
font-size:16px;
}
. header{
height:58px;
Background: #191D3A;
}
. header. inner_c{
width:1000px;
margin:0 Auto;
}
. header. logo{
Float:left;
padding-right:50px;
}
. header. nav{
Float:left;
}
. header. Nav li{
line-height:58px;
List-style:none;
Float:left;
Text-align:center;
border-right:1px solid #212542;
}
. header. Nav. last{
Border:none;
}
. header. Nav Li a{
Display:block;
height:58px;
width:100px;
Text-decoration:none;
color: #6B6889;
}
. header. Nav Li current{
Color: #fff;
Background: #252947;
}
. header. Nav Li a:hover{
color: #fff;
background: #252947;
};
. header. jrwm_box{
Float:left;
}
. header. jrwm{
padding-left:48px;
padding-top:12px;
}
. banner{
height:465px;
Background:url (images/banner.jpg) no-repeat Center top;
}
</style>
<body>
<div class= "Header" >
<div class= "Inner_c" >
<div class= "logo" ></div>
<div class= "NAV" >
<ul>
<li><a href= "" class= "current" > Home </a></li>
<li><a href= "" > Boya Games </a></li>
<li><a href= "" > Boya news </a></li>
<li><a href= "" > About Us </a></li>
<li><a href= "" > Service center </a></li>
<li class= "L" ><a href= "" > Investor Relations </a></li>
</ul>
</div>
<div class= "JRWM" >
<a href= "" ></a>
</div>
</div>
</div>
</body>
Operating effect:
Second,!important
Important increase weight, weight infinity
FONT-SIZE:24PX!important;
The increase is an attribute weight, not a selector.
!important cannot raise inherited weights, which is 0 or 0
<div>
<p> haha haha </p>
</div>
Div{color:red!important;}
P{color:blue;}
Because the div is inherited to affect the text color, it is not possible to increase the weight.
Important in the construction station is not allowed to use, to avoid confusion, understand just fine.
8th day: CSS make navigation bar
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
