Home > Developer > Web Develop
Today we begin to learn the HTML list, which contains the following content and knowledge points:
Landscape List Menu
Landscape Navigation with picture beautification
CSS Sprites
One, Landscape list menu
Before learning the vertical navigation menu, and learning the float property, then the horizontal navigation menu is not very simple, just need to put Li horizontal arrangement can be achieved. Take the fourth section of the code to direct use, the revised code is as follows:
<! 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 "/>
<style type= "Text/css" >
body {font-family:verdana; font-size:12px; line-height:1.5;}
A {color: #000; text-decoration:none;}
a:hover {color: #F00;}
#menu {border:1px solid #CCC; height:26px; background: #eee;}
#menu ul {list-style:none; margin:0px; padding:0px;}
#menu ul li {float:left; padding:0px 8px; height:26px; line-height:26px;}
</style>
<body>
<div id= "Menu" >
<ul>
<li><a href= "#" > Home </a></li>
<li><a href= "#" > Page layout layout </a></li>
<li><a href= "#" >div+css Tutorials </a></li>
<li><a href= "#" >div+css instances </a></li>
<li><a href= "#" > Common code </a></li>
</ul>
</div>
</body>
In order to make the user experience more friendly, or to convert a to block-level elements, you can also set a background color or background image to more beautiful, and then set the mouse on the style.
#menu {width:370px; margin:0 auto; border:1px solid #CCC; height:26px; background: #eee;}
#menu ul {list-style:none; margin:0px; padding:0px;}
#menu ul li {float:left;}
#menu ul Li a {display:block; padding:0px 8px; height:26px; line-height:26px; float:left;}
#menu ul li a:hover {background: #333; color: #fff;}
Third, CSS sprites technology
CSS sprites in the domestic many people called CSS Sprite or CSS sprite. It is to integrate some of the background image into a picture file, and then use the background image of the CSS to navigate to the location to display. This reduces the file size, reduces the number of requests to the server, and improves efficiency.
Before you speak CSS sprites, let's figure out the background image.
#menu ul Li a {background: #ccc URL (images/nav_bg2.gif) 0 0 no-repeat;}
CSS Background properties abbreviated as shown above, #ccc表示背景色; URL () is the background picture path, the next two numeric parameters are left and right, the first parameter is the number of PX from the left, the second parameter indicates how much distance, this and padding shorthand is not the same, must not be confused. In addition, the CSS value of 0 can be without units, the other values must be with the unit (line-height value is how many times, except Zoom,z-index); no-repeat indicates which direction the background picture repeats, and is not duplicated at this time.
Also need to explain that the location of the position of the image parameter is the upper left corner of the picture as the origin, understand these, CSS sprites technology is basically understood, is based on the background image positioning to achieve. Combine three background images on one sheet, such as:
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
