您当前的位置:首页 > 网页设计 > Web开发 > 正文

CSS实例:用ul+li打造图书目录效果

【字体大小: 2009-11-14 23:10 来源: 作者: 

  ul无序列表是一个非常重要的HTML标签,页面中许多元素都用它来组织。在52CSS的论坛W3Cbbs.com中有网友提出,如何实现图书目录效果。就此问题,我们形成了下面的实例。

  图书目录往往由章节标题,页次,以及破折虚线组成。我们将章节标题建立链接以a标签组织。页次用行内元素span标签组织。这两部分内容分别处于一个独立的列表项li中。虚线的效果以li的背景图片来实现。

  本文作者:52CSS.com 如需转载请建立本站链接(http://www.52css.com/),并且不得随意改动文章内容、保留此版权声明文本!

  我们看最终的完成效果图:

  

 

  下面开始HTML编码:

  1. <ul> 
  2.     <li><a href="http://www.52css.com/article.asp?id=947">杂谈24则CSS网页布局开发小技巧 </a><span>9</span></li> 
  3.     <li><a href="http://www.52css.com/article.asp?id=946">css expression属性将javascript与css结合起来 </a><span>719</span></li> 
  4.     <li><a href="http://www.52css.com/article.asp?id=945">CSS网页布局及网站开发常犯的几种错误 </a><span>329</span></li> 
  5.     <li><a href="http://www.52css.com/article.asp?id=941">CSS控制字符宽度省略号效果 兼容浏览器 </a><span>152</span></li> 
  6.     <li><a href="http://www.52css.com/article.asp?id=939">一个IE6在no-repeat情况下依然重复背景图片的BUG </a><span>1000</span></li> 
  7.     <li><a href="http://www.52css.com/article.asp?id=938">完善IE中伪类:hover的使用及BUG 续 </a><span>10</span></li> 
  8. </ul> 

  这就是一个典型的UL无序列表。在列表项LI中存在着A和SPAN两种元素。以CSS对其进行样式定义。

  1. ul {  
  2. width:480px;  
  3. margin:0 auto;  
  4. padding:8px 0;  
  5. border:1px solid #ccc;  

  对UL进行总体样式定义。整体水平居中对齐。  

  1. ul li {  
  2. width:450px;  
  3. height:28px;  
  4. margin:0 auto;  
  5. list-style-type:none;  
  6. background:url(line_bg.gif) repeat-x 0 13px;  

  设置列表项的宽高,定义背景图片为水平方向重复,垂直方向居于13px的位置。

  1. ul li a {  
  2. float:left;  
  3. height:28px;  
  4. padding:0 5px 0 0;  
  5. line-height:28px;  
  6. font-size:14px;  
  7. color:#00f;  
  8. text-decoration:none;  
  9. background:#fff;  

  定义A元素的CSS样式。设置向左浮动后自动转换为块元素,定义高度与右内边距。特别注意需要设置背景色为白色#fff。避免了文字下面出现LI的背景虚线。

  定义SPAN元素的CSS样式。其原理与A元素类似。最终以CSS实现了用ul+li打造图书目录的效果。

  1. ul li span {  
  2. float:right;  
  3. height:28px;  
  4. padding:0 0 0 5px;  
  5. line-height:28px;  
  6. font-size:14px;  
  7. color:#666;  
  8. background:#fff;  

  本文作者:52CSS.com 如需转载请建立本站链接(http://www.52css.com/),并且不得随意改动文章内容、保留此版权声明文本!

    顶一下
    (2)
    100%
    踩一下
    (0)
    0%
    【责任编辑:绝口不提】 标签:
    最新评论 查看所有评论
    发表评论 查看所有评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    评价:
    表情:
    用户名:密码:验证码: