浏览 7423 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (7)
|
|
---|---|
作者 | 正文 |
发表时间:2011-03-01
最后修改:2011-03-02
<!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> 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2011-03-01
现只是一个雏形,希望大家一起优化或者提出更好的方法,共同学习。
|
|
返回顶楼 | |
发表时间:2011-03-02
根据display:block模拟画笔方式画线。
优点:内容大小自适应。 当hover时圆角边框有整体变化效果。 缺点:整个模块的背景色会是纯色,如页面背景用了色彩丰富的图片与模块之间会有明显的差异。 |
|
返回顶楼 | |
发表时间:2011-03-03
挺好的,不过这样对性能的消耗还是比不上图片啊
|
|
返回顶楼 | |
发表时间:2011-03-04
图片的话就需要4张去实现了
也是一种解决方式 |
|
返回顶楼 | |
发表时间:2011-03-05
上传一个效果图就更好了
|
|
返回顶楼 | |
发表时间:2011-03-08
嗯LS建议不错
|
|
返回顶楼 | |