【css+div】css样式实例分析笔记-数字列表排行布局

林氏智造 于 2013-12-08 发布 2639 人已阅

【写在前面】

今天抽了点时间分析了多玩首页的数字排行列表布局,又让自己有了新的思路。


【效果图】


【实现方法】
第一种方法(自己以前用的)

HTML

    <ul class="art">
     <li class='n1'><a title="如此淫荡怎能不脸红?盘点日本邪恶互动游戏" href="#">如此淫荡怎能不脸红?盘点日本邪恶互动游戏</a></li> 
     <li class='n2'><a title="魔兽世界史上最难boss 那些NPND的不破神话" href="#">魔兽世界史上最难boss 那些NPND的不</a></li> 
     <li class='n3'><a title="还是当年那只魔兽么?盘点魔兽世界中的绝版物品" href="#">还是当年那只魔兽么?盘点魔兽世界中的绝版物</a></li> 
     <li class='n4'><a title="《女生射击》内裤款式423种有望创世界纪录" href="#">《女生射击》内裤款式423种有望创世界纪录</a></li> 
     <li class='n5'><a title="阴霾下的真相  暗黑破坏神3前四幕读取画面曝光" href="#">阴霾下的真相  暗黑破坏神3前四幕读取画面</a></li> 
     <li class='n6'><a title="多玩首爆《大宋》封测皇城争夺战图文攻略" href="#">多玩首爆《大宋》封测皇城争夺战图文攻略</a></li> 
     <li class='n7'><a title="《星球大战OL》将以故事性取胜 成为网游王者?" href="#">《星球大战OL》将以故事性取胜 成为网游王</a></li> 
     <li class='n8'><a title="《光荣使命》军用版大量截图 巷战夜战载具全登场" href="#">《光荣使命》军用版大量截图 巷战夜战载具全</a></li> 
     <li class='n9'><a title="传零世界即将开测 计划赶追“末日”倒计时" href="#">传零世界即将开测 计划赶追“末日”倒计时</a></li> 
     <li class='n10'><a title="佣兵不只是一个传说 《大宋》佣兵系统介绍" href="#">佣兵不只是一个传说 《大宋》佣兵系统介绍</a></li> 
   </ul>

CSS:这种实现方法只需要控制不同class的li背景即可。

不足:在嵌套程序的时候,需要根据class的规则循环数据,给后台程序员添加了麻烦。

第二种方法(多玩前端使用)

HTML

     <ul class="art">
     <li><a title="如此淫荡怎能不脸红?盘点日本邪恶互动游戏" href="#">如此淫荡怎能不脸红?盘点日本邪恶互动游戏</a></li> 
     <li><a title="魔兽世界史上最难boss 那些NPND的不破神话" href="#">魔兽世界史上最难boss 那些NPND的不</a></li> 
     <li><a title="还是当年那只魔兽么?盘点魔兽世界中的绝版物品" href="#">还是当年那只魔兽么?盘点魔兽世界中的绝版物</a></li> 
     <li><a title="《女生射击》内裤款式423种有望创世界纪录" href="#">《女生射击》内裤款式423种有望创世界纪录</a></li> 
     <li><a title="阴霾下的真相  暗黑破坏神3前四幕读取画面曝光" href="#">阴霾下的真相  暗黑破坏神3前四幕读取画面</a></li> 
     <li><a title="多玩首爆《大宋》封测皇城争夺战图文攻略" href="#">多玩首爆《大宋》封测皇城争夺战图文攻略</a></li> 
     <li><a title="《星球大战OL》将以故事性取胜 成为网游王者?" href="#">《星球大战OL》将以故事性取胜 成为网游王</a></li> 
     <li><a title="《光荣使命》军用版大量截图 巷战夜战载具全登场" href="#">《光荣使命》军用版大量截图 巷战夜战载具全</a></li> 
     <li><a title="传零世界即将开测 计划赶追“末日”倒计时" href="#">传零世界即将开测 计划赶追“末日”倒计时</a></li> 
     <li><a title="佣兵不只是一个传说 《大宋》佣兵系统介绍" href="#">佣兵不只是一个传说 《大宋》佣兵系统介绍</a></li> 
    </ul>
CSS

.art {
    background: url(images/bg_rank_02.png) no-repeat scroll 0 10px transparent;
    margin: 0 10px;
    padding: 4px 0 0 10px;
}
.art li {
    height: 22px;
    line-height: 22px;
    overflow: hidden;
    padding-left: 10px;
   width:158px;
}
.art li a{font-size:12px; color:#666666;}
.art li a:hover{ color:#FF66FF;}  

从样式设置可以看出,排行数字的图片直接设置在ul的背景上面,通过精准的计算,让每个li都排在准确的位置。

好处:后台程序员只需要循环li就可以了,不用考虑其他的逻辑。

不足:这种方法真的要说不足,那就是图片的设计需要很精确。囧~~~~~~~~~~

【写在后面】
做为一个切图苦逼,真是需要多看看别人的样式设计,才能更好的扩展自己的思路;搞技术的必须要多多交流,取其长补自短。

标签

您可能感兴趣的文章

如何优雅的选择字体(font-family)

当前项目对字体要求很高,之前对font-family这个属性没怎么仔细去研究它,现在整理了一个通用方案适合大多数网站使用。

React+webpack 部署概要

React+webpack 组合已经成为开发react的经典搭配,把常用的webpack配置文件和一些react的常用代码规范记录下方便以后开发使用

gulp前端自动化部署方案

gulp 前端自动化代码,根据自己的项目需求编写,包括压缩合并css,压缩合并js,雪碧图,版本号插入等功能

纯CSS制作各种图形

用图片做图标会加大页面的大小,现在能用CSS写图标就用CSS写,维护起来也方便加载速度也快