<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>

  1.  
  2. .four {
  3. width: 336px;
  4. height: 200px;
  5. background: #eee;
  6. float: left;
  7. margin: 5px;
  8. }
  9.  
  10. .four img {
  11. height:120px;
  12. float: left;
  13. margin-left:10px;
  14. padding:6px;
  15. background:darkgray;
  16. }
  17.  
  18. .four ul {
  19. float: left;
  20. }
  21.  
  22. .four li {
  23. background:url(./images/black.png) center left no-repeat ;
  24. height:15px;
  25. margin:10px;
  26. background-size:3px;
  27. padding-left:10px;
  28. font:12px/15px "黑体";
  29.  
  30. }
  31.  
  32. .four a {
  33. }
  34.  
  35. .four a:visited {
  36. color:gray;
  37. }
  38.  
  39. .four h2 {
  40. margin:6px 6px 10px;
  41. font-size:16px;
  42. }

<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/.jpg);
  25. /*background:url(./images/33.png) no-repeat left ;*/
  26. text-decoration:none;
  27. }

火狐浏览器用的是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>

  1. #header {
  2. height: 192px;
  3. background: darkgray url(images/header3.jpeg) no-repeat;
  4. }
  5.  
  6. #nav li {
  7. background: #F0F8FF;
  8. width: 90px;
  9. margin: 1px;
  10. float: left;
  11. height:37px;
  12. //border:1px red solid;
  13. line-height: 37px;
  14. }
  15.  
  16. #nav a {
  17. /*font-size: 15px;*/
  18. /*line-height: 37px;*/
  19. font:15px/37px '黑体' sans-serif;
  20. color: darkgray;
  21. display: block;
  22. width: 90px;
  23. text-align: center;
  24. color: #;
  25. }
  26.  
  27. #nav a:hover {
  28. color: white;
  29. background-color: orange;
  30. }

CSS ul li a 背景图片与文字对齐的更多相关文章

  1. DIV+CSS 让同一行的图片和文字对齐【转藏】

    DIV+CSS 让同一行的图片和文字对齐 DIV+CSS 让同一行的图片和文字对齐 在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新 ...

  2. div+css(ul li)实现图片上文字下列表布局

    css样式表代码: html布局代码: 效果图: html布局部分,可根据自己需要添加对应的div即可. 1.CSS关键样式单词解释 1).ul.imglist{ margin:0 auto; wid ...

  3. DIV+CSS 让同一行的图片和文字对齐

    在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...

  4. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...

  5. CSS 之 控制图片与文字对齐

    文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明: baseline- ...

  6. css控制图片与文字对齐

    文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明:baseline-将 ...

  7. CSS + ul li 横向排列的两种方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 不用css样式表和背景图片实现圆角矩形,超简洁!

    当网站页面的整体布局设计好后,接下来有很多细节的实现是很让人头疼的.其中之一就是圆角矩形的实现. 在网上看了很多圆角矩形的实现方法,基本有两种,一种是用纯css实现,不需要背景图片:另一种是用背景图像 ...

  9. 用css来写一个背景图片的切换

    代码如下: <!DOCTYPE HTML> <htmllang="en-US"> <head> <meta charset="U ...

随机推荐

  1. 自定义实现JavaScript的Map对象,修改IE不兼容MAP()的问题

    由于IE8及以下版本不支持Map对象,本文为程序猿们提供了有效的解决方法. 本文重写了Map对象,实现了常用的set, get, put, clear, remove, delete, forEach ...

  2. 【扩展知识2】函数strlen()和非函数sizeof的使用

    [扩展知识2]函数strlen()和非函数sizeof的使用 [扩展文件夹] strlen函数 sizeof ( 1 )函数strlen() 原型:size_tstrlen ( const char ...

  3. IIS7添加虚拟目录映射另一台服务器的共享文件夹

    现状: 一台Windows Server2008 Web服务器 A,一台Windows Server2003 文件服务器 B,需要在A中IIS添加对B的Web访问 方法: 1.A中添加和B相同的账号, ...

  4. POI异步导入Excel兼容xsl和xlsx

    项目架构:spring+struts2+hibernate4+oracle 需求:用户导入excel文件,导入到相应的数据表中,要求提供导入模板,支持xls和xlsx文件 思路分析: 1.提供一个下载 ...

  5. 基于websocket的单聊.群聊

    关于ai.baidu.com的 代码: #########################################核心代码################################### ...

  6. PS人物脸部去高光简单之法

    案例素材图: 方法原理步骤:得到高光面的选区,然后吸取高光面附近的颜色填充上去,这样就达到了去高光的效果. 得到高光选区的方法有很多种,要提取这种选区,通过阿尔法通道是最合适不过的了,本案例就通过阿尔 ...

  7. shell脚本常用(记)

    1.变量检查,判空 a.直接变量判断  if [ ! $1 ];then ..empty..fi b.变量通过" "引号引起来  if [ ! -n "$1" ...

  8. YTU 1003: Redraiment的遭遇

    1003: Redraiment的遭遇 时间限制: 1000 Sec  内存限制: 128 MB 提交: 198  解决: 71 题目描述 Redraiment的老家住在工业区,日耗电量非常大.是政府 ...

  9. 我为什么要学习C++反汇编

    写在开始 从6月7日开始到今天已经有5天了,在这5天的业余时间(工作之余)里终于系统的完成了C++反汇编的大部分问题的学习,今天写篇总结,算是对这几天学习的总结. 首先我想说明的一个问题就是我为什么要 ...

  10. angular中transclude的理解

    今天被这个transclude搞糊涂了,弄了半天,才知道原来使用起来很简单.很烦恼为社么书中的对于这个的介绍这么晦涩难懂.直到看到了这篇文章,才让我弄清楚了. 一.transclude介绍 trans ...