设为首页
收藏本站
本站论坛
   
3
3
   
  文章列表      

【改编】各模块添加滚动条实例 + 参数详解

改编】各模块添加滚动条实例 + 参数详解   D H y t]:o W {

h*s!v H f#I V'A j f ~ ? ^
作者:众网友+王士伟 I!Z"C+E2[ L Q(]&M Q
出处:缘定沧桑居——[url]http://hi.baidu.com/tblc[/url]
*] e w Z;u+B3x1R
_0a3u*I ^*j-o 参考了其他网友的代码,总结出来加入一些自己的理解风险给大家
!j r1I Z n l!i
`({!L,S r%q ] 比如,想在“友情链接”处添加滚动条只需下面一条代码即可: #M { n#C ~ W B X'?

:G x P%c ` ^ W #m_links{overflow-y:auto;height:250px}
3] [0k6[ @ b-k ]/D
} k H o { A m L Y8[+A C 不过,加一些参数可以让滚动条更有个性,和页面搭配得更完美。下面就是我的页面各种滚动条的详细代码,大家可以参照着修改: }7W y-o G w&G-g.s `
,b X Y/e&G.] | J ~
文章列表的滚动条:
j f)^1E"Z L ] a5r w1w u&k
#m_blog{scrollbar-face-color: #E100E1;
#X E { r K*L w6p2c)C3y s scrollbar-shadow-color: maroon;
O @ Z n5c f$J#A q%I scrollbar-highlight-color: white; 6Z N'_"x*` y6d+p
scrollbar-3dlight-color: #E100E1;
l2C L [ Z | j scrollbar-darkshadow-color:#E100E1;
7r f:c e!Q scrollbar-arrow-color:#E100E1;
!E Y b!_ D)[ X scrollbar-base-color: #E100E1;
\ K }!W1g J scrollbar-track-color: #E100E1;
&W w0s ~ b V overflow-y:auto;height:1194px; 1n1C9T+b x
filter: chroma(color=#E100E1);}  /*文章列表的滚动条*/
(G8w8Z&Q s X x6U n*m 0a A b1R$P#F J
友情链接的滚动条:
&h j Zs&Z g i E F S-b
#m_links{scrollbar-face-color: #E100E1;
'_:b N2x,T%M F,a @l6} j scrollbar-shadow-color: maroon;
;U i8x A x4m scrollbar-highlight-color: white; 7D } q0M'z
scrollbar-3dlight-color: #E100E1;
b B.^ F*b R scrollbar-darkshadow-color:#E100E1;
?/t L9p ] scrollbar-arrow-color:#E100E1;
6P a | | C&y,N scrollbar-base-color: #E100E1;
;J K:\ \ M S R scrollbar-track-color: #E100E1;
R H,e#d.J1E overflow-y:auto;height:823px; 2a m U2Z1I F
filter: chroma(color=#E100E1);}  /*友情链接的滚动条*/ )Z$` x cC N1T {"Z

b z U [*q L 文章分类的滚动条:
X-F |*U)w b1] W0v b g b L a e7R$M n0G
#m_artclg{scrollbar-face-color: #E100E1; 1O } b(k I-a C"W ] \
scrollbar-shadow-color: maroon; z$z U,a#{
scrollbar-highlight-color: white; u-g ~1U)e3G N w V
scrollbar-3dlight-color: #E100E1; F9l v:{ b"t
scrollbar-darkshadow-color:#E100E1;
v Y.l,}1X y4R!e scrollbar-arrow-color:#E100E1;
:R7s9[ r$l x G scrollbar-base-color: #E100E1; p4K&[ ] ]8L J A,Z
scrollbar-track-color: #E100E1;
4p [ \.q1l r ^1r'H Z!{ overflow-y:auto;height:250px; q%|,P0L2y
filter: chroma(color=#E100E1);} /*文章分类的滚动条*/ |&L+h5@!b7d N3o(u
#[ ]&t x l ] { [
最新评论的滚动条:
w X l3Q J&u$K2B Y ~ x I p#N
#m_comment{scrollbar-face-color: #E100E1; _ ` q&d.G
scrollbar-shadow-color: maroon; _ Z q)L _ s8{3a
scrollbar-highlight-color: white; F i9o m5T a @)`
scrollbar-3dlight-color: #E100E1;
x ^#c8\ _'~(c$C z scrollbar-darkshadow-color:#E100E1; y p7Y o)q#X
scrollbar-arrow-color:#E100E1;
"E c D$h N4`0N } T R scrollbar-base-color: #E100E1;
7X;B c+R p D#s t*m scrollbar-track-color: #E100E1;
@ o8R x'[ j overflow-y:auto;height:458px;
V/\ P,n6|3~ filter: chroma(color=#E100E1);} /*最新评论的滚动条*/ 1z)J q1p e H

v N S.i q-u @ 参数说明:
e0o#} Z g)b :o$o(N(P2h*f m0} M
1、overflow-y : 设置当对象的内容超过其指定高度时如何管理内容;overflow-x : 设置当对象的内容超过其指定宽度时如何管理内容。 .Y,v!q)G S H$] Q
a,Q9e k w
参数: ? Z J*Z w x)J3D
visible:扩大面积以显示所有内容 !h |#I p h `.O F/^
auto:仅当内容超出限定值时添加滚动条 :l,b1a m l ^!{ J3J
hidden:总是隐藏滚动条
0B |!G F4l0q'} scroll:总是显示滚动条
x:F O B G!q ^ C
!A {7b(_.e 2、height : 设置滚动条的高度(修改其后数值即可)。
,y w8U C D"r!V)N5\ ~ G B E0~;[ G4]%r
3、滚动条颜色参数设置:
7~"T2Y$y,s c*d 6r K$X-G W*J
scrollbar-3d-light-color 设置或检索滚动条亮边框颜色
+C U(f K p#U m M6c scrollbar-highlight-color 设置或检索滚动条3D界面的亮边(ThreedHighlight)颜色 :\ o ~4W9v/M
scrollbar-face-color  设置或检索滚动条3D表面(ThreedFace)的颜色   h)H'Q.U Z$c,I I
scrollbar-arrow-color  设置或检索滚动条方向箭头的颜色 '}0v8z"Y A7l P d q
scrollbar-shadow-color  设置或检索滚动条3D界面的暗边(ThreedShadow)颜色 7t5s+R J4L B t q
scrollbar-dark-shadow-color 设置或检索滚动条暗边框(ThreedDarkShadow)颜色
1L `"{ y I ~'t q/} scrollbar-base-color  设置或检索滚动条基准颜色
 
 
   
 
网上赚钱申请指南
 

友情链接
个人主页
 
 
 
 

wel come to . 欢迎光临
宇宙浪仔