您的位置: 首页  >  IT文章  >  CSS ul li a 背景图片与文字对齐

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

分类: IT文章 • 2022-04-20 21:56:16

<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  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 >文章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 >导航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      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      90px;
25     text-align: center;
26     color: #363636;
27 }
28 
29     #nav a:hover {
30         color: white;
31         background-color: orange;
32     }
View Code

相关推荐