1, Common and practical horizontal navigation bar
Create a new HTML file:
Code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Horizontal Navigation production method </title>
<style type= "Text/css" >
#globallink {
margin:0px; padding:0px; /* boundary, padding is 0*/
Clear:both; * * Clear Floating * *
}
#globallink ul{
List-style:none; /* do not display the list image, the default solid circle, etc. * *
padding:0px; margin:0px;
Display:inline; /* The default value for the inline object. Use this value to delete rows from the object .
}
#globallink li{
Float:left; /* This is the key statement,Li does not wrap line to achieve horizontal arrangement * *
Text-align:center; /* Text Center Alignment * *
width:100px; /* the width of each connection block is 100px*/
}
#globallink Li a{
Display:block; /* of course block-level elements to display, make the link into a button * *
padding:9px 6px 11px 6px; /* fill up, right, down , left/ *
margin:0px; /* boundary is 0px*/
}
#globallink Li A:link, #globallink Li a:visited{
color: #FFF; /* Font Color set to white, in the CSS can be abbreviated for example:#f98 and ff9988 is the same * *
font-size:17px; /* font size is 17px/*
Text-decoration:none; /* do not show underline * *
Background-color: #3366CC; /* Set the navigation bar background color Blue * *
}
#globallink Li a:hover{/ * Set the style sheet property of the object when it hovers over the mouse.
Background-color: #ff9933; /* change background color * *
Text-decoration:underline; /* plus underline * *
font-size:20px; /* mouse hover font magnification to 20px*/
}
</style>
<body>
<div id= "Globallink" >
<ul>
<li><a href= "#" > Home </a></li>
<li><a href= "#" > Online Campus </a></li>
<li><a href= "#" > Management Training </a></li>
<li><a href= "#" > Online Classroom </a></li>
<li><a href= "#" > I want to enroll </a></li>
<li><a href= "#" > Culture Salon </a></li>
<li><a href= "#" > College Forum </a></li>
<li><a href= "#" > About Us </a></li>
</ul>
</div>
</body>
This is the most common navigation bar production process, the implementation of the mouse to access the hover, and release the effect of leaving.
The following is the display effect of opening a Web page:
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
