您的位置:首页 > DIV CSS实例 > 【 返回上一页

div css行数实现 css显示行数序列值布局

div css布局中常常遇到文章标题列表前有序号(1-10)排版布局,如何简单实现这类新闻文章标题列表排版布局呢?如看到列表布局前有1 2 3 4 5 6 7等数字顺序。

类似带有序数字顺序布局效果图
类似带有序布局效果图

一、布局思维讲解

可能遇到这样的布局第一反应你会想到有序标签ol li的使用,但这里ThinkCSS告诉你因为浏览器版本比较多而不同浏览器对ol li有序列表默认自带的序号列表有着不同显示,这样容易引起浏览器兼容问题,所以遇到这样的有序排版布局,最简单是将序号切成背景图片,CSS布局时作为ul或ol背景图片达到一样的排版布局效果。

但通常我们对ul使用比较多,所以虽然是有序列表当然这里也使用ul li实现这个布局。

这里关键时如何切出图片素材便于布局。ThinkCSS推荐一次性整切图片作为背景图片素材。


切出这样完整竖条图片作为DIV+CSS布局素材,可另存为保存使用

二、实例具体布局代码(HTML+CSS)

在引人ThinkCSS初始化模板基础上进行案例代码布局。

1、HTML代码

  1. <ul class="array"> 
  2. <li><a href="http://www.thinkcss.com/texiao/745.shtml">
    不间断每次滚动一条数据DIV CSS Js滚动特效</a></li> 
  3. <li><a href="http://www.thinkcss.com/wenti/744.shtml">父级容器盒子div高度不能自适应解决</a></li> 
  4. <li><a href="http://www.thinkcss.com/wenti/743.shtml">为什么div css网页在FF浏览器中不能水平居中呢</a></li> 
  5. <li><a href="http://www.thinkcss.com/w3c/742.shtml">XHTML(div css)编码七条基本规范</a></li> 
  6. <li><a href="http://www.thinkcss.com/shili/733.shtml">左边logo 右边广告图片布局 div css左右浮动布局实例</a></li> 
  7. <li><a href="http://www.thinkcss.com/shili/731.shtml">一个DIV+CSS代码布局的简单导航条</a></li> 
  8. <li><a href="http://www.thinkcss.com/shili/730.shtml">DIV CSS绝对定位布局案例 position布局实例</a></li> 
  9. <li><a href="http://www.thinkcss.com/shili/699.shtml">ul li css隔行换色 css li列表布局隔行背景颜色不</a></li> 
  10. </ul> 

2、CSS代码

  1. ul.array{ margin:0 auto; width:300px; background:url(m-top.gif) no-repeat 0 5px} 
  2. ul.array li{ height:30px; line-height:30px; text-align:left; overflow:hidden;
     width:100%; text-indent:28px} 

3、效果截图

浏览器效果截图CSS有序列表布局
浏览器效果截图CSS有序列表布局

4、完整HTML源代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>有序列表布局 ThinkCSS 在线演示</title> 
  6. <link href="images/style.css" rel="stylesheet" type="text/css" /> 
  7. <!-- www.thinkcss.com --> 
  8. </head> 
  9. <body> 
  10. <ul class="array"> 
  11. <li><a href="http://www.thinkcss.com/texiao/745.shtml">
    不间断每次滚动一条数据DIV CSS Js滚动特效</a></li> 
  12. <li><a href="http://www.thinkcss.com/wenti/744.shtml">父级容器盒子div高度不能自适应解决</a></li> 
  13. <li><a href="http://www.thinkcss.com/wenti/743.shtml">为什么div css网页在FF浏览器中不能水平居中呢</a></li> 
  14. <li><a href="http://www.thinkcss.com/w3c/742.shtml">XHTML(div css)编码七条基本规范</a></li> 
  15. <li><a href="http://www.thinkcss.com/shili/733.shtml">左边logo 右边广告图片布局 div css左右浮动布局实例</a></li> 
  16. <li><a href="http://www.thinkcss.com/shili/731.shtml">一个DIV+CSS代码布局的简单导航条</a></li> 
  17. <li><a href="http://www.thinkcss.com/shili/730.shtml">DIV CSS绝对定位布局案例 position布局实例</a></li> 
  18. <li><a href="http://www.thinkcss.com/shili/699.shtml">ul li css隔行换色 css li列表布局隔行背景颜色不</a></li> 
  19. </ul> 
  20. </body> 
  21. </html> 

5、完整CSS代码

  1. @charset "utf-8"; 
  2. /* ThinkCSS-CSS-www.thinkcss.com */ 
  3. body, div, ul, li{margin:0; padding:0;font-style: normal;
    font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif} 
  4. ol, ul ,li{list-style:none} 
  5. img {border: 0; vertical-align:middle} 
  6. body{color:#000000;background:#FFF; text-align:center} 
  7. a{color:#000000;text-decoration:none}  
  8. a:hover{color:#BA2636;text-decoration:underline} 
  9.  
  10.  
  11. ul.array{ margin:0 auto; width:300px; background:url(m-top.gif) no-repeat 0 5px} 
  12. ul.array li{ height:30px; line-height:30px; text-align:left;
     overflow:hidden; width:100%; text-indent:28px} 

三、在线演示与下载

1、在线演示

查看案例

2、完整实例打包下载(图片素材+CSS文件+HTML文件

相关标签: 列表 排序
如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/shili/748.shtml

日期:2014-09-13 14:22:02 来源:www.thinkcss.com 作者:ThinkCSS

热门点击