Home > Web Front-end > HTML Tutorial > CSS ul li a background image and text alignment_html/css_WEB-ITnose

CSS ul li a background image and text alignment_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:48:41
Original
2126 people have browsed it

 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  
Copy after login



 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 }
Copy after login

Firefox uses the height of li, and IE can directly set the height of the a tag



 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     }
Copy after login

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template