Transfer from http://www.w3cn.org/Article/tips/2005/105.html
Although there are methods mentioned in my website and the article, many beginners are still not clear how to achieve, and the implementation principle, I want to write a detailed tutorial will be more helpful to everyone.
Let's first look at an example of a menu, the final effect is:
Home Product Introduction Service Introduction Technical Support Improve Contact Us
Then let's explain the steps in detail
Step 1: Establish a unmanned list
Let's build a unparalleled list to create the structure of the menu. The code is:
The effect is:
Home Product Introduction Service Introduction Technical Support Improve Contact Us
Step 2: Hide the default style of LI
Because it doesn't look very nice, the menu usually does not need a LI default dot. We define a style to eliminate these dots.
Of course, in order to better control the entire menu, we put the menu in a DIV. The page code becomes:
CSS is defined as:
.test ul {list-style: none;
Description: ". Test UL" means that the style I want to define will work on the UL label in Test's layer.
The current effect is no dot:
Home Product Introduction Service Introduction Technical Support Improve Contact Us
Step 3: Key floating
Here is the key to the menu to become a horizontal direction. We add a "float: left;" attribute to li elements, allowing each LI to float on the left of a LI.
CSS is defined as:
.test li {float: Left;}
The effect is:
Home Product Introduction Service Introduction Technical Support Improve Contact Us
Look, the menu is transversely. It's that simple! The following is that the optimization details are optimized.
Step 4: Adjust the width
What should I do if the menu is crowded together? Let us adjust the width of Li.
Add definition in CSS: 100px Specify a li width 100PX, of course, you can adjust the value according to your needs: .test Li {float: Left; width: 100px;}
The effect is:
Home Product Introduction Service Introduction Technical Support Improve Contact Us
If we simultaneously define the width of the outer DIV, Li will automatically wrap according to the width of the DIV, for example, Div width 350px, 6 Li's total width is 600px, and automatically becomes two lines without rows.
.test {width: 350px;}
The effect is:
Home Product Introduction Service Introduction Technical Support Improve Contact Us
Step 5: Set the basic link effect
Next, we set up the style of the link through CSS, definition: link,: visited,: HOVER status
.test a: link {color: # 666; background: #ccc; text-decoration: none;}. Test A: visited {color: # 666; text-decoration: underline;}. Test A: hover {color: # FFF; font-weight: bold; text-decoration: underline; background: # f00;}
The effect is:
Home Product Introduction Service Introduction Technical Support Improve Contact Us
Step 6: Display the link in block level element
Have a friend asked, why didn't the menu link not fill the width of the entire LI? Well, the solution is very simple, add Display: Block in a style definition of A, enabling the link to display in block level elements.
At the same time, we are fine-tuned as detail:
Use text-align: center to place the menu text; use Height: 30px to increase the height of the background; use margin-left: 3px to make each menu 3px distance; use line-height: 30px; define the high line, make the link text Longitudinal center;
CSS definition like this:
. Test A {Display: Block; TEXT-Align: Center; Height: 30px;}. Test Li {float: LEFT; Width: 100Px; BACKGROUND: 3px; line-height: 30px;}
The effect becomes:
Home Product Introduction Service Introduction Technical Support Improve Contact Us
This is more beautiful.
Step 7: Define background images
We usually add a small icon in front of each link so that navigation is clearer. CSS is implemented using a background image that defines a LI:
.test a: link {color: # 666; background: URL (arrow_off.gif) #CCC No-repert 5px 12px; text-decoration: none;}. Test A: Hover {Color: #fff; font-weight: bold Text-Decoration: none; background: URL (arrow_on.gif) #f00 no-repeat 5px 12px;}
Description: "Background: URL (arrow_off.gif) #ccc no-repeat 5px 12px;" This code is a CSS abbreviation, indicating the background picture is arrow_off.gif; background color is #ccc; background picture does not repeat "NO-REPEAT ", The location of the background picture is the left distance of 5px, the upper margin is 12px;
In the default, the icon is arrow.off.gif, when the mouse moves to the link, the icon changes to arrow_on.gif
The effect becomes: Home Products Service introduction Technical support immediately purchase Contact us
The complete code of CSS is now:
.test ul {list-style: none;}. Test Li {float: Left; width: 100px; background: #ccc; margin-left: 3px; line-height: 30px;}. Test a {display: block; text -Align: 40px;}. Test A: link {color: # 666; background: URL (arrow_off.gif) #CCC No-repeat 5px 12px; Text-Decoration: none;}. Test A: visited { Color: # 666; text-decoration: underline;}. Test A: hover {color: #fff; font-weight: bold; text-decoration: none; background: URL (arrow_on.gif) #f00 no-repeat 5px 12px }
The full code of the page is:
Ok, the main step is this 7 step, copy and modify the code immediately, you can also use the CSS to do the horizontal menu!
