hr css样式大全

于 2009-08-28 11:19:00 发布
阅读量7.1k 收藏 2
点赞数 1
分类专栏： div+css 文章标签： css border filter c url p2p

以下是引用片段：

Fu&lN:mjv#@0hr在css受支持的并不多!也似乎足够 只是改变有些不同而已中国经济网 经济博客#u!E wg~+Wn'B
中国经济网 经济博客"v5}X4F-J"g!MK.e
在一个页面里有许多<hr>  就在<style>里改变做样!!中国经济网 经济博客v(|1T)@o9^ eO

0i8dG9p`0例如
leZ3EU!_]E0这里CSS指线宽度90%   高度3px 离上下右下左距离 10px 0px 10px 0px中国经济网 经济博客V)nBU |B+p(s vX
<style>hr{width: 90%;height: 3px;margin: 10 0 10 0;}</style>  
/W|7My6E0在页面有了<HR>就会受到有改变hr{}的影响
,l+i }aM /'s v']0
G'_)s*a6Y }]E9p0HTML要贴:
v [ S v[d0
X#l F&Id,n.Z0<HR style="width: 90%;height: 3px;margin: 10 0 10 0;">中国经济网 经济博客$T.JI(~%^7C5j4v9i ~
中国经济网 经济博客$n?~5I*SS/q4U6hB6{
<style>中国经济网 经济博客)R3|Yr*J}u
hr {margin:0;HEIGHT: 25;width:100%;border:4px ridge;COLOR:333;}
8dp nE0Z0n:~:V0</style>中国经济网 经济博客!C,Oy.@sQ /W-DS
<HR>
%ub7th5b&NL#K0
an)f/{@m:/,ExH0
!PKf BuaUk)t0线条可以改变多种形状
{BT't3yEO4S0线条样式属性原设值样式是solid中国经济网 经济博客W6NTp1[l:`-d
要改成是虚线条是dotted
~z A m-/)k0例子是这样
G+|Y;Dz%U-KK0<HR style="border:1px dotted red;">
SXW+Px0看起来点点好像有点大  而且还有原背景的色
z6^5U I^*S0中国经济网 经济博客A d+?x7OLf$Q8E
这时要多加入一个高度调整他中国经济网 经济博客 mpN2FDB a:X
<HR style="border-top:1px dotted red;HEIGHT:0;">
$RT'~H$FD0这样原来背景条色就没了!线条也变细中国经济网 经济博客"uM$q%K*/
中国经济网 经济博客^ b d h3]4R}!{4ZE
你使用HEIGHT:1;这样是原预设值中国经济网 经济博客 oJH7}5?m&u3[
中国经济网 经济博客8bLi Fn7]q2cz
你的线条已被固定了  但你想在排版时!能让线条靠上下左右的距离
AX`M;q)~^#n0利用position:relative;中国经济网 经济博客)OEN5r)G"c`
他是在原地被移动时可用的上 比如说要再往上移 往右移!看下句中国经济网 经济博客*H;Zoe#I3VO*/K
<HR style="position:relative;top:-15;right:80; border-top:1px dotted red;HEIGHT:0;">中国经济网 经济博客P mYRmuH
中国经济网 经济博客8p @+b u)l!O ] {UXu

$WLE9zNLUP;H u0

d2z(W.ue)?T0w v0补充日期:2005-10-03 23:31:10

8ej [)H3AZ;N0

中国经济网 经济博客L|$yRsWR}3U

一般样式：

9cf^Ha)u c0<HR style="COLOR: red;border-style.:dotted; HEIGHT: 8;">中国经济网 经济博客*F/e5Pla:UE9l,Rh

<HR style="COLOR: red;border-style.:double; HEIGHT: 20;">

tm|kUV d Ox?0<HR style="COLOR: red;border-style.:outset; HEIGHT: 8;">中国经济网 经济博客;SkA0Zf

<HR style="COLOR: red;border-style.:inset; HEIGHT: 18;">中国经济网 经济博客-O^J:W,I;}$e [

<HR style="COLOR: fff;border-left: 1px double red;border-bottom: 1x double red;HEIGHT: 20;">

5N T'p2pba0<HR style="border:8px ridge #FFB600;COLOR:000;HEIGHT: 50;width:100px;top:-25;right:80;position:relative;">中国经济网 经济博客9Rj)Q7@d*R
中国经济网 经济博客wY9i}w:ru5{

G6@:]*D6MP0

9[SM;g r$`F0线条创成图片变的比较多采多亮：中国经济网 经济博客+IT nqY8jH

<style>中国经济网 经济博客)NR/Em-|:X%Q
hr {height:10px;border: 1px solid red;background:url(http://tw.yimg.com/a/tw/wenchuan/0813lifea.gif) repeat-x;}
g8|6e8_S4|5eW?0</style>中国经济网 经济博客/[_ tPF L
<HR>

(/Jz6h?h r O r0
中国经济网 经济博客%/]"Xt}*B XeA

中国经济网 经济博客 O:T.XC)v3jK

HR做为广告样子：中国经济网 经济博客 ls(u8ig5g0p@

<style>
e9u)c,[ h mr,C8uY0hr {background:red url(http://tw.yimg.com/i/tw/sms/act/20041124.jpg) repeat;width:100%;height:120px;border: 1px solid red;}
K["rl d|:a0</style>中国经济网 经济博客Y)L9s#H!h Ll
<HR>中国经济网 经济博客;Q)w+} g'~5bof

S7F2y2Uv4A~9m0

~ xc#JP$i Rb,X#}0HR做为我的照片样式：中国经济网 经济博客t2qd*[2?{ca9R

<style>
)Tvc:n~,V^-u0hr {background:red url(http://tw.img.match.yahoo.com/img/show//2/A/9/B/personals-1117330768-580902/photo_s1.jpg") no-repeat;width:75;height:75;border:0;>}
)z;h-/I q0</style>
h?:IX$f`mC t0<HR>

T)Fk9DN7fzr(P0

2gUhj4Q%}5S7Vs0

中国经济网 经济博客 S*Ov;] x

线条隐藏：中国经济网 经济博客.I8L0W Q)cW/ y]k5_

<style>hr{display:none;}</style>中国经济网 经济博客q3E{!SpS)D
<HR>

&HSaf@+t0

'pm [ zvn0

&ATY'dQ{Q0改线条色 也可让线更细：

1QXZ fOs0<style>hr{border-bottom: 1px solid red;}</style>
r)^B@'d0<HR>

6i{'?Y Fz9T#F0

)j&kzp[.@1pC0

中国经济网 经济博客%g VH9]&w!~5e8szo

改线条色 高度是原预设：中国经济网 经济博客3A!^c+SzUu0@N

<style>hr{COLOR: #eee; HEIGHT: 1px;}</style>中国经济网 经济博客fWz8rA)M
<HR>

g'G Dup9IC0
中国经济网 经济博客ur*@BW

中国经济网 经济博客(i*h ~%^CT9S(n

补充日期:2005-10-03 23:33:35

5A(}XSn1BUBs.M0

)Y.Wp.a#wda1W0以下是引用片段：

b_(c3K0^0<body bgcolor="#000000">中国经济网 经济博客&u.`dD:[ F K
<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:100;">
]J9mwJ(tn0<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:150;">中国经济网 经济博客S,|1L"~p
<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:200;">中国经济网 经济博客7[LJ ql b
<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:250;">
lL/D|%b x@ Q7`0<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:300;">中国经济网 经济博客D8A tP_+|%P M
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:350;">
FUN8|.{ x9Gq0<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:400;">
o'fa:J&Z0S'_j(c0<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:450;">中国经济网 经济博客AiGUy@X
<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:500;">
U fvZd0L4i0<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:550;">
!f ou3k0X T'h0<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:600;">
{O.ekJT q`0<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:650;">中国经济网 经济博客K DIXj R0n L
<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:700;">中国经济网 经济博客*}cN3^C1x?
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:750;">
whoHo A0<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:800;">
D$wha I!?M;l0<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:850;">中国经济网 经济博客q(o%[ OyQ@6x
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:900;">

4wA,k/.GrF+z0<br><br><br><br><br><br><br><br><br><br><br><br>中国经济网 经济博客)@ IbQB-t+sV
<hr size="10" color="#000080" style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=0,startY=0,finishX=100,finishY=100)">中国经济网 经济博客wE,m&]Q#S8[
<br><br>
jNl{E'FH0<hr size="10" color="#ffccff" style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=100,startY=100,finishX=0,finishY=0)">
#D'R!i;`6nOFNC0<br><br>
tu @b.{+a0<hr size="10" color="#0000cc" style="filter:alpha(opacity=0,finishopacity=100,style=2)">中国经济网 经济博客/{-ni;E7_,l1Y'jC
<br><br>中国经济网 经济博客E7l g3G-Bi
<hr size="10" color="#cc0000" style="filter:alpha(opacity=0,finishopacity=100,style=3)">中国经济网 经济博客 M h&CVG:@
<br><br>中国经济网 经济博客Pxt9C(s5o/|5UE
<hr size="10" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='red',endColorstr='blue')">中国经济网 经济博客 z$m;_nMB`)@8?
<br><br>中国经济网 经济博客#l^f[|(b ig*W
<hr size="10" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#004040',endColorstr='#C0FFFF')">中国经济网 经济博客+Ww5i;AV y/@
<br><br>中国经济网 经济博客BWG-V@g$x%[ ^V
<hr style="color:ffff00;height:10;border:3 solid #000000">中国经济网 经济博客EmB~ G&Y8X4`%mX
<br><br>
#o A&|4L)l ev0<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#c0c0ff',endColorstr='#0000FF'); WIDTH: 100%;HEIGHT: 8px">中国经济网 经济博客X3|+{X;xx#}b
<br><br>
wkwr C[@Q'pK0<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#ff0000',endColorstr='#ffeeee'); WIDTH: 100%;HEIGHT: 8px" >
5vaW9e{Pbbm0<br><br>
)w zHYm0<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#FFFFEE',endColorstr='#EEDD00'); WIDTH: 100%;HEIGHT: 8px">
M{vW;J/b9a Zs0<br><br>
}8} f c O0m i0<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#008800',endColorstr='#ddffdd'); WIDTH: 100%;HEIGHT: 18px">中国经济网 经济博客^ O;B6t n Im:W
<br><br>中国经济网 经济博客}&p vg t"Ko
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#006600',endColorstr='#88ff88'); WIDTH: 100%;HEIGHT: 18px">中国经济网 经济博客0_-s Q'l)_8F

中国经济网 经济博客L4/7l:n.e P_;r~
 中国经济网 经济博客 P{f_,x)C

f!z5w9ma0补充日期:2005-10-04 00:35:49中国经济网 经济博客1h|c*Z,r] b8~n

中国经济网 经济博客+oQg:F$p9d dL%p

中国经济网 经济博客L m6|}6Y!edy'wD

<body style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#008800',endColorstr='#ddffdd');">中国经济网 经济博客irG;kn J0o

中国经济网 经济博客Q[l^3xS

 

L"H C[o5q*i0<body bgcolor="#000000">中国经济网 经济博客9c4O*q'@/P7W
<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:100;">
+K }C)Ii-`.D4s(}0<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:150;">
"q2`p V5}NC0<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:200;">中国经济网 经济博客rs ^l-^)H
<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:250;">中国经济网 经济博客8K0QV+O1Jh
<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:300;">
+EU _/ir*_M B0<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:350;">
q ]n }7kW0<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:400;">中国经济网 经济博客uJ]rA o
<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:450;">
)P;s'kv/B z;YjJR0<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:500;">
2e[0aVG:O4z2D0<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:550;">
k!h"upk_C0<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:600;">
m0j'Kn k1[8a0<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:650;">中国经济网 经济博客 GvUd B.x
<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:700;">
!{)vcE-ODX0<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:750;">
z?F9}1N5KG ?C0<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:800;">
Tis[6@.X/bO0<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:850;">中国经济网 经济博客 /]O [Ka.yg
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:900;">中国经济网 经济博客r m,sP9R@*O

中国经济网 经济博客 H'iU l2amt1XP

中国经济网 经济博客L/[ wMh

 

+^1q(E*@&B'u3q Ifh'O0<br><br><br><br><br><br><br><br><br><br><br><br>
W pU9PDm:c0<hr size="10" color="#000080" style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=0,startY=0,finishX=100,finishY=100)">中国经济网 经济博客^-i'H"PI2O1v
<br><br>中国经济网 经济博客-zC _|h1MB*~D
<hr size="10" color="#ffccff" style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=100,startY=100,finishX=0,finishY=0)">中国经济网 经济博客&^i"taX B G
<br><br>
D#@_c_I0<hr size="10" color="#0000cc" style="filter:alpha(opacity=0,finishopacity=100,style=2)">
~'n9o5I;PR}0x0<br><br>中国经济网 经济博客kbj|%j ih*Zi
<hr size="10" color="#cc0000" style="filter:alpha(opacity=0,finishopacity=100,style=3)">
z W7rr;B0<br><br>中国经济网 经济博客z%w1lC `/C'c&rS+N
<hr size="10" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='red',endColorstr='blue')">中国经济网 经济博客mU4y,D!?,Y
<br><br>中国经济网 经济博客SE D"cob(_"/%S
<hr size="10" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#004040',endColorstr='#C0FFFF')">
3SxPqWxV0<br><br>
{F[Hc&/!L.~Bv0<hr style="color:ffff00;height:10;border:3 solid #000000">中国经济网 经济博客;NO`!U6~r/X"k1k
<br><br>
bOtjA/w/cg0<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#c0c0ff',endColorstr='#0000FF'); WIDTH: 100%;HEIGHT: 8px">
#w T2A7o|;~Z0<br><br>
5[mkDW"U0<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#ff0000',endColorstr='#ffeeee'); WIDTH: 100%;HEIGHT: 8px" >中国经济网 经济博客n3p1l,t"N N!`}B|4f
<br><br>中国经济网 经济博客G0]G)uP vk'Im
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#FFFFEE',endColorstr='#EEDD00'); WIDTH: 100%;HEIGHT: 8px">
O G:f-J^lC'Ko0<br><br>
@#F0wr}.k[Z0<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#008800',endColorstr='#ddffdd'); WIDTH: 100%;HEIGHT: 18px">中国经济网 经济博客0|.T!/&[!PL1l[ a
<br><br>中国经济网 经济博客 ti3fxv {v`b:C
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#006600',endColorstr='#88ff88'); WIDTH: 100%;HEIGHT: 18px">

1P7~y8n M N j ^.Y!W0

xigl0727
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值