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

php中文网
发布: 2016-06-24 11:48:41
原创
2601人浏览过

 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 #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标签的高度

立即学习前端免费学习笔记(深入)”;

慧中标AI标书
慧中标AI标书

慧中标AI标书是一款AI智能辅助写标书工具。

慧中标AI标书 295
查看详情 慧中标AI标书

 

 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     }
登录后复制

 

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号