如何通过css和通用标签做一个简单的排名的标签_CSS教程_建站知识

如何通过css和通用标签做一个简单的排名的标签

作者：阿洪来源：本站原创点击数：次发布时间：2012年01月11日

1,预览要做出的图形效果：

第一：需要准备的材料：素材两张如下图所示：

标题背景图：

名称为1.jpg

排名图片(记住，排名图片是一张，无需什么判断即可)：

名称为:2.jpg

第二：使用网页编辑器或者文档(对html熟悉)：

在这里面定义css样式

在之间添加内嵌定义css样式的代码，或者引用其他css文件都可以；

1.首先在中间添加一个div标签

在中间定义这个名称为zhang 的样式如下：

.zhang { width:300px;} 定义下宽度就行了；

2 在

这个div标签中添加一个标签如下：

文章标题

得到的然后给zhang1这个样式定义下：

.zhang1 { height:30px; background:url(images/1.jpg); color:#FFFFFF; }

记住我们给zhang1定义了一个背景选择我们提供的1.jpg

高度您自己给一个适合的高度即可，这里我们定义为30px;

浏览器预览：

主要代码如下：

.zhang { width:300px;}

.zhang1 { height:30px; background:url(images/1.jpg); color:#FFFFFF; }

文章标题

3.再在这个div中再添加一个div 作为文章标题的

这个标签的样式这里定义为zhang2 在这个div中添加ul 给它定义样式，这里选择2.jpg为背景。 .zhang2 ul { background:url(images/2.jpg) scroll no-repeat 10px 0px; paddin-left:30px;}

然后给 ul中添加 li 给li定义样式：

.zhang2 ul li { list-style:none; height:26px;} 样式自己按照自己喜欢的定义即可；

这里，只要将动易系统的文章列表标签放在ul中即可，我们就写一些li字眼代替：

然后在li中添加作者，在动易系统中也是调用出来的，我们只要给作者的样式定义就可以

这里，我们定义

span的样式：.zhang2 ul li span {float:right; padding-right:10px;}

由于浮动是从右边的，所以，我们将放在文章标题前面：

这就是

作者1中国第一

其他的类推

文章标题

{PE.Label id="通用信息列表" bindStyle="普通式" outputQty="10" titleLength="46" nodes="3" displayInputer="true" /}

给标题的链接加一些链接样式：

.zhang2 ul li a:visited {color: #000000;}

.zhang2 ul li a:hover {color: #FF0000;}

.zhang2 ul li a:link {color: #000000;text-decoration: underline;}

.zhang2 ul li span {float:right; padding-right:10px;}

这里定义在zhang2 这个样式中，以免影响其他的链接，完成后初步效果图；

我们再定义一个boder 给整个加上一个边框：

.boder { border: 1px solid #4fa2e4;} 可以样式可以嵌套使用在zhang 里面

这样就完成了

整个样式的定义