CSS怎么实现这样的排行榜效果(页 1) - 前台制作与脚本专栏 - 经典论坛网页-网站-制作-设计-编程

coolblood2005 发表于 2008-8-28 12:28

CSS怎么实现这样的排行榜效果

[img]http://i.namipan.com/files/4a9703b279b87baefe1163489f843e8a74ab097d503a0000ce4e/0/QQ%E6%88%AA%E5%9B%BE%E6%9C%AA%E5%91%BD%E5%90%8D.jpg[/img]

simplewebs 发表于 2008-8-28 12:32

左边背景像这样的做在一个图片里面放在UL里面，设置LI的height，text-align，然后把title float left

FFEEDD 发表于 2008-8-28 13:02

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
ul { list-style:none; font-size:12px; background:url(http://i.namipan.com/files/afe7d04e54c09187d54447c95e6cbc19885a84c7e948000039d8/0/num.jpg) left 6px no-repeat;}
li { padding-left:20px; line-height:23px;}

</style>
</head>

<body>
<ul>
<li>我试试我试试我试试我试试我试试我试试我试试</li>
<li>我试试我试试我试试我试试我试试我试试我试试</li>
<li>我试试我试试我试试我试试我试试我试试我试试</li>
<li>我试试我试试我试试我试试我试试我试试我试试</li>
<li>我试试我试试我试试我试试我试试我试试我试试</li>
<li>我试试我试试我试试我试试我试试我试试我试试</li>
<li>我试试我试试我试试我试试我试试我试试我试试</li>
<li>我试试我试试我试试我试试我试试我试试我试试</li>
<li>我试试我试试我试试我试试我试试我试试我试试</li>
<li>我试试我试试我试试我试试我试试我试试我试试</li>
</ul>
</body>
</html>

[/html]

gongwei8401 发表于 2008-8-28 13:03

个人方法：

1.一个外层box里面嵌套一个UL,解决问题。一个左一个右（单独写个box或者SPAN）。

2.直接一个UL也能达到效果，不过那设置起来费脑。

FreeCity 发表于 2008-8-28 13:18

嗯，很多种办法

xudong1987 发表于 2008-8-28 19:07

3楼把数字都放到一张图片了哦。。。

nick03 发表于 2008-8-28 19:28

<ul >
<li><a href="" title="">劲舞团</a><span>3494</span></li>
<ul>

a左浮动 span 右浮动。

xkang 发表于 2008-8-29 09:34

思路就是前图标用背景中文字用ul li 在中文字LI前家个<span>里面放日期，样式记得加浮动

xkang 发表于 2008-8-29 09:34

对了是，右浮动

页: [1]

经典论坛's Archiver

CSS怎么实现这样的排行榜效果