职业IT人-IT人生活圈

 找回密码
 成为会员
搜索
查看: 610|回复: 7

Css模仿IGoogle模块样式(无图片纯样式控制)

[复制链接]
北大青鸟 发表于 2011-6-20 16:45 | 显示全部楼层 |阅读模式
Java代码  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
    <title></title>   
    <style type="text/css">   
        div,body,h3{ padding:0; margin:0;}   
        .DemoDiv,.DemoDivOn { width: 32%; min-width:200px; height: 300px; padding:20px;}   
        .xb1,  .xb2,  .xb3,  .xb4,  .xb5,  .xb6,  .xb7 { display: block; overflow: hidden; }   
        .xb1,  .xb2,  .xb3,  .xb5,  .xb6 { height: 1px; }           
        .xb1 { margin: 0 5px; background: #cfe2e5; }   
        .DemoDivOn .xb1 { margin: 0 5px; background: #61a4b0; }   
        .xb2 { margin: 0 3px; border-width: 0 2px; }   
        .xb3 { margin: 0 2px; }   
        .xb4 { height: 2px; margin: 0 1px; }   
        .xb5 { margin: 0 3px; border-width: 0 2px; }   
        .xb6 { margin: 0 2px; }   
        .xb7 { height: 2px; margin: 0 1px; }           
        .xb2,  .xb3,  .xb4 { background: #aad9e2; border-left: 1px solid #cfe2e5; border-right: 1px solid #cfe2e5; }   
        .xb5,  .xb6,  .xb7 { background: #ffffff; border-left: 1px solid #cfe2e5; border-right: 1px solid #cfe2e5; }   
        .DemoDivOn .xb2, .DemoDivOn .xb3, .DemoDivOn .xb4 { background: #aad9e2; border-left: 1px solid #61a4b0; border-right: 1px solid #61a4b0; }   
        .DemoDivOn .xb5, .DemoDivOn .xb6, .DemoDivOn .xb7 { background: #ffffff; border-left: 1px solid #61a4b0; border-right: 1px solid #61a4b0; }           
        .xboxcontent{display: block;  background: #FFFFFF; border: 0 solid #cfe2e5; border-width: 0 1px;}           
        .DemoDivOn .xboxcontent { border: 0 solid #61a4b0;border-width: 0 1px; }   
        .xtop { display: block; background: transparent; font-size: 1px; }   
        .xbottom { display: block; background: transparent; font-size: 1px; }   
        h3 { height: 20px; font-size: 12px; background: #aad9e2; text-indent: 10px; color: #2c6e91; font-weight: bolder;}   
        .content { padding-top: 3px; padding-left: 5px; padding-right: 5px; padding-bottom: 3px; }           
    </style>   
</head>   
<body>   
    <div class="DemoDiv" onmouseover="this.className='DemoDivOn'" onmouseout="this.className='DemoDiv'">   
        <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>   
        <div class="xboxcontent">   
            <h3>谷歌资讯</h3>   
            <div id="content" class="content">   
                两江传媒网 因洪水吉林7000化工原料桶漂入松花江 水质受影响有限 - 新浪网 7月28日,吉林省永吉县境内发生特大洪水,7千只化工原料桶被冲入松花江,经检查,松花江水质受影响有限。   
                受暴雨影响,7月28日,吉林省永吉县境内发生特大洪水,永吉县经济开发区新亚强化工厂一批装有三甲基一氯 ...... 查看相关报道 ? 中国山东网 记者因曝上市公司内幕遭通缉   
                - 新浪网 27日,一则有关“经济观察报记者因报道上市公司关联交易内幕遭全国通缉”的微博(http://t.sina.com.cn)消息引爆网络。 发帖者称,经济观察报记者仇子明因为报道了上市公司凯恩公司(002012)关联交易内幕,被凯恩   
                ...... 查看相关报道 ? 新浪网 直击栾川大桥垮塌救援现场:家属接遇难者回家 - 中新网 7月24日,河南省栾川县潭头镇汤营伊河大桥,遭受特大洪水导致桥体发生整体垮塌,人员伤亡惨重。   
            </div>   
        </div>   
        <b class="xbottom"><b class="xb7"></b><b class="xb6"></b><b class="xb5"></b><b class="xb1"></b></b>   
     </div>   
</body>   
</html>  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        div,body,h3{ padding:0; margin:0;}
        .DemoDiv,.DemoDivOn { width: 32%; min-width:200px; height: 300px; padding:20px;}
        .xb1,  .xb2,  .xb3,  .xb4,  .xb5,  .xb6,  .xb7 { display: block; overflow: hidden; }
        .xb1,  .xb2,  .xb3,  .xb5,  .xb6 { height: 1px; }        
        .xb1 { margin: 0 5px; background: #cfe2e5; }
        .DemoDivOn .xb1 { margin: 0 5px; background: #61a4b0; }
        .xb2 { margin: 0 3px; border-width: 0 2px; }
        .xb3 { margin: 0 2px; }
        .xb4 { height: 2px; margin: 0 1px; }
        .xb5 { margin: 0 3px; border-width: 0 2px; }
        .xb6 { margin: 0 2px; }
        .xb7 { height: 2px; margin: 0 1px; }        
        .xb2,  .xb3,  .xb4 { background: #aad9e2; border-left: 1px solid #cfe2e5; border-right: 1px solid #cfe2e5; }
        .xb5,  .xb6,  .xb7 { background: #ffffff; border-left: 1px solid #cfe2e5; border-right: 1px solid #cfe2e5; }
        .DemoDivOn .xb2, .DemoDivOn .xb3, .DemoDivOn .xb4 { background: #aad9e2; border-left: 1px solid #61a4b0; border-right: 1px solid #61a4b0; }
        .DemoDivOn .xb5, .DemoDivOn .xb6, .DemoDivOn .xb7 { background: #ffffff; border-left: 1px solid #61a4b0; border-right: 1px solid #61a4b0; }        
        .xboxcontent{display: block;  background: #FFFFFF; border: 0 solid #cfe2e5; border-width: 0 1px;}        
        .DemoDivOn .xboxcontent { border: 0 solid #61a4b0;border-width: 0 1px; }
        .xtop { display: block; background: transparent; font-size: 1px; }
        .xbottom { display: block; background: transparent; font-size: 1px; }
        h3 { height: 20px; font-size: 12px; background: #aad9e2; text-indent: 10px; color: #2c6e91; font-weight: bolder;}
        .content { padding-top: 3px; padding-left: 5px; padding-right: 5px; padding-bottom: 3px; }        
    </style>
</head>
<body>
    <div class="DemoDiv" onmouseover="this.className='DemoDivOn'" onmouseout="this.className='DemoDiv'">
        <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
        <div class="xboxcontent">
            <h3>谷歌资讯</h3>
            <div id="content" class="content">
                两江传媒网 因洪水吉林7000化工原料桶漂入松花江 水质受影响有限 - 新浪网 7月28日,吉林省永吉县境内发生特大洪水,7千只化工原料桶被冲入松花江,经检查,松花江水质受影响有限。
                受暴雨影响,7月28日,吉林省永吉县境内发生特大洪水,永吉县经济开发区新亚强化工厂一批装有三甲基一氯 ...... 查看相关报道 ? 中国山东网 记者因曝上市公司内幕遭通缉
                - 新浪网 27日,一则有关“经济观察报记者因报道上市公司关联交易内幕遭全国通缉”的微博(http://t.sina.com.cn)消息引爆网络。 发帖者称,经济观察报记者仇子明因为报道了上市公司凯恩公司(002012)关联交易内幕,被凯恩
                ...... 查看相关报道 ? 新浪网 直击栾川大桥垮塌救援现场:家属接遇难者回家 - 中新网 7月24日,河南省栾川县潭头镇汤营伊河大桥,遭受特大洪水导致桥体发生整体垮塌,人员伤亡惨重。
            </div>
        </div>
        <b class="xbottom"><b class="xb7"></b><b class="xb6"></b><b class="xb5"></b><b class="xb1"></b></b>
     </div>
</body>
</html>


江南枫 发表于 2011-6-20 16:45 | 显示全部楼层
现只是一个雏形,希望大家一起优化或者提出更好的方法,共同学习。

fossil 发表于 2011-6-20 16:45 | 显示全部楼层
根据display:block模拟画笔方式画线。
优点:内容大小自适应。
      当hover时圆角边框有整体变化效果。
缺点:整个模块的背景色会是纯色,如页面背景用了色彩丰富的图片与模块之间会有明显的差异。





broken 发表于 2011-6-20 16:46 | 显示全部楼层
挺好的,不过这样对性能的消耗还是比不上图片啊

江南枫 发表于 2011-6-20 16:46 | 显示全部楼层
图片的话就需要4张去实现了
也是一种解决方式

曾经的小孩 发表于 2011-6-20 16:46 | 显示全部楼层
上传一个效果图就更好了

芷馨 发表于 2011-6-20 16:46 | 显示全部楼层
嗯LS建议不错

大小: 86.1 KB

大小: 86.7 KB
查看图片附件



jinchang 发表于 2011-8-16 10:02 | 显示全部楼层
哦...............
您需要登录后才可以回帖 登录 | 成为会员

本版积分规则

QQ|手机版|小黑屋|网站帮助|职业IT人-IT人生活圈 ( 粤ICP备12053935号-1 )|网站地图
本站文章版权归原发布者及原出处所有。内容为作者个人观点,并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是信息平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽造成漏登,请及时联系我们,我们将根据著作权人的要求立即更正或者删除有关内容。

GMT+8, 2024-3-29 06:55 , Processed in 0.140563 second(s), 20 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表