本页主题: 论坛风格系列教程_帖子标题的几个CSS定义实例 打印 | 加为IE收藏 | 复制链接 | 收藏主题 | 上一主题 | 下一主题

大群
方便别人 提高自己
终身成就奖 金点子奖
级别: 管理员


精华: 24
发帖: 1638
威望: 1821 点
金钱: 13580 RMB
贡献值: 500 点
注册时间:2006-02-22
最后登录:2008-10-10

 论坛风格系列教程_帖子标题的几个CSS定义实例

我对论坛中帖子的标题字体进行了重新定义,改变了字体的大小和色彩,有的会员问是如何修改的虽然已经回答,但随后想何不写个简单教程与大家分享,就算是抛砖引玉,下面切入正题:

.tpc_title { font-size: 12px;font-weight:bold;}
  这个CSS定义大家都知道,这是对论坛帖子标题字体的定义,下面我们例举几个实例对其颜色、尺寸、字体进行修改,让你论坛帖子内的标题和内容截然不同,打造你自己的风格,非常诱惑人不是吗?

一、 先认识一下原始定义
.tpc_title { font-size: 12px;font-weight:bold;}
12点大小加粗字体,效果就象图 1 显示的



图 1 原始定义标题字体



二、 现在我们改变字体的颜色和尺寸,超级酷的标题:
.tpc_title {font-weight: bold; font-size: 14px;color: #ff0000;text-decoration: underline}
14点大小加粗字体,字体红色下划线,就象图 2 显示的。



图 2 改变字体颜色的标题



三、 接着,我们取消文字的下划线而是在下面增加一条1点宽的灰色边框,以增强清晰度。当然边框宽度和色彩你可以随意设置。(看图3)
.tpc_title {font-weight:bold;font-size: 14px;color: #ff0000;padding-bottom: 4px;border-bottom: 1px solid #999;}



图 3 有下边框的样式化标题



四、 增加背景:我们在文字的下方增加了一点补白,来让线条附近宽松一点。值得指出的是,这个特别的创建边框的方法是一个由三部分组成的语句:宽度、式样、颜色。试着改变它们的值,看看会产生什么不同的效果。背景可以增强标题的整洁效果。增加一点补白和背景颜色,我们就有了一个不需要图片的,但又很有样子的标题。
.tpc_title {font-weight:bold;font-size: 14px;color: #fff;padding: 4px;background-color: #ff0000;}

我们把文字改成白色,周围加上4个点的补白,再把背景改成红色。就象图4显示的那样,这可以建立一个好看的色彩条来横贯页面,分隔段落。



图 4: 带有背景色和补白的标题



五、 背景和边框:在标题下面增加一个窄窄的边框,加上淡淡的背景色,你能够创建一种三维的效果,却不需使用图片。这个CSS和前面的例子很相似,仅仅改变一点颜色和在底部增加一个2点宽的边框。见图5
.tpc_title {font-weight:bold;font-size: 14px;color: #666;padding: 4px;background-color: #ddd;border-bottom: 2px solid #ccc;}



图 5 带有背景和下部边框的标题


试着创建各种不同的同色阴影,产生的立体效果会不近相同。


六、 平铺的背景:当背景图片被一起加入后,就变得更富有创造性了。用Photoshop或者你喜欢的图片编辑器,创建一个10*10 的图片,图片的顶部有黑色的边框,渐变的灰色一直到底部,象图6-1显示的。


图6-1 在Photoshop中创建10×10点大小的图片


我们可以用CSS把这个极小的图片平铺在帖子标题字体的底部:
.tpc_title {font-weight:bold;font-size: 14px;color: #369;padding-bottom: 14px;background: url(10x10.gif) repeat-x bottom;}

repeat-x会通知浏览器仅在水平方向平铺(repeat-y 将在垂直方向平铺)。我们再把图片设置在bottom,又增加了额外的padding-bottom,我们可以调节平铺的图片和上面文字之间的距离。(看图6-2)



图6-2 带有平铺背景的标题



七、 标题文字前加入图标: 我们可以继续使用CSS的background属性来把图标设置在帖子标题文字左边。代码和前面平铺的背景范例很相似;比如把下面的这个图标   加入在标题前:

.tpc_title {font-weight:bold;font-size: 14px;color: #369;padding-left: 30px;background: url(icon.gif) no-repeat 0 50%;}

这里,我们在左边留出了额外的空间(在那儿我们将显示一个图标),设为no-repeat,是为了让icon.gif 背景图片只显示一次。我们把 icon.gif 放置在距离首部0点和距离顶部50%的位置上。(看图7)



图 7 带有图标的标题


这几个实例只是为了说明只要灵活的对CSS的应用,比如:标题的字体,大小,色彩,背景色,图标等你都可以根据自己的需要进行定义以打造你自己的风格,希望能抛砖引玉。



.
千百度工作室网站      汽车报废服务 
Posted: 2007-05-06 16:41 | [楼 主]
lbdl
特殊贡献奖 在线王勋章
级别: 总版主


精华: 7
发帖: 973
威望: 1011 点
金钱: 8470 RMB
贡献值: 100 点
注册时间:2006-06-29
最后登录:2008-07-29

 

很实用的教程,通俗易懂,希望大家看过之后多多交流?
我的论坛
Posted: 2007-05-14 07:59 | 1 楼
gjjx
级别: 新手上路


精华: 0
发帖: 35
威望: 41 点
金钱: 350 RMB
贡献值: 1 点
注册时间:2007-12-11
最后登录:2008-03-26

 

这个非常好。。

我去试下
偶的论坛:http://bbs.2y2r.org欢迎你光临
Posted: 2007-12-12 14:41 | 2 楼
帖子浏览记录 版块浏览记录
千百度工作室 » 论坛风格 Style