正文

css排行榜样式,css样式大全

IP云
IP云V管理员/10 阅读
11/24
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

运用最广的css样式是

运用最广的css样式将页面内容与样式彻底分离,极大地改善了HTML在页面显示方面的缺陷。

body {font: 10pt "Arial"}h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon}h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue}p {font: 10pt/12pt "Arial"; color: black}。

css样式易于使用和修改：

CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。

另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。

相关问答

Q1: 求用css样式制作一个205*240像素的top10排行榜样式，就像这样的，谢谢，

你好，在吗，205*240是ul的宽高，前面1，2，3，li的背景是蓝色的，后面的是灰色的就可以了，

ul

li class=“blue”1/li

li class=“blue”2/li

li class=“blue”3/li

li4/li

li5/li

li6/li

li7/li

li8/li

li9/li

li10/li

/ul

在css样式里面

ul li｛background:url(灰色图片路径)｝

ul li.blue｛background:url(蓝色图片路径)｝

如果还有不知道的，可以加1028392399，希望可以帮到你

Q2: 如何制作wordpress读者墙

以下是wordpress读者墙代码：

div id=”hotfriends”

h330天内最活跃的读者/h3

ul

?php

/**

* WordPress制作读者评论排行榜

*/

global $wpdb;

// 执行数据库查询

$counts = $wpdb-get_results(“SELECT COUNT(comment_author) AS cnt, comment_author, comment_author_url, comment_author_email

FROM {$wpdb-prefix}comments

WHERE comment_date date_sub( NOW(), INTERVAL 1 MONTH )

AND comment_approved = ’1′

AND comment_author_email != ‘example@example.com’

AND comment_author_url != ”

AND comment_type = ”

AND user_id = ’0′

GROUP BY comment_author_email

ORDER BY cnt DESC

LIMIT 15″);

$mostactive = ”;

if ( $counts ) {

// 输出读者列表

foreach ($counts as $count) {

$c_url = $count-comment_author_url;

$mostactive .= ‘li’ . ‘a href=”‘. $c_url . ‘” title=”‘ . $count-comment_author .’ 发表 ‘. $count-cnt . ‘ 条评论” target=”_blank”’ . get_avatar($count-comment_author_email, 55, ”, $count-comment_author . ‘ 发表 ‘ . $count-cnt . ‘ 条评论’) . ‘/a/li’;

}

echo $mostactive;

}

?

div style=”clear:both;”/div

/ul

/div !– / hotfriends –

保存时存为utf-8格式，不然会出现乱码。

以下为wordpress读者墙代码参数，大家可以根据自己的需求来设定：

1、限定读者排行榜时间范围

代码 时间范围

INTERVAL 1 MONTH 最近一个月内

INTERVAL 3 YEAR 最近3年内

INTERVAL 2 WEEK 最近2周内

INTERVAL 6 DAY 最近6天内

如果只想显示本月的排行榜，将代码

WHERE comment_date date_sub( NOW(), INTERVAL 1 MONTH ) 改为

WHERE MONTH(comment_date)=MONTH(NOW()) and year(comment_date)=year(now()) 即可。

2、限定评论是否审核

AND comment_approved = ’1′ 用于限定只统计已经通过审核的评论，如果你想统计未通过审核的评论，你可以将这一句代码删除。

3、排除某些读者

AND comment_author_email != ‘example@example.com’ 用于排除不计入榜单的评论者，例如博主自己，将email地址改成博主的Email即可。使用评论者的Email作为限定条件比昵称更好，毕竟头像也是由Email决定的。如果你想排除多个评论者，可以多写几行类似的代码，Email不同即可，如：

AND comment_author_email != ‘example1@example.com’

AND comment_author_email != ‘exam2@exam.com’

4、是否包括不填URL的评论者

AND comment_author_url != ” 排除没填URL的评论者，也就是那些没有网站的评论者将无法进入你的排行榜。

5、限定评论的类型

AND comment_type = ” 限定了评论的类型，这行代码排除了 trackback 和 pingback，如果你还想统计这两种评论类型，你可以将此行代码删除。

6、是否包含博客的注册用户

AND user_id = ’0′ 使排行榜中不包含博客的注册用户(包括博主)，注册用户将无法进入你的排行榜。如果你的博客有大量的注册用户，或者你的博客只有博主这个注册用户，你可以将此行代码删除。

7、限定排行榜中的人数

代码中 LIMIT 15 用于限定排行榜中的人数，这里限制输出15位读者，你可以根据需要做一下更改。

8、限制头像的大小

代码中的 55 限定了输出的头像大小为 55 * 55，如果你不需要这么大的尺寸，你可以将这个数值改小点。

CSS样式，也就是控制这个排行榜怎么显示的代码。复制到主题目录下的style.css中即可，你可以根据需要做些更改，CSS样式如下：

#hotfriends {

text-align:center;

}

#hotfriends ul {

padding:7px;

}

#hotfriends ul li {

float:left;

list-style:none outside none;

margin:6px;

padding:0;

}

#hotfriends h3 {

font-size:15px;

margin:7px 7px 0;

}

使用方法：

可以把代码放在 single.php、sidebar.php、page.php等中，当然也可以为读者墙制作独立页面

Q3: css样式设置排行榜效果

给你做了一个，美化的工作交给你啦，不过我看还可以，兼容性没什么问题。

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title无标题文档/title

style type="text/css"

!--

#zhuti{

width:280px;

}

#uu{

margin:0px;

padding:0px;

}

.h{

width:280px;

margin:0px;

list-style-type: none;

font-size:13px;

color:#0066FF;

line-height:39px;

padding-left:15px;

}

.xianshi{

width:280px;

height:45px;

border:2px #FF9900 solid;

background-color:#FFF3E8;

padding-top:10px;

margin:0px;

list-style-type: none;

font-size:12px;

font-weight:bold;

color:#0066FF;

padding-left:15px;

display:none;

}

--

/style

script

var num=12; //确定li数量。

function a() //网页加载的时候设置li背景颜色。

{

var a=document.getElementById("uu").getElementsByTagName("li");

for(var i=0;inum;i++)

{

if((i%2)==1) a[i].style.display="none";

if((i%4)==0) a[i].style.backgroundColor="#dddddd"; //设置li的背景颜色。

}

}

function over(n)

{

var a=document.getElementById("uu").getElementsByTagName("li");

for(var i=0;inum;i++) //一个循环让鼠标经过的li显示对应的装有详细内容的li。

{

if((i%2)==1) a[i].style.display="none";

else

a[i].style.display="block";

}

a[n].style.display="none";

a[n+1].style.display="block";

}

/script

/head

body onload="a()"

div id="zhuti"

ul id="uu"

li class="h" onmouseover="over(0)"知性OL－简约大方通勤必备 /li

li class="xianshi"知性OL－简约大方通勤必备知性OL－简约大方通勤必备br /font color="#CC0000"淘宝价：xx/font/li

li class="h" onmouseover="over(2)"淑女系－可爱小女生最爱 /li

li class="xianshi"淑女系－可爱小女生最爱淑女系－可爱小女生最爱br /font color="#CC0000"淘宝价：xx/font/li

li class="h" onmouseover="over(4)"时尚派－柱形手提斜挎女包 /li

li class="xianshi"时尚派－柱形手提斜挎女包时尚派－柱形手提斜挎女包br /font color="#CC0000"淘宝价：xx/font/li

li class="h" onmouseover="over(6)"蝴蝶结－闪金淡蓝可爱单鞋 /li

li class="xianshi"蝴蝶结－闪金淡蓝可爱单鞋蝴蝶结－闪金淡蓝可爱单鞋br /font color="#CC0000"淘宝价：xx/font/li

li class="h" onmouseover="over(8)"坡跟鞋－韩版甜美坡跟凉鞋 /li

li class="xianshi"坡跟鞋－韩版甜美坡跟凉鞋坡跟鞋－韩版甜美坡跟凉鞋br /font color="#CC0000"淘宝价：xx/font/li

li class="h" onmouseover="over(10)"高跟鞋－复古小名媛圆头鞋 /li

li class="xianshi"高跟鞋－复古小名媛圆头鞋高跟鞋－复古小名媛圆头鞋br /font color="#CC0000"淘宝价：xx/font/li

/ul

/div

/body

/html

Q4: 如何实现css列表排行榜的特效

有两种思路：

1、利用JS，通过显示和隐藏Div的方法作到。当点了A链接，ADiv显示，其它的都隐藏；不过占用空间会很大，一次页面会把所有的都显示出来；

2、

script type="text/javascript"

$(document).ready(function(){

$.get("index.jsp",function(data){

$("#content").html(data);

alert(data);

});

})

/script