层的定位之div +css 兼容问题

平时我们在做一个页面的时候，首先会考虑到div+css  常规的做法是一个背景图片，然后再上面补充文字

 

比如我要做这样一个效果

 

 

 

我们最终会拿到一张背景图片：

 

 

设为背景开始加文字和链接。  普通的做法是定义两个层 使用绝对定位--

代码示例

<div style="margin:auto;width:834px; top:0px; height:183px; border:solid 1px #000; overflow:hidden; text-align:center; background:url(ds.gif)"> <div style="position:absolute;top:61px; z-index:2; width:272px; margin:0px auto; left:309px; font-size:13px; line-height:2.0em;" align="left"> <li style="list-style-type:none;" mce_style="list-style-type:none;">玩童会特享昂立欢乐英语晚托班20元/月</li> <li >疯狂家族儿童俱乐部免费试听＋5.5折优惠</li> <li>龅牙兔儿童情商训练营团购即享9.3折</li> <li>上海乐高活动中心团购立减800元</li> </div> <div id="dd" style="position:absolute; top:61px; z-index:2; width:280px; margin:0px auto; left: 639px; font-size:13px; color:#003366; line-height:2.0em;" align="left"> <li >优艺稼国际少年艺术教育中心团购8.5折优惠</li> <li>英国皇家舞蹈学院考级班团购立减50元</li> <li>大艺术儿童视觉创意中心8.5折！</li> <li>朱宗庆打击乐教学团购优惠</li> </div> </div>

这样写 只能适应一种浏览器，而且常常会出现意外

-----------------------------------------------------------------------分割线---------------------------------------------------------------------

正确的写法应该是这样的

<div style="margin:0px auto; border: solid 1px #000; overflow: hidden;width:836px;"> <div id="gg" style="font-size:13px; color: #003366; background: url(ds.gif) repeat-y;width:834px;height:180px;overflow:hidden;line-height: 2.0em;"> <ul style="float:left;margin-left:190px;padding-top:32px;+padding-top:42px;+padding-left:40px;clear:both;_margin-left:100px;" mce_style="float:left;margin-left:190px;padding-top:32px;+padding-top:42px;+padding-left:40px;clear:both;_margin-left:100px;"> <li>玩童会特享昂立欢乐英语晚托班20元/月</li> <li>疯狂家族儿童俱乐部免费试听＋5.5折优惠</li> <li>龅牙兔儿童情商训练营团购即享9.3折</li> <li>上海乐高活动中心团购立减800元</li></ul> <ul style="float:left;padding-top:32px;padding-left:90px;+padding-top:42px;*margin-left:0px;" mce_style="float:left;padding-top:32px;padding-left:90px;+padding-top:42px;*margin-left:0px;"> <li>优艺稼国际少年艺术教育中心团购8.5折优惠</li> <li>英国皇家舞蹈学院考级班团购立减50元</li> <li>大艺术儿童视觉创意中心8.5折！</li> <li>朱宗庆打击乐教学团购优惠</li> </ul> </div> </div>

 

简单的对比一下，看看区别怎么这么大  注意（*+是针对IE7的css hack     *是针对所有IE浏览器   _是针对IE6浏览器 +兼容ie7）

其实最重要的地方还是关于 margin 和 padding 等参数的设置

 

padding-top 属性设置元素的上内边距

比如“回”字， 保持其他相对位置不变，“回”字里面的口最上面一横与外面口上面横的距离

 

 

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

说明

这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

注释：允许使用负值。

例子 1

margin:10px 5px 15px 20px;

• 上外边距是 10px
• 右外边距是 5px
• 下外边距是 15px
• 左外边距是 20px

 

 

语法：

float : none | left | right

取值：

none	:	默认值。对象不飘浮
left	:	文本流向对象的右边
right	:	文本流向对象的左边

 

 

将内容都放到一个层a里边利用 margin调整其在层a中的布局，位置

然后将层a放入层b中，利用padding 调整a相对于b的位置。

 

总结：正规的写法要把样式都提取出来，放到一个styl里