CSS ul li a 背景图片与文字对齐_html/css_WEB-ITnose

电子商务

• 方便的订单管理1


• 方便的订单管理2


• 方便的订单管理3


• 方便的订单管理4


• 方便的订单管理5

 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 45  

 

• 文章1


• 文章1


• 文章1


• 文章1


• 文章1


• 文章1


• 文章1

 

 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 }

火狐浏览器用的是li的高度，IE可以直接设a标签的高度

• 导航1


• 导航2


• 导航3


• 导航4


• 导航5


• 导航6


• 导航7

 

 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 '黑体' 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     }