英雄联盟人机时间:HTML代码精美素材边框

来源：百度文库编辑：九乡新闻网时间：2024/04/19 21:48:43

我的收藏
外边框和内边框
怎样用代码做外边框和内边框

一、做外边框的代码：

这里是文字的输入地方，随着文字的增多，边框就逐渐放大。可以放加入背景图片的代码，在这里还可以放一个或多个动画代码（做多层透明flash动画）。

说明：红色代码是右边框；绿色代码是上边框；深蓝色代码是左边框；桃红色代码是下边框；天蓝色代码是边框内面背景颜色；**代码cellSpacing=0是**内边框与外边框距离的，“0”表示没有距离，是可以改变的。（这段代码里没有内边框代码）#号后面的00ff00是颜色代码，可以变换，要改变边框颜色就要将四边#号后的代码变为同一个代码，否则，四边的颜色就会不同。颜色代码可以在颜色代码表里找；10PX是表示外边框的宽度，数值可以改变；
看看效果：

这里是文字的输入地方，随着文字的增多，边框就逐渐放大。
可以放加入背景图片的代码，在这里还可以放一个或多个动
画代码（做多层透明flash动画）。
二、怎样加进内边框？
1、代码：

2、说明：
A、“=”号后的“1”可以变为“2”或“3”，不可改得太大，因为这是**内边框宽度的，太宽了就不好看了；
B、做几个内边框，就将这段代码放开头那段代码的

后，（即“文字”前）并复制粘贴几次;
3、以做三个内边框为例：也就是将内边框代码复制粘贴三次放于开头那段代码的

后，（即“文字”前）边框的宽设为“1”，代码变化如下：

这里是文字的输入地方，随着文字的增多，边框就逐渐放大。
可以放加入背景图片的代码，在这里还可以放一个或多个动
画代码（做多层透明flash动画）。
看看将**内边框与外边框距离的代码cellSpacing=0改为等于“5”后的效果：
这里是文字的输入地方，随着文字的增多，边框就逐渐放大。
可以放加入背景图片的代码，在这里还可以放一个或多个动
画代码（做多层透明flash动画）。
简单边框
立体线条边框的变化

下面是一段可以改变立体线条边框形状、粗细、颜色和框内背景颜色的代码：
Groove;border-width:7pt; border-color: red">
border-style:
说明：
这段代码是在border-style后面使用不同的语法描述来改变边框形状的：
简单线形边框; Solid 简单双线边框; Double 沟线立体效果边框; Groove 脊线立体效果边框; Ridge 嵌入线立体效果边框; Inset 浮出线立体效果边框Outset
边框线条颜色的改变方法：
绿色处可改变边框的颜色,用英语单词表示也可,用#xxxxxx的形式表示也可.(见颜色值表)=》
边框背景颜色的改变方法：
改变边框内背景颜色的方法就是在桃红色代码处改变颜色值。（可能随便填一个6位数的值，要想得到你想要的准确颜色就要参看“颜色值表”）
下面是将边框线条形状、粗细等改变后的效果：
1、简单线形边框： Solid 边框颜色为绿色 border-color: #00ff00
背景颜色为background-color:#ffdead（米**）
不是立体

日志文字

2、简单双线边框：Double 边框颜色为border-color: #0000FF
背景颜色为background-color: #44FFFF（天蓝色）
不是立体

日志文字

3、沟线立体效果边框：Groove 边框颜色为border-color: #ff0000 （红色）背景颜色为background-color: #0000ff（蓝色）

日志文字

4、脊线立体效果边框：Ridge 边框颜色为border-color: #44ffff（天蓝色）背景颜色为background-color: #ff0000（红色）

日志文字

5、嵌入线立体效果边框：Inset 边框颜色为border-color: #a000ff（紫色）背景颜色为background-color: #a0ff60（黄绿色）

日志文字

6、浮出线立体效果边框：Outset 边框颜色为border-color: #ff00ff（桃红色）背景颜色为background-color: #ffa0ff（肉红色）

日志文字

外边框包内边框的代码

效果：
这里是文字的输入地方，随着文字的增多，边框就逐渐放大。可以放加入背景图片的代码，在这里还可以放一个或多个动画代码（做多层透明flash动画）。
美化帖子

一.为你的帖子添加漂亮的背景

上面我们已经学会了用颜色做简单的边框代码，要给帖子添加一些漂亮的背景图片效果会更漂亮，如下是添加背景图片的代码：

说明：代码中的数字是可以变动的。可直接在帖子上添加背景，也可在表格里添加背景，你随便设计了...
例如：

这个是直接在帖子上添加的背景图
这个是在表格框里添加的
也可以在你所添加的背景上再添加背景，做成的边框也很漂亮的哦...
是
不
是
很
漂
亮
哦
！
记住要选好图片地址，有些QQ空间图片和百度的图片，还有网易，新浪等博客的图片地址，论坛是不支持些别的图片地址.....

二，水晶感觉的边框代码

标题

这里是输入文字的地方，还可以放图片代码、Flash动画代码和gif动态小图代码。

说明：**的是边框的颜色值，可以改变（见颜色代码表），绿色的是标题背景的颜色值，也可以改变（见颜色代码表），蓝色的“27”是标题栏的宽度值，也是可以改变的。
二、看看效果：
标题
三.给帖子文字添加滚动条

想要多输入文字，还不想占贴子的太大的空间可以添加滚动条标准的滚动条代码如下：

这里为文字输入区
这里为文字输入区
这里为文字输入区
这里为文字输入区
这里为文字输入区

同样颜色是可以替换的...
这里是一些滚动条精选&代码
颜色代码也可自己进行尝试更换。
div代码内换行在代码视图中需要的位置打
。
1、代码：

日志内容

桃夭
桃之夭夭，灼灼其华。
之子于归，宜其室家。
桃之夭夭，有蕡其实。
之子于归，宜其家室。
桃之夭夭，其叶蓁蓁。
之子于归，宜其家人。
2、代码：

日志内容

芣苡
采采芣苡，薄言采之。
采采芣苡，薄言有之。
采采芣苡，薄言掇之。
采采芣苡，薄言捋之。
采采芣苡，薄言袺之。
采采芣苡，薄言擷之。
3、代码：

日志文字

关雎
关关雎鸠，在河之洲。
窈窕淑女，君子好逑。
参差荇菜，左右流之。
窈窕淑女，寤寐求之。
求之不得，寤寐思服。
悠哉悠哉，辗转反侧。
参差荇菜，左右采之。
窈窕淑女，琴瑟友之。
参差荇菜，左右芼之。
窈窕淑女，钟鼓乐之。
4、代码：

日志文字

静女
静女其姝，俟我于城隅。
爱而不见，搔首踟蹰。
静女其娈，贻我彤管。
彤管有炜，说怿女美。
自牧归荑，洵美且异。
匪女之为美，美人之贻。
5、代码：

日志文字

君子偕老
君子偕老，副笄六珈。
委委佗佗，如山如河。
象服是宜。
子之不淑，云如之何？
玼兮玼兮，其之翟也。
鬒发如云，不屑髢也。
玉之瑱也，象之揥也。
扬且之晳也。
胡然而天也！
胡然而帝也！
瑳兮瑳兮，其之展也，
蒙彼绉絺，是绁袢也。
子之清扬，扬且之颜也，
展如之人兮，邦之媛也！
6、代码：

日志文字

蒹葭
蒹葭苍苍，白露为霜。
所谓伊人，在水一方，
溯洄从之，道阻且长。
溯游从之，宛在水中央。
蒹葭萋萋，白露未晞。
所谓伊人，在水之湄。
溯洄从之，道阻且跻。
溯游从之，宛在水中坻。
蒹葭采采，白露未已。
所谓伊人，在水之涘。
溯洄从之，道阻且右。
溯游从之，宛在水中沚。
7、代码：

日志文字

采薇
采薇采薇，薇亦作止。曰归曰归，岁亦莫止。
靡室靡家，玁狁之故。不遑启居，玁狁之故。
采薇采薇，薇亦柔止。曰归曰归，心亦忧止。
忧心烈烈，载饥载渴。我戍未定，靡使归聘。
采薇采薇，薇亦刚止。曰归曰归，岁亦阳止。
王事靡盬，不遑启处。忧心孔疚，我行不来！
彼尔维何？维常之华。彼路斯何？君子之车。
戎车既驾，四牡业业。岂敢定居？一月三捷。
驾彼四牡，四牡骙骙。君子所依，小人所腓。
四牡翼翼，象弭鱼服。岂不日戒？玁狁孔棘！
昔我往矣，杨柳依依。今我来思，雨雪霏霏。
行道迟迟，载渴载饥。我心伤悲，莫知我哀！
. CSS图片修饰效果.

----------●楛嗏

基本代码： ---------------------------------------------------------------------- 添加图片：

-----------------------------------
贴带连接的字：写上你想写的字
-----------------------------------
带连接的图片

-----------------------------------
添加音乐：

-----------------------------------
添加flash:

-----------------------------------
添加影视文件：
---------------------------------------------------------------------- .CSS图片修饰效果.
-----------------------------------
1。单线框

----------------------------------------------------------------------

---------------------------------------------------------------------- 2。双线框

----------------------------------------------------------------------

----------------------------------------------------------------------
3。凸出框

----------------------------------------------------------------------

----------------------------------------------------------------------
4。凹进框

----------------------------------------------------------------------

----------------------------------------------------------------------
5。邮票框

----------------------------------------------------------------------

5。邮票框

----------------------------------------------------------------------
6。虚线框

----------------------------------------------------------------------

----------------------------------------------------------------------
7。凹槽框

----------------------------------------------------------------------

----------------------------------------------------------------------
8。脊状框

----------------------------------------------------------------------

----------------------------------------------------------------------
9。立体阴影框
XImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15); WIDTH: 300px; HEIGHT: 200px" height="200" cellspacing="3" cellpadding="15" width="300" border="2">

----------------------------------------------------------------------

9。立体阴影框

----------------------------------------------------------------------
10。横向渐变透明

----------------------------------------------------------------------

----------------------------------------------------------------------
11。圆形渐变透明

----------------------------------------------------------------------

----------------------------------------------------------------------
12。X形渐变透明

----------------------------------------------------------------------

----------------------------------------------------------------------
13。改变某种颜色

----------------------------------------------------------------------

----------------------------------------------------------------------
14。黑白效果

----------------------------------------------------------------------

----------------------------------------------------------------------
15。X光效果（底片）

----------------------------------------------------------------------

----------------------------------------------------------------------
16。浮雕效果
XImageTransform.Microsoft.Emboss()" src="http://image17.360doc.com/DownloadImg/2010/11/1914/6926980_5.jpg" />
----------------------------------------------------------------------

----------------------------------------------------------------------
17。上下颠倒

----------------------------------------------------------------------

----------------------------------------------------------------------
18。左右颠倒

----------------------------------------------------------------------

----------------------------------------------------------------------
19。色彩颠倒

----------------------------------------------------------------------

----------------------------------------------------------------------
20。粒状阴影

----------------------------------------------------------------------

----------------------------------------------------------------------
22。模糊效果

----------------------------------------------------------------------

----------------------------------------------------------------------
23。水波效果（风吹）

----------------------------------------------------------------------

----------------------------------------------------------------------
-----------------------------------
Qzone官方社区http://qzone.net.cn
-----------------------------------
边框制作（一）
',1)">

边框制作【一】楛嗏
1.在图片上写日志效果：
图片上写日志代码说明：
height=300表示图片的高度为300
width=500 表示图片的宽度为500
图片地址表示图片属性地址
border=3 表示框线厚度为3（当设定为0时只是简单的图片加字效果）
cellSpacing=3表示为边框格线设置距离为3（最佳数值1到6）注意：当数值设定为0时无效
borderColor=#003333表示边框格线颜色，颜色码是“003333”
有关颜色的选取请参照颜色代码表
代码如下

<>添加文字或图片

2.用颜色码制作简单日志边框效果：
颜色码制作简单日志边框代码说明：
borderColor=#00FF00 表示边框格线颜色码
height=300 表示边框高度数值
cellSpacing=0 表示格线的距离数值
width=500 表示边框宽度数值
bgColor=#FFFFCC 表示边框内背景颜色码
border=6 表示边框格线厚度
代码如下

<>添加文字或图片

3.素材边框加标题栏及背景效果：
素材边框加标题栏及背景代码说明
标题栏背景图片地址表示标题栏的背景图片属性地址
height=38 表示标题栏的高度
日志背景图片地址表示日志背景图片属性地址
height=250 表示日志背景的高度
标题背景高度还是日志背景高度都无需太大的修改，因为两者的高度都会随文字的大小和数量增加，所以，只设初步就好。这样在日志目录浏览中才不会显得过大。
代码如下

添加标题

<>添加文字或图片

4.颜色框加标题栏及背景色效果：
颜色边框加标题栏及背景色代码说明
borderColor=#00FF00 表示边框格线颜色码
bgColor=#FFFFCC 表示日志背景颜色码
bgColor=#00FF00 表示标题栏颜色码
有关颜色的选取请参照颜色代码表
代码如下

添加标题

添加文字或图片

5.多层素材边框效果：
多层素材边框效果代码说明
橙色代码部份表示第一层格线宽度
蓝色代码部份表示第一层背景图片地址
粉色代码部份表示第二层格线宽度
青色代码部份表示第二层背景图片地址
紫色代码部份表示第三层格线宽度
绿色代码部份表示第三层背景图片地址
**代码部份表示日志背景图片地址

表示边框的一层代码，如果要加多层就只需在所有代码前加一段这个代码就行，减少也是删除这一段。
代码如下

添加文字或图片

6. 添加多层颜色框效果：
添加多层颜色框代码说明：
蓝色代码表示第一层边框颜色代码
绿色代码表示第二层边框颜色代码
青色代码表示第三层边框颜色代码
粉色代码表示日志背景颜色

表示边框的一层代码，如果要加多层就只需在所有代码前加一段这个代码就行，减少也是删除这一段。
代码如下

添加文字或图片

特殊符号应用图标与代码
',2)">

样式图标代码样式图标代码
★ ★ ☆ ☆
⊙
⊙
●
●
卐
卐
▓
▓
◆
◆
≈
≈
∴
∴
◎
◎
j
j
h
h
a
a
V
V
w
w
!
!
&
&
"
"
H
H
U
U
J
J
L
L
b
b
e
e
p
p
O
O
%
%
v
v
f
f
N
N
!
!
"
"
#
#
$
$
%
%
&
&
'
'
(
(
)
)
*
*
+
+
,
,
-
-
.
.
/
/
0
0
1
1
2
2
3
3
4
4
5
5
6
6
7
7
8
8
9
9
:
:
;
;
<
<
=
=
>
>
?
?
@
@
A
A
B
B
C
C
D
D
E
E
F
F
G
G
H
H
I
I
J
J
K
K
L
L
M
M
N
N
O
O
P

Q
Q
R
R
S
S
T
T
U
U
V
V
W
W
X
X
Y
Y
Z
Z
[
[
]
]
^
^
_
_
`
`
a
a
b
b
c
c
d
d
e
e
f
f
g
g
h
h
i
i
j
j
k
k
l
l
m
m
n
n
o
o
p
p
q
q
r
r
s
s
t
t
u
u
v
v
w
w
x
x
y
y
z
z
{
{
|
|
}
}
~
~
?
?
q
q
x
x
r
r
y
y
s
s
z
z
?
?
o
o
3
3
4
4
5
5
6
6
7
7
8
8
9
9
~
~
[
[
]
]
里面的颜色代码随便你更换，想换什么颜色就换什么颜色.
',3)">

HTML代码精美素材边框 HTML代码精美素材边框ads HTML代码精美素材边 HTML代码-边框篇『Html代码交流』 [实用工具] 70款精美音画边框 === HTML代码音画教程：如何编辑精美日志边框 === 边框素材汇集代码博客精美边框代码精美边框和代码精美边框代码1 精美边框代码2 精美边框代码分享空间日志HTML边框素材B[红色] 空间日志HTML边框素材C[蓝绿] 空间日志HTML边框素材[蓝绿] 精美的边框素材精美的边框素材套装精美边框素材精美日志边框素材精美边框素材【一】精美日志边框素材精美日志边框素材. 精美日志边框素材精美边框素材【一】