越努力越幸运。
不管如何,我比你努力,比你好,比你更问心无愧。

2017.02.22

教程 | 美化小工具标题

亲奈的大家,我又来发教程了。嘻,是关于美化小工具标题的哟。希望这篇教程可以给大家更多的 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 的图的设计提供的,当然啦,你们也可以在自己添加自己想要的效果。例如更换字体类型 / 大小 / 颜色等等等,都可以自己添加噢。希望此教程会带给你们更多的想法,码字愉快 !!

12 comments:

  1. Replies
    1. 这个就是 BT 的教程呀。

      -replied by Bii.

      Delete
  2. Replies
    1. h2 是小工具标题的代码。
      更改 h2 {...} 里的代码,就可以更改小工具标题的设计。

      -replied by Bii.

      Delete
  3. 做不成的?怎么回事?找到了 h2 照着这样做也不行.

    ReplyDelete
    Replies
    1. 应该是你吧代码放错了 :)
      整个教程没那么复杂的其实, 又或者你在添加代码的过程中不小心删了 / 多添加了某代码。
      请你再试多几次, 如果还是不可以, 麻烦你 print screen 给我看, 然后 inbox 去我的 FB.

      *https://www.facebook.com/ShehJing

      -replied by Bii.

      Delete
  4. 类型三的 他没有好像你的 那个后面的长方形比较 细的
    反而我弄了 它是根据 标题大小然后 一个长方形 盒子型 的 背景
    打过那个 Gadget title 了

    ReplyDelete
    Replies
    1. 类似三的那个背景当然是大过 gadget title 啊 =]
      有什么问题 ?

      -replied by Bii.

      Delete
    2. 你的部落格是 ?
      留下你的网址,顺便 print screen 失效的示例图给我看
      inbox 去我的专页 / 把图片的网址留在 cbox 给我看 =]

      -replied by Bii.

      Delete
  5. 如果这些全都放应该可以吧? :O

    ReplyDelete
    Replies
    1. 当然不可以 ==

      -replied by Bii.

      Delete

っ 谢谢你耐心的看完这篇帖子 ♥
っ 评论将在博主审核后发布,如有不便,敬请原谅哦 :)
っ 除了评论之外,亲也可以选择在 Cbox 留言或 PM 我的部落格专页信箱

ベ 请用词确切,勿使用脏字哟
ベ 部落格不接受匿名评论,评论前请确保你拥有 Google Account 哦
ベ 请仔细列明你的问题好方便我回答哦 :)

* 感谢你的留言,欢迎下次再来。