教程 | 美化小工具标题

亲奈的大家，我又来发教程了。嘻，是关于美化小工具标题的哟。希望这篇教程可以给大家更多的 idea 来美化你们的小工具标题。对了，最近的热门话题 —— 2006 年模板。很明显的，新界面已经去除了这个模板。只是不明白的是，为什么有些人那么喜欢跟风？就算是新模板也可以把部落格设计的很美啊。干嘛要费心思去找？为的是什么？算了，我也不要多说什么。免得被人说成无事找事来吵 /3//

好了，进入正题了哟——

- Tutorial requested by KC -

还没介绍各种类型的美化方法时，先给大家知道一下，若要美化小工具标题的话，要将代码添加在 h2 {...} 里面哟。记住了哟。

类型 1 - 为小工具标题添加分割线

text-align: center;
background: url(图片url) no-repeat left;
padding-top: 3px;
padding-left: 3px;
padding-right: 3px;
padding-bottom: 15px;

蓝色代码：分割线的图片 url
紫色代码：字体的位置（left / center / right）
紫色代码：调整数目的大小来调整你的分割线还有标题的位置

类型 2 - 为小工具添加特别的背景

background: #CCC1BA;
text-align: center;
padding: 3px;
line-height: 3px;
margin-top: 10px;
margin-bottom: 10px;
font-size: 19px;

红色代码：背景的颜色 / 图片的 url

类型 3 - 为小工具标题添加框框

background: #fecdc9;
padding: 5px;
text-align: center;
border: 2px solid #ccc;
margin-bottom: 15px;

红色代码：背景的颜色 / 也可以改成图片哟
蓝色代码：标题的位置（left / center / right）
紫色代码：边框的粗度 / 类型 / 颜色代码）
青色代码：标题距离内容的距离

类型 4 - 为小工具标题添加形状框框

background: #fecdc9;
padding: 5px;
text-align: center;
border: 2px solid #ccc;
margin-bottom: 15px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px; 
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;

红色代码：背景的颜色 / 也可以改成图片哟
蓝色代码：标题的位置（left / center / right）
紫色代码：边框的粗度 / 类型 / 颜色代码）
青色代码：标题距离内容的距离
橙色代码：形状框框的代码（可查询此帖）

先提供几款美化小工具标题的方法。等我再找到更多的 idea 的时候，会分享给大家哟。对了，以上提供的代码都只是针对我 capture 的图的设计提供的，当然啦，你们也可以在自己添加自己想要的效果。例如更换字体类型 / 大小 / 颜色等等等，都可以自己添加噢。希望此教程会带给你们更多的想法，码字愉快 !!