Css General notes 01 -- navigation background

Css General notes 01 -- navigation background

I have summarized some small issues that may be solved by css when I first came into contact with the front-end. I will gradually share with you the background issues of navigation, which are often seen on webpages, when you place the mouse over a navigation button, there will be some special effects, such as the background. This is the most common one. Let's solve it. This is a method that can be used in all navigation, this method can be used to remove the first and third sides.

The html code is as follows:

1 
The css code is as follows:
1 # nav {width: 300px; height: 80px; padding_top: 20px; margin: 0 auto;} 2 # nav li {float: left; heigth60px; margin-left: 10px ;} 3 # nav a {float: left; heigth60px; line-height: 60px; font ......} // set the height of li text. The result is centered. 4 # nav strong {float: left; height: 60px;} 5 # nav span {float: left; height: 60px; padding: 0 14px;} // set the width of the left and right sides of each li; 6 // place the mouse on the navigation background. effect 7 # nav a: hover {background: url (.......) repeat-x;} // The middle background is repeated. 8 # nav a: hover strong {background: url (.......) no-repeat left;} // left background, no duplicates, on the left; 9 # nav a: hover span {background: url (.......) no-repeat right;} // background on the right, which is not repeated and placed on the right;
The following must be modified:
1.html files must be imported by adding css files; 2.css files must be corrected by selecting the images to be used.
This is the running effect I wrote earlier (the sample code above is incomplete and cannot be run ):
When you place the cursor over the second navigation button, a background image of the rounded corner will appear, because the first "HOME" is set to active, so it is always in the background state: