div+css布局实例淘宝分析(一).docVIP

div+css布局实例淘宝分析(一) div+css布局实例淘宝分析(一) 对于刚入门学DIV,CSS布局的朋友来说,不知道从那里下手,我以为从分析优秀网站的源代码来学习div,css布局是一个不错的方法,这篇div+ css布局教程是我自己在边分析边学习中总结出来的,如果你要转载请注明出处,另外本人特别声明:本教程只是分析淘宝网站的HTML,CSS源代码,作为 一个教程的例子,达到学习DIV+CSS排版的效果,请勿模仿淘宝,或者仿照淘宝制作网站,谢谢,这是第一篇,淘宝顶部排版方式我们看看原始图片通过观察,我们把它分为如下图所示块具体的HTML,DIV+CSS排版样式为 我们一行一行分析, 1.全部的代码均在一个DIV容器(我暂时这样称呼) Head里面,我们来看看Head的写法#Head{??? text-align:center;}为什么Head前面有一个#号呢?而有的却是在前面加一个．比如 ．Head,有时候写css的时候干脆什么也不加,比如 td,body,他们有什么区别,具体怎么用,如果仔细你就会发现在HTML代码的DIV容器里面,有的是 div id=Head/div 而有的是这样 div CSS里默认的通用于HTML代码的描叙,即对HTML里的代码起全局作用,比如 td,便是对HTML表格里面的全部列起作用,text-align:center是指在此容器里面的文字全部居中对齐,我们注意到,行后面还有一个分号 ;,语法 text-align : left | right | center | justify 取值说明：left : 默认值。左对齐 right : 右对齐 center : 居中对齐 justify : 两端对齐 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 | lengthauto : 默认值。无特殊定位，根据HTML定位规则分配 length : 由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的宽度。不可为负数。 可以用相对长度象素单位px或者绝对长度in等做单位(1in = 2.54cm = 25.4 mm = 72pt = 6pc)margin:10px auto 10px;检索或设置对象四边的外补丁如果提供全部四个参数值，将按上－右－下－左(顺时针方向)的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。text-align:left;我们看到Head里面已经有设置文字对齐是居中的了,而这里又定义文字居左,那么到底文字怎么对齐呢?如果有相冲突的定义,CSS将按最近的一个定义来执 行,这跟HTML中的是一样的,比如font color=redfont color=green我到底是什么颜色?/font/font3.#Head #Logo{??? width: 240px;??? height: 31px;??? float: left;??? margin-left: 2px;}width(宽度),height(高度)都不说了float : none | left | right 取值：none : 默认值。对象不飘浮 left : 文本流向对象的右边 right : 文本流向对象的左边翻译为漂浮,left说明是从左开始排列margin-le