首页 > 网站 > WEB开发 > 正文

CSS ul li a 背景图片与文字对齐

2024-04-27 14:28:47
字体:
来源:转载
供稿:网友
CSS ul li a 背景图片与文字对齐

<div class="four"> <h2>电子商务</h2> <img src="images/photo2.gif" alt="" /> <ul> <li><a href="#">方便的订单管理1</a></li> <li><a href="#">方便的订单管理2</a></li> <li><a href="#">方便的订单管理3</a></li> <li><a href="#">方便的订单管理4</a></li> <li><a href="#">方便的订单管理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 45  
View Code

<div> <ul id="art"> <li><a href="#">文章1</a></li> <li><a href="#">文章1</a></li> <li><a href="#">文章1</a></li> <li><a href="#">文章1</a></li> <li><a href="#">文章1</a></li> <li><a href="#">文章1</a></li> <li><a href="#">文章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

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

<div id="header"> <img src="images/logo.png" id="logo"/> <ul id="nav"> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> <li><a href="#">导航4</a></li> <li><a href="#">导航5</a></li> <li><a href="#">导航6</a></li> <li><a href="#">导航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 '黑体' 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


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表