纯css实现序列行数值排序

官方金沙娱乐赌场网站_赌博娱乐注册送18现金,商品房待售面积创28个月最低三四线城市成去化主力,本文系作者授权钛媒体发表,并经钛媒体编辑,转载请注明出处、作者和。,  雷霆vs老鹰,雷霆今天还要迎战鹈鹕。

这里关键时如何切出图片素材便于布局。511遇见推荐图片作为背景图片素材,这样提高了浏览器的兼容性。为什么不用Ol,li,因为浏览器版本比较多而不同浏览器对ol li有序列表默认自带的序号列表有着不同显示,这样容易引起浏览器兼容问题,所以遇到这样的有序排版布局,最简单是将序号切成背景图片!!!

511遇见

Html结构

  1. <ul class="array"> 
  2.     <li><a href="http://www.513jianzhu.com/centos-epel-yum.html">Centos6.x上安装EPEL</a></li> 
  3.     <li><a href="http://www.513jianzhu.com/bootstrap-panels-default.html">Bootstrap教程 面板(Panels)</a></li> 
  4.     <li><a href="http://www.513jianzhu.com/centos-web-php.html">centos6.x安装web开发环境nginx-php</a></li> 
  5.     <li><a href="http://www.513jianzhu.com/centos-nginx-web.html">centos6.x下修改nginx服务网站目录</a></li> 
  6.     <li><a href="http://www.513jianzhu.com/centos-hosts-hostsname.html">centos6.x配置虚拟主机名及域名hosts</a></li> 
  7.     <li><a href="http://www.513jianzhu.com/centos-yum-kernel.html">centos6.4或者6.5使用yum的elrepo源升级内核</a></li> 
  8.     <li><a href="http://www.513jianzhu.com/centos-yum-php.html">centos7.2yum安装php70w.x86_64</a></li> 
  9.     <li><a href="http://www.513jianzhu.com/centos-update-kernel.html">centos6.4或者6.5编译升级内核3.10.28</a></li> 
  10. </ul>

CSS布局

  1.  ul.array{
  2.    margin:0 auto; 
  3.    width:300px; 
  4.    background:url(m-top.gif) no-repeat 0 5px
  5. } 
  6.  ul.array li{ 
  7.    height:30px; 
  8.    line-height:30px; 
  9.    text-align:left; 
  10.    overflow:hidden;
  11.    width:100%; 
  12.    text-indent:28px
  13. }

整体Html源码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>纯css实现序列行数值排序(附源码)</title> 
  6. <link href="images/style.css" rel="stylesheet" type="text/css" /> 
  7. <!-- www.511yj.com --> 
  8. </head> 
  9. <body> 
  10. <ul class="array"> 
  11.     <li><a href="http://www.513jianzhu.com/centos-epel-yum.html">Centos6.x上安装EPEL</a></li> 
  12.     <li><a href="http://www.513jianzhu.com/bootstrap-panels-default.html">Bootstrap教程 面板(Panels)</a></li> 
  13.     <li><a href="http://www.513jianzhu.com/centos-web-php.html">centos6.x安装web开发环境nginx-php</a></li> 
  14.     <li><a href="http://www.513jianzhu.com/centos-nginx-web.html">centos6.x下修改nginx服务网站目录</a></li> 
  15.     <li><a href="http://www.513jianzhu.com/centos-hosts-hostsname.html">centos6.x配置虚拟主机名及域名hosts</a></li> 
  16.     <li><a href="http://www.513jianzhu.com/centos-yum-kernel.html">centos6.4或者6.5使用yum的elrepo源升级内核</a></li> 
  17.     <li><a href="http://www.513jianzhu.com/centos-yum-php.html">centos7.2yum安装php70w.x86_64</a></li> 
  18.     <li><a href="http://www.513jianzhu.com/centos-update-kernel.html">centos6.4或者6.5编译升级内核3.10.28</a></li> 
  19. </ul> 
  20. </body> 
  21. </html>

整体css源码

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

说明

这里用到了背景图片m-top.gif,颜色根据自己网站的风格,设计或者下载一个就可以了。


发布日期:

所属分类: Css/Html5 标签: