教你一个最常用的前台小模块布局的最佳css解决方案,兼容IE8.0 7.0 6.0 Firefox3.5 2.0 google oprea 苹果浏览器等
2009-07-26 23:04
369 查看
虽然我是做后台的,但有时候难免要做些前台,最常设计的模块布局,如下图
原来我们用table布局时,不用说都很简单
但随着web2.0的到来,采用css布局,用不好还比较麻烦,一直以来,我都用浮动来定位那个“更多”的span ,这样有好多问题 浏览器兼容也众口难调
结构如下:
<div class="block">
<ul>
<li><h4>标题<h4><span class="more">更多<span><li>
</ul>
<div class="content">内容</div>
</div>
今天在开老外的一个站点的源代码时 发现了一个最佳解决方案
结构代码如下:
<div class="box">
<h4>标题</h4>
<dl class="title">
<dd>更多</dd>
</dl>
<div class="content">
内容
</div>
</div>css代码:
1 *{ margin:0; padding:0;}
2 .box{width:200px;position:relative;}
3 .box h4{height:26px; background:#f00; line-height:25px;}
4 .title{position:absolute; top:1px; right:3px;line-height:25px;}
5 .content{border:1px solid #CCDFF2;overflow:hidden;}
注意 *{ margin:0; padding:0;}是必须的 还有就是box的position:relative;是必须的 不然当你绝对定位“更多”时会出问题
这样 我们要建这样的小模块 就很爽了 只要复制 修改 ,还可以在h4上用漂亮的背景图
好了附图我美化过的;
还不错吧???
原来我们用table布局时,不用说都很简单
但随着web2.0的到来,采用css布局,用不好还比较麻烦,一直以来,我都用浮动来定位那个“更多”的span ,这样有好多问题 浏览器兼容也众口难调
结构如下:
<div class="block">
<ul>
<li><h4>标题<h4><span class="more">更多<span><li>
</ul>
<div class="content">内容</div>
</div>
今天在开老外的一个站点的源代码时 发现了一个最佳解决方案
结构代码如下:
<div class="box">
<h4>标题</h4>
<dl class="title">
<dd>更多</dd>
</dl>
<div class="content">
内容
</div>
</div>css代码:
1 *{ margin:0; padding:0;}
2 .box{width:200px;position:relative;}
3 .box h4{height:26px; background:#f00; line-height:25px;}
4 .title{position:absolute; top:1px; right:3px;line-height:25px;}
5 .content{border:1px solid #CCDFF2;overflow:hidden;}
注意 *{ margin:0; padding:0;}是必须的 还有就是box的position:relative;是必须的 不然当你绝对定位“更多”时会出问题
这样 我们要建这样的小模块 就很爽了 只要复制 修改 ,还可以在h4上用漂亮的背景图
好了附图我美化过的;
还不错吧???
相关文章推荐
- 教你一个最常用的前台小模块布局的最佳css解决方案,兼容IE8.0 7.0 6.0 Firefox3.5 2.0 google oprea 苹果浏览器等
- 解决CSS各种IE各种兼容问题(Google解决方案)
- 常用IE与Firefox的CSS兼容差异及解决方法
- Web 标准下兼容多浏览器的 CSS 布局常用技巧 http://bbs.ixuer.net/viewthread.php?tid=1410&extra=page%3D1
- CSS常用布局之——等分等高解决方案
- CSS浏览器兼容问题整理(IE6.0、IE7.0+ 与 FireFox)
- 使用IE条件注释 实现兼容 IE, Opera, Firefox 的 DIV+CSS 表格布局 By shawl.qiu
- CSS浏览器兼容问题整理(IE6.0、IE7.0+ 与 FireFox)(一)
- DIV+CSS布局在IE和firefox中常见不兼容问题及解决方法
- CSS常用布局之——水平垂直居中解决方案
- CSS浏览器兼容问题整理(IE6.0、IE7.0+ 与 FireFox)(二)
- Flex 布局教程:语法篇 作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是 CSS 的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖 display 属性 + po
- CSS浏览器兼容问题整理(IE6.0、IE7.0+ 与 FireFox)(三)
- 前台小模块CSS布局代码
- 一个系统的base.css,兼容IE7,IE8,IE9,IE10,IE11,firefox,safari,谷歌,360,世界之窗等浏览器起的公共css
- CSS常用布局之——一列定宽,一列自适应解决方案
- 黄聪:DIV+CSS建站经验总结,不同版本IE下CSS布局bug问题(IE5、IE6、IE7、IE8、火狐Firefox兼容)
- CSS在IE6、IE7和Firefox兼容的一个小技巧
- CSS浏览器兼容问题整理(IE6.0、IE7.0+ 与 FireFox)(四)
- .使用 HTML+CSS 实现如图布局,border-widht 5px,一个格子大小是 50*50,hover时候边框变为红色(兼容IE6+,考虑语义化的结构)