CSS ul li a background image and text alignment,

CSS ul li a background image and text alignment,

<Div class = "four">
<H2> E-Commerce
<Ul>
<Li> <a href = "#"> convenient Order Management 1 </a> </li>
<Li> <a href = "#"> convenient Order Management 2 </a> </li>
<Li> <a href = "#"> convenient Order Management 3 </a> </li>
<Li> <a href = "#"> convenient Order Management 4 </a> </li>
<Li> <a href = "#"> convenient Order Management 5 </a> </li>
</Ul>
</Div>

1 2 3. four {4 width: 336px; 5 height: 200px; 6 background: # eee; 7 float: left; 8 margin: 5px; 9} 10 11. four img {12 height: 120px; 13 float: left; 14 margin-left: 10px; 15 padding: 6px; 16 background: darkgray; 17} 18 19. four ul {20 float: left; 21} 22 23. four li {24 background: url (. /images/black.png) center left no-repeat; 25 height: 15px; 26 margin: 10px; 27 background-size: 3px; 28 padding-left: 10px; 29 font: 12px/15px ""; 30 31} 32 33. four a {34} 35 36. four a: visited {37 color: gray; 38} 39 40. four h2 {41 margin: 6px 0 6px 10px; 42 font-size: 16px; 43} 44 45View Code

 

<Div>
<Ul id = "art">
<Li> <a href = "#"> Article 1 </a> </li>
<Li> <a href = "#"> Article 1 </a> </li>
<Li> <a href = "#"> Article 1 </a> </li>
<Li> <a href = "#"> Article 1 </a> </li>
<Li> <a href = "#"> Article 1 </a> </li>
<Li> <a href = "#"> Article 1 </a> </li>
<Li> <a href = "#"> Article 1 </a> </li>
</Ul>
</Div>

 

1 # art {2 background: # EEE; 3 margin-top: 3px; 4 padding-top: 10px; 5} 6 7 # art li {8 height: 30px; 9/* border: 1px green solid; */10} 11 12 # art a {13 margin-left: 5px; 14 display: block; 15 background: url (. /images/Art_li.png) no-repeat left; 16 background-size: 5px; 17 height: 30px; 18 padding-left: 20px; 19 font: 16px/30px "simsum "; 20 21} 22 23 # art a: hover {24 background: url (. /images/7.jpg); 25/* background: url (. /images/33.png) no-repeat left; */26 text-decoration: none; 27}View Code

Firefox uses the li height, and IE can directly set the label height.

<Div id = "header">

<Ul id = "nav">
<Li> <a href = "#"> Navigation 1 </a> </li>
<Li> <a href = "#"> navigation 2 </a> </li>
<Li> <a href = "#"> navigation 3 </a> </li>
<Li> <a href = "#"> navigation 4 </a> </li>
<Li> <a href = "#"> Navigation 5 </a> </li>
<Li> <a href = "#"> Navigation 6 </a> </li>
<Li> <a href = "#"> Navigation 7 </a> </li>

</Ul>
</Div>

 

1 # header {2 height: 192px; 3 background: darkgray url (images/header3.jpeg) no-repeat; 4} 5 6 7 8 # nav li {9 background: # F0F8FF; 10 width: 90px; 11 margin: 1px; 12 float: left; 13 height: 37px; 14 // border: 1px red solid; 15 line-height: 37px; 16} 17 18 # nav a {19/* font-size: 15px; */20/* line-height: 37px; */21 font: 15px/37px 'simhei 'sans-serif; 22 color: darkgray; 23 display: block; 24 width: 90px; 25 text-align: center; 26 color: #363636; 27} 28 29 # nav a: hover {30 color: white; 31 background-color: orange; 32}View Code