泪划痕
Best viewed in Google Chrome

2011年6月24日星期五

Sidebar小工具标题添加形状框框 (给renee)

给renee =)

如图,就是小工具标题添加形状框框

信息中心 - 设计 - 修改HTML

CTRL+Fh2 {

h2 { 下面添加以下代码

-moz-border-radius: 80px;
border-radius: 80px;
border-top: 2px solid #FFCCFF;
  border-left: 2px solid #FFCCFF;
  border-right: 2px solid #FFCCFF;
  border-bottom: 2px solid #FFCCFF;
margin:0 0 1.5em;
  padding:7px 10px 7px 10px;

添加了后会像下图:


*青色字体 = 框框线条的厚度,数目越大,厚度越厚。
*蓝色字体 = 框框线条的颜色的颜色代码
*红色字体 = 框框的线条类型
*粉色字体 = 框框的形状代码


框框的形状代码:
A
B
C
D
E
F
















Example A 


-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;


Example B 


-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;


Example C 


-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;


Example D 


-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;


Example E 


-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;


Example F 


-moz-border-radius: 35px;
border-radius: 35px;

框框线条的类型如下:
保存模板,完成……

73 道泪痕:

miky 说...

请问下~要怎样把sidebarの字放在中间呢?

JUST . Fang =D 说...

问下哦~怎样把帖子中的标题放中间哄?怎样能放Shadow在帖子中的标题哄?
还有哦~为什么我看到有些人的部落格帖子的标题后面能放背景的?而且是鼠标停留在哪里才有的哦???
不好意思~一次过问那么多><! :D

匿名 说...

怎么我的弄了不大像你的那种效果 TT

Panda wEn.3r 说...

不知爲什麽我弄不到的?

独泪 说...

miky
迟点放给你哦 =)

JUST . Fang =D
有背景那个是hover哦=)
迟点放给你 =)

nicolemin ♥
@@那你的是什么效果的说?
是不是你用的是IE浏览器地说?
IE浏览器是看不到效果的哦 =)

W3n,panda
找不到代码吗?H2 { 这个
还是放错位置遗漏了什么的说 =)

小瓜 ♥ 说...

哈咯 , 不好意思

想请问下
我只有 h2
没有 h2{

那我该怎么做 ?

独泪 说...

有的哦 你再找找哦
就在 /* Headings 的下面而已
是h2 {哦(有空格的)而不是h2{ =)

Yen Harn ♥ 说...

嘿嘿有了有了 ~ ( 抱走 XD

独泪 说...

阿 涵 ♬ sш ♥
好的^^

Yonqle 说...

做莫我的怪怪的
有些部分会不见掉的噢
怎么办?!

Li Min 说...

请问一下,要怎样把sidebar的字放在中间?谢谢^^

独泪 说...

XiaoLe ` YL
可以的话希望你能保存模板 =)
记得别删掉了px =)

Li Min
http://dulei-mylife.blogspot.com/2011/08/sidebar.html

这里教学 =)

Li Min 说...

谢谢泪、^^好羡慕你的 blog 哦 :D

独泪 说...

Li Min
哈哈,也很谢谢你的说啊 xDD

Yonqle 说...

有保存

在预览时就怪怪了 /.\

独泪 说...

唔@@可是没有效果会怪怪么@@
还是没在小工具标题写东西,所以没看到效果地说@_@?
小工具标题没有写东西是看不到效果的哦

Michelle Y 说...

我的不完整叻~
我的没有 border-bottom

我也没有删掉px

独泪 说...

唔,只需要 CTRL +F找 H2 (

然后放代码在 H2 ( 下面就好了 =)
教程有写 =)

Michelle Y 说...

哦~
还是一样,不过没有关系,
谢谢你的教程^^

还有哦,
如果我要用我自制的鼠标呢?
教教我~
谢谢=)

OuYong 说...

为什么我的标题日期的框框,上左右都有,就是下没有的?帮我看看http://qi19951121.blogspot.com/

独泪 说...

мιcнɛℓℓɛ ʏɛσн
http://dulei-mylife.blogspot.com/2011/08/huiying.html

这里有你的教学 =)
只要换上你自制鼠标 的图片URL就好了 =)

OuYongღ
唔,你没保存所以看不到你的效果地说,希望能保存方便我看看 =)

OuYong 说...

泪,我保存了...你得空帮我看看喔,谢谢你~

独泪 说...

ctrl+F找 h2 {

话说你的 h2 { 下面有点复杂地说@@

有很多border代码,希望能删删哦 =)
删掉多余的,保留需要的就好 =)

还有h2 { 结束的时候 放上这个 }
你的“不见”了
所以整个代码不完整地说 =)

OuYong 说...

好的...我再试看看,谢谢你噜:D

独泪 说...

好的^^

YumiiX♥ 说...

框的线条.. 我没有的?? ><
麻烦教我下=]

独泪 说...

唔,我看到你成功了说 =)

Crystal 说...

為什麼那個框只可以看到一半?
要怎樣調整呢? 麻煩你咯:)

独泪 说...

ctrl+F找 h2 {

你大概会看到这样
h2 {

background: #ffffff

删掉 #ffffff
就可以了 =)

Crystal 说...

我找這你的方法做?
可以 #ffffff 刪了...
圖片不見了...
而且那個框還是下半部看不到...

怎麼辦~

看我的blog...

www.wonglimin-crystal.blogspot.com

独泪 说...

是删除#ffffff

#ffffff就是颜色代码意思

图片不见了,就是你删除了后面的图片网址
你放了两个图标, h2 只能放一个 图片
所以你要删除其中之一 的 图片网址。

*代码乱了才会导致框框出现问题的 =)

Crystal 说...

還是cannot ><

給我你的facebook

Renee.Potatoes 说...

我想問下有沒有四方形的Code呢 ?

独泪 说...

Crystal
到我资料可以找:)


Renee.Potatoes
四方形的话 ,只需要删掉 “粉色字体”就好了 =)

Ting ♥ 说...

我用了哦 :D

菡縈儿_Ying 说...

我用这个了 ^^

谢谢你的教程 ^^

独泪 说...

Ting ♥
好的,谢谢通知^^

菡縈儿_Ying
好的,不客气地说 XDDD

Yuu ♥ 说...

还是弄不到捏 ><

匿名 说...

真的很谢谢你的教程!:)

匿名 说...

我抱走嚕~~

我有一個問題想請教你,我那個框框能移左邊一點點的嗎?

独泪 说...

Yuu ♥
唔,怎么说弄不到地说,是不是放错地方了o-o?

Cc
哈哈不客气 ^^

Im YF
唔,框框移左一点点是指整个sidebar都往旁边移么

Yuu ♥ 说...

h2{过后很复杂,有点看不懂怎样弄><

yang yang 说...

不好意思哦...><
为什么我的已经弄好了,可是旁边还是有它原本的框框?要怎么弄掉呢?

Vanissx 说...

打扰了 .. ><
如果我想要放图片
而不是框框的
代码是什么?

独泪 说...

Yuu ♥
唔,你只需要在 H2 『 下面添加了代码就成功了
然后直接保存就这么简单而已 :)

yang yang
唔,旁边有他原本的框框是指,小工具标题那里本来就有框框了么 o_o?

ZqinG
代码是
background: url(博客背景图片网址) repeat;

yang yang 说...

是啊...
要怎样弄掉呢?

❥Mimi^^❥ 说...

我抱走咯^^TQ

ƨσ∂α ʏɛɛ ™ 说...

save 不到 /.\

独泪 说...

yang yang
唔,那就不用再加 border代码了,你那里是不是有其他border地说

修改就行了 :)
border 是 框框的意思

❥藕✖愛伱_伱來愛藕❥
不客气,谢谢通知 ^^

ƨσ∂α ʏɛɛ
嗯,怎么说save不到,有出现什么字体么

果凍 说...

還是不能 . 它原本的框框還有在 @@

独泪 说...

Nico
唔,什麼原本的框框還在地說@@?不大明

果凍 说...

我成功弄到了 :]
謝謝你 :]

♥ Ι′м Ч.Снìа 游 ♥ 说...

为什么弄了又出现可是~很像一边有一边没酱的

淘箱 Brethertonbox 说...

不好意思哦:-) 我想问你是有没有正方形的框框啊?:)

Yuki Lim 林伽芯 说...

很成功的说``
谢谢吖

ZhiYu Lim 说...

請問除了 h2 { 可以放之外
還有哪一個可以放的?

因為我的html 很多特效跑出來都是 invalid 的 @@

蕾娘、 说...

弄了没有的:(

xiiaoyu 说...

请问一下 , 为什么我找不到代码 ??

msunaier 说...

很成功^^谢谢 :)

♥ I'м сносоlатэ ♥ 说...

很成功 =] 谢谢^^

Si Yu Tan 说...

可不可以借分享教程?

Wen Jia 说...

怎样把字体移到中间 ? :)

布布、`` ♥ 说...

::

怎么我的上面有、上面有、下面的没有 TT

o○ Wei San ○o 说...

谢谢啊 我很喜欢=)

babeng 说...

请问一下为什么我找不到h2 } ?

あかつきあい♥ 说...
此评论已被作者删除。
あかつきあい♥ 说...
此评论已被作者删除。
xiuling_:)) 说...

我拿了哦~~~

Babes.Chloe 说...

为什么我的有些下部分有 , 有些却没有的?
救救我TT__TT 我快疯了..

Unknown 说...

为什麽我弄不到得TT

Xiiao Bi 说...

泪:可以加我面子书嘛、我有东西要问你 >.<

(bi.xiiao.90@facebook.com)

谢谢你哦 >.<

Ugly Duck 说...

h2}在哪里找的 我按了ctrl+h 找h2}可是不行的@@

Ms . 肥婆 ●3● 说...

请问为什么我做不到的呢?:(

发表评论