免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
最近访问板块 发新帖
查看: 1376 | 回复: 0
打印 上一主题 下一主题

Css模仿IGoogle模块样式(无图片纯样式控制) [复制链接]

论坛徽章:
0
跳转到指定楼层
1 [收藏(0)] [报告]
发表于 2011-03-09 07:26 |只看该作者 |倒序浏览
转自 http://www.javaeye.com/topic/935497
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.     <style type="text/css">
  6.         div,body,h3{ padding:0; margin:0;}
  7.         .DemoDiv,.DemoDivOn { width: 32%; min-width:200px; height: 300px; padding:20px;}
  8.         .xb1,  .xb2,  .xb3,  .xb4,  .xb5,  .xb6,  .xb7 { display: block; overflow: hidden; }
  9.         .xb1,  .xb2,  .xb3,  .xb5,  .xb6 { height: 1px; }        
  10.         .xb1 { margin: 0 5px; background: #cfe2e5; }
  11.         .DemoDivOn .xb1 { margin: 0 5px; background: #61a4b0; }
  12.         .xb2 { margin: 0 3px; border-width: 0 2px; }
  13.         .xb3 { margin: 0 2px; }
  14.         .xb4 { height: 2px; margin: 0 1px; }
  15.         .xb5 { margin: 0 3px; border-width: 0 2px; }
  16.         .xb6 { margin: 0 2px; }
  17.         .xb7 { height: 2px; margin: 0 1px; }        
  18.         .xb2,  .xb3,  .xb4 { background: #aad9e2; border-left: 1px solid #cfe2e5; border-right: 1px solid #cfe2e5; }
  19.         .xb5,  .xb6,  .xb7 { background: #ffffff; border-left: 1px solid #cfe2e5; border-right: 1px solid #cfe2e5; }
  20.         .DemoDivOn .xb2, .DemoDivOn .xb3, .DemoDivOn .xb4 { background: #aad9e2; border-left: 1px solid #61a4b0; border-right: 1px solid #61a4b0; }
  21.         .DemoDivOn .xb5, .DemoDivOn .xb6, .DemoDivOn .xb7 { background: #ffffff; border-left: 1px solid #61a4b0; border-right: 1px solid #61a4b0; }        
  22.         .xboxcontent{display: block;  background: #FFFFFF; border: 0 solid #cfe2e5; border-width: 0 1px;}        
  23.         .DemoDivOn .xboxcontent { border: 0 solid #61a4b0;border-width: 0 1px; }
  24.         .xtop { display: block; background: transparent; font-size: 1px; }
  25.         .xbottom { display: block; background: transparent; font-size: 1px; }
  26.         h3 { height: 20px; font-size: 12px; background: #aad9e2; text-indent: 10px; color: #2c6e91; font-weight: bolder;}
  27.         .content { padding-top: 3px; padding-left: 5px; padding-right: 5px; padding-bottom: 3px; }        
  28.     </style>
  29. </head>
  30. <body>
  31.     <div class="DemoDiv" onmouseover="this.className='DemoDivOn'" onmouseout="this.className='DemoDiv'">
  32.         <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
  33.         <div class="xboxcontent">
  34.             <h3>谷歌资讯</h3>
  35.             <div id="content" class="content">
  36.                 两江传媒网 因洪水吉林7000化工原料桶漂入松花江 水质受影响有限 - 新浪网 7月28日,吉林省永吉县境内发生特大洪水,7千只化工原料桶被冲入松花江,经检查,松花江水质受影响有限。
  37.                 受暴雨影响,7月28日,吉林省永吉县境内发生特大洪水,永吉县经济开发区新亚强化工厂一批装有三甲基一氯 ...... 查看相关报道 &raquo; 中国山东网 记者因曝上市公司内幕遭通缉
  38.                 - 新浪网 27日,一则有关“经济观察报记者因报道上市公司关联交易内幕遭全国通缉”的微博(http://t.sina.com.cn)消息引爆网络。 发帖者称,经济观察报记者仇子明因为报道了上市公司凯恩公司(002012)关联交易内幕,被凯恩
  39.                 ...... 查看相关报道 &raquo; 新浪网 直击栾川大桥垮塌救援现场:家属接遇难者回家 - 中新网 7月24日,河南省栾川县潭头镇汤营伊河大桥,遭受特大洪水导致桥体发生整体垮塌,人员伤亡惨重。
  40.             </div>
  41.         </div>
  42.         <b class="xbottom"><b class="xb7"></b><b class="xb6"></b><b class="xb5"></b><b class="xb1"></b></b>
  43.      </div>
  44. </body>
  45. </html>
复制代码
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

  

北京盛拓优讯信息技术有限公司. 版权所有 京ICP备16024965号-6 北京市公安局海淀分局网监中心备案编号:11010802020122 niuxiaotong@pcpop.com 17352615567
未成年举报专区
中国互联网协会会员  联系我们:huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP