div+css布局实例淘宝店铺装修分析聊天之家 COME ON CHAT 时间:2008-05-06 对于刚入门学DIV,CSS布局的朋友来说,不知道从那里下手,我以为从分析优秀网站的源代码来学习div,css布局是一个不错的方法,这篇div+ css布局教程是我自己在边分析边学习中总结出来的,如果你要转载请注明出处,另外本人特别声明:本教程只是分析淘宝网站的HTML,CSS源代码,作为 一个教程的例子,达到学习DIV+CSS排版的效果,请勿模仿淘宝,或者仿照淘宝制作网站,谢谢,这是第一篇,淘宝顶部排版方式 2.HeadTop #Head #HeadTop{ position:relative; width:760px; margin:10px auto 10px; text-align:left; } 为什么#HeadTop前面会有一个#Head? 我们发现#headTop是嵌套在#Head里面的,为了Head里面的设置在HeadTop里面同样生效,将HeadTop放在了Head后面 position : static | absolute | fixed | relative 取值: static : 默认值。无特殊定位,对象遵循HTML定位规则 absolute : 将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据 body 对象。而其层叠通过 z-index 属性定义 fixed :未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 relative :对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置 width : auto | length auto : 默认值。无特殊定位,根据HTML定位规则分配 length : 由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的宽度。不可为负数。 可以用相对长度象素单位px或者绝对长度in等做单位(1in = 2.54cm = 25.4 mm = 72pt = 6pc) margin:10px auto 10px; 检索或设置对象四边的外补丁 如果提供全部四个参数值,将按上-右-下-左(顺时针方向)的顺序作用于四边。如果只提供一个,将用于全部的四边。如果提供两个,第一个用于上-下,第二个用于左-右。如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。 |
|