CSS ul li a 背景图片与文字对齐
<div class="four">
<h2>电子商务</h2>
<img src="data: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>
.four {
width: 336px;
height: 200px;
background: #eee;
float: left;
margin: 5px;
}
.four img {
height:120px;
float: left;
margin-left:10px;
padding:6px;
background:darkgray;
}
.four ul {
float: left;
}
.four li {
background:url(./images/black.png) center left no-repeat ;
height:15px;
margin:10px;
background-size:3px;
padding-left:10px;
font:12px/15px "黑体";
}
.four a {
}
.four a:visited {
color:gray;
}
.four h2 {
margin:6px 6px 10px;
font-size:16px;
}
<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>
#art {
background:#EEE;
margin-top:3px;
padding-top:10px;
}
#art li {
height:30px;
/*border:1px green solid;*/
}
#art a {
margin-left:5px;
display:block;
background:url(./images/Art_li.png) no-repeat left;
background-size:5px;
height:30px;
padding-left:20px;
font:16px/30px "simsum";
}
#art a:hover {
background:url(./images/.jpg);
/*background:url(./images/33.png) no-repeat left ;*/
text-decoration:none;
}
火狐浏览器用的是li的高度，IE可以直接设a标签的高度
<div id="header">
<img src="data: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>
#header {
height: 192px;
background: darkgray url(images/header3.jpeg) no-repeat;
}
#nav li {
background: #F0F8FF;
width: 90px;
margin: 1px;
float: left;
height:37px;
//border:1px red solid;
line-height: 37px;
}
#nav a {
/*font-size: 15px;*/
/*line-height: 37px;*/
font:15px/37px '黑体' sans-serif;
color: darkgray;
display: block;
width: 90px;
text-align: center;
color: #;
}
#nav a:hover {
color: white;
background-color: orange;
}
最新文章
- CentOS利用nginx和php-fpm搭建owncloud私有云
- .NET重构（类型码的设计、重构方法）
- [我给Unity官方视频教程做中文字幕]beginner Graphics – Lessons系列之摄像机介绍Cameras
- mac环境下手动卸载mysql
- 从客户端中检测到有潜在危险的Request.Form 值
- Uva 796 Critical Links 找桥
- 理解Java机制最受欢迎的8幅图
- OSX: 使用命令行对FileVault2分区恢复
- 玩玩微信公众号Java版之准备
- PE格式第九讲,资源表解析
- linux下播放组播流出现setsockopt:No such device错误
- Slf4j与log4j及log4j2的关系及使用方法
- Vue-router导航问题
- 【Linux基础】VI命令模式下大小写转换
- mysql启动报错cannot allocate memory for the buffer pool处理
- Charles抓包(iOS的http/https请求)
- 【xsy1172】 染色 dp
- Spiral Matrix I & II
- ZT android -- 蓝牙 bluetooth （四）OPP文件传输
- C# 超级狗 二次开发 读写数据 激活验证 存储数据库连接字符串