Tomgo的生活博客 » 滚动条CSS代码 http://www.54tomgo.com 生活|电影|新闻|IT话题 Wed, 29 Jun 2011 06:41:05 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 DIV+CSS定义滚动条样式，实现内嵌效果 http://www.54tomgo.com/archives/430.html http://www.54tomgo.com/archives/430.html#comments Sun, 30 Aug 2009 03:34:58 +0000 tomgo http://www.54tomgo.com/?p=430
CSS滚动条
CSS滚动条

今天忽然想起我的博客签名要更新了，但是我也想保留历史签名，于是参考了淘宝的一些装修的店铺，修改了一下CSS，做了个漂亮的DIV+CSS的滚动条，实现了内嵌的效果。不用iframe的。

CSS代码如下

  1. #about {
  2. float: left;
  3. display: inline;
  4. margin-top: 30px;
  5. width: 500px;
  6. font-size: 14px;
  7. }
  8.  
  9. <p style="text-align: center;">#about p {
  10. color: #FFF;
  11. font-size: 14px;
  12. line-height: 1.4em;
  13. SCROLLBAR-FACE-COLOR: #666666; Z-INDEX: 1; SCROLLBAR-HIGHLIGHT-COLOR: #CCCCCC; MARGIN-LEFT: 2px; OVERFLOW: auto; WIDTH: 550px; SCROLLBAR-SHADOW-COLOR: #666666; SCROLLBAR-3DLIGHT-COLOR: #666666; SCROLLBAR-ARROW-COLOR: #f3e6a0; SCROLLBAR-DARKSHADOW-COLOR: #444444; HEIGHT: 80px;
  14. }

在网页中使用：

  1. <!-- ^^^^^^^^^^^^^^ 请修改^^^^^^^^^^^^^^ -->
  2. <div id="about">
  3. <p>签名： <br />
  4. (2009-8-29)这个月很忙，老婆肚子大了，公司的工作量大了很多。幸亏现在住进新房子了，晚上在家里加班，可以轻松一点。一边看我的42寸LG液晶电视，一边跟客户聊天，也算有片刻的放松的。
  5. <br />
  6. ---------------------------------------------------------------------------------------------------------
  7. <br />
  8. (2009-8-4)今年过得特别有意义，5月份结婚，6月份老婆说有了，7月份买了房子。好像一下子过了常人的几年时光。特别想记录这段日子发生的事情，于是我的tomgo博客又重开了。 </p>
  9. </div>
  10. <!-- ^^^^^^^^^^^^^^ 请修改 ^^^^^^^^^^^^^^ -->

效果请看我的博客的头部滚动条的签名.

]]> http://www.54tomgo.com/archives/430.html/feed 0