泪划痕
Best viewed in Google Chrome

2011年8月29日星期一

文章标题下添加分割线(B3B3兒)


-----------------------分割线----------------------
上图,在文章标题下添加分割线……
-----------------------开始----------------------
登入博客 - 信息中心 - 设计 - 修改HTML 

CTRL + F /* Posts

/* Posts
----------------------------------------------- */ 下面添加以下一款分割线代码……
第一款:图片的分割线
h3.post-title {
border-bottom: 5px solid #000000;
background:   url(图片URL) no-repeat scroll  left;
padding:0px 0px 45px 0px;
}
第二款:非图片的分割线
h3.post-title {
border-bottom: 5px solid #000000;
padding::0px 0px 5px 0px;
}

添加了后就会像下图:
保存模板。
---------------------小提示---------------------
红色字体 = 图片的网址URL
青色字体 = 数目越大,分割线越下
紫色字体 = 颜色代码
粉色字体 = 线条的类型,更换线条的类型看下图

52 道泪痕:

Mun ♥ ME 说...

謝謝喲 :D

мs иg снιиg ее 说...

请问哦、为什么会多条黑色分割线的 ?

独泪 说...

Mun ♥ ME
不客气地说 xDD

мs иg снιиg ее
你的是图片的分割线吗@@?
看看你的代码里是不是有 repeat
有的话把repeat改成 no-repeat 哦
^^

XiaoMui ♥ 说...
此评论已被作者删除。
MilkyLee ★ 说...

我要那個分割線在帖子最後那邊 怎麼弄

Ms.Lim 说...

可以把分割线缩短吗?><

独泪 说...

MilkyLee ★
唔,不是很明白地说,你指的是 跟帖子标题在一起么
可以更改 “青色字体” 为 0 ,那个可以调整位置

Ms.Lim
你的是“图片”的分割线么,可以用 美图秀秀 “裁剪” 修短它 =)

雯雯 说...

请问下有没有办法把单独的图片做成连在一起的分割线?

雯雯 说...

为什么会多条黑色的线条TT 我已经把repeat改成no-repeat 了><

独泪 说...

唔,可以用美图秀秀来合并哦 =)
唔,我看到你的是图画分割线,看到你成功了说,黑色线条分割线不用加任何repeat或no-repeat 的东西的 =)

雯雯 说...

>< 谢谢你丫~有美化cbox的教程吗?

独泪 说...

有啊,会写出来给你的 =)

ah sin 说...

请问 为什么图片的下面还会有黑色的线 ? ><

独泪 说...

唔,图片下面黑色线@@?
这个教程是关于文章标题而不是图片的 :)

匿名 说...

为什么我青色的字改了还是一样><不会下丫:(

独泪 说...

试一试把px改成 cm =)
不介意可以放上彼得博客网址方便替你查看 =)

匿名 说...

http://xiiao-mui.blogspot.com/ =]]

独泪 说...

唔,你没放上号码,记得放上号码调整位置
还有那个
border-bottom: 5px solid #000000;
可以删掉,因为只能用其中一个分割线 =]

Xiiao Mui Mui 说...

放了还是一样O.O

独泪 说...

唔,貌似看到你成功了,可以更改paddingbottom那个数字调整:)

傻猪 说...

找不到 /* Posts 的?@@

独泪 说...

CTRL+F找 .post {
就会找到了

傻猪 说...

弄了..没有出现分割线的? @@

✖琪琪✖ 说...

弄不到

独泪 说...

傻猪
是不是没放上图片网址?

✖琪琪✖
是找不到代码么:)?

傻猪 说...

我不是弄图片的
我弄这个
h3.post-title {
border-bottom: 5px solid #000000;
padding::0px 0px 5px 0px;
}

没有出现东西 @@

独泪 说...

傻猪
CTRL+F找 .post h3 {

在 .post h3 { paste这个教程的代码 =)

傻猪 说...

也是一样不能 @@

独泪 说...

唔,希望你能保存代码,问题才容易替你解决 :)

嘉盈 Jia Ying 说...

谢谢你的教程 :D

我放图片的url 后、
预览是分隔线变成一条黑色的粗线 @@

不过不要紧啦、我弄成另外一种了。
谢谢 :)

傻猪 说...

还是不能 TT 没关系了..谢谢你 :)

独泪 说...

嘉盈 Jia Ying
不客气^^
哦,删掉那个
border-bottom: 5px solid #000000;
这是黑色粗线的代码:)

傻猪
唔,你保存不到代码么@@?

傻猪 说...

保存模板是吗?保存了..可是没有出现东西 ><

独泪 说...

嗯,唔/_\ 没看到代码,貌似你删除了说

傻猪 说...

就是看不到才删除呀 /.\

Nico 说...

請問下。要怎樣把分割線放在中間?

独泪 说...

傻猪
唔,保存代码没效果没关系,保存代码让我查看问题才好解决地说

Nico
background: url(图片URL) no-repeat scroll left;

这排字的后面你会看到left
把它改去center

xiiao xin 说...

完成了 THX =]

lаī нэш чаи 说...

拿走了 :)
谢谢 =D

Sandy 说...

没关系 不弄了 @@

‖ Giиgεя βяεad :: βlog ‖ 说...

zomok分割线的下面有一条黑色的线??o.0

Han 说...

可以了,谢谢

酸梅妹 说...

the picture at the title thr , hw to change ? pls reply to my fb , thx, winni.tan7@gmail.com

thx :)

peyying :) 说...

弄不到=(

Ahh Mao 说...

怎样让分割线变长?

phebe 说...

要怎样移除 ?:(

HO PEI YEE 说...

成功!

ms-NEKO 说...

峩想要放在帖子底部 , 就是和下一篇帖子分割 , 请问怎样弄?

хïïао яаснεаl 说...

图片在哪里找

Puiyii 说...

请问可以删除分割线吗?

HAPPY MEIKEI'S LIFE 说...

谢谢咯很棒

Ugly Duck 说...

ctrl 那里找不到 .post-body {这些字@@
求解、

发表评论