对于刚入门学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容器里面,有的是
而有的是这样
从id和class字面上的意思,我们也已经了解了,id具有唯一性,而class是一个类,适用于可多次重复使用的容器,而前面什么也不带的,便是 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 | length
auto  :? 默认值。无特殊定位，根据html定位规则分配
length  :? 由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的宽度。不可为负数。 可以用相对长度象素单位px或者绝对长度in等做单位(1in = 2.54cm = 25.4 mm = 72pt = 6pc)
margin:10px auto 10px;
检索或设置对象四边的外补丁
如果提供全部四个参数值，将按上－右－下－左(顺时针方向)的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
text-align:left;
我们看到head里面已经有设置文字对齐是居中的了,而这里又定义文字居左,那么到底文字怎么对齐呢?如果有相冲突的定义,css将按最近的一个定义来执 行,这跟html中的是一样的,比如我到底是什么颜色?
3.
#head #logo{
    width: 240px;
    height: 31px;
    float: left;
    margin-left: 2px;
}
width(宽度),height(高度)都不说了
float : none | left | right
取值：
none  :? 默认值。对象不飘浮
left  :? 文本流向对象的右边
right  :? 文本流向对象的左边
翻译为漂浮,left说明是从左开始排列
margin-left: 2px; 相当于 maign:0px;0px;0px;2px
这里logo容器说明的是,从左开始排列,宽度为240px,高度为31px,左补丁(左边空余)2px宽
4.headnavbar左边导航条
#head #headnavbar{
    float:right;
    clear:right;
    background: url(images/header_mm_bk.gif) left top no-repeat;
    width:510px;
}
clear:right;清除右浮动,说明右边不能再有容器
clear : none | left | right | both
background: url(images/header_mm_bk.gif) left top no-repeat;
(意思是背景图片左,上对齐,不重复)
background : background-color || background-image || background-repeat || background-attachment || background-position
background-color:silver; 背景色
background-image:url(http://www.dayanmei.com/images/space.gif);
当同时存在背景图片和背景色时背景色将被覆盖
background-repeat : repeat | no-repeat | repeat-x | repeat-y
取值：
repeat  :? 默认值。背景图像在纵向和横向上平铺
no-repeat  :? 背景图像不平铺
repeat-x  :? 背景图像仅在横向上平铺
repeat-y  :? 背景图像仅在纵向上平铺
background-attachment : scroll | fixed
取值：
scroll  :? 默认值。背景图像是随对象内容滚动
fixed  :? 背景图像固定
background-position : length || length
background-position : position || position
取值：
length  :? 百分数 | 由浮点数字和单位标识符组成的长度值。 
position  :? top | center | bottom | left | center | right
整句的意思是宽度为510px象素的容器从右往左排列
5.
#head ul{
    list-style-type:none;
    margin:0;
    padding:0;
}
list-style-type:none;
list-style : list-style-image || list-style-position || list-style-type
list-style-image : url ( url );可以将列表样式改变为图片
list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
取值：可以将列表改变为其他样式
disc  :? css1  默认值。实心圆
circle  :? css1  空心圆
square  :? css1  实心方块
decimal  :? css1  阿拉伯数字
lower-roman  :? css1  小写罗马数字
upper-roman  :? css1  大写罗马数字
lower-alpha  :? css1  小写英文字母
upper-alpha  :? css1  大写英文字母
none  :? css1  不使用项目符号
6.
#head #headnavbar li{
    float:left;
    height:31px;
    background: url(images/header_mm_sep.gif) left center no-repeat;
    display:inline;
}
display:inline; 内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行(显示在行内,超出的将不显示)
display : block | none | inline | inline-block
7.
#head #headnavbar li.nosep{
    background: none;
    margin-left: 5px;
}
当列表区块内标志类为nosep时,没有背景色background: url(images/header_mm_sep.gif) left center no-repeat;,并且左补丁为5px
8.#mytaobao {
    padding-left: 14px!important;
    margin-left: 9px!important;
    margin-left: 4px;
    background:transparent url(images/header_mm_mytb_icon.gif) no-repeat left center;
}
padding:lenth;内补丁,用法参考margin,
padding-left: 14px;是指左边空余14px的值,这空余是用来放置居左中的背景图片的
!important;提升指定样式规则的应用优先权。
9.设置列表内的链接样式
#head #headnavbar li a{
    display:block;
    padding: 0 6px 0 7px;
    float:left;
    height:31px;
    line-height:31px;
    color: #0f3a66;
    font-size: 13px;
}
display:block; 以块状呈现
padding: 0 6px 0 7px;左右内补丁各为7px,6px
color: #0f3a66;链接时文字颜色为#0f3a66;
链接的完整定义还可以包含背景颜色background,链接样式text-decoration(text-decoration : none[无装饰] || underline[下划线] || blink[文字闪烁] || overline[上划线] || line-through[贯穿线])
链接的顺序应该是这样的(lvha)
a:link
a :visited
a :hover
a :active
#head #headnavbar li a:hover{
    color: #e60;
}
10.
#head #headnavbar li#advancebox {
    background: none;
    margin-left: 10px;
}
由于advancebox是在块li里面,故顺序为#head #headnavbar li#advancebox,这句意思是无背景,左外补丁(左空余)为10px;
11.为#advancebox内的其他表单元素定义
#head #headnavbar li#advancebox form {
    margin:0;
    padding:0;
    margin-left:8px;
    margin-top:5px;
}
#head #headnavbar li#advancebox .headersearchbox {
    display:block;
    float:left;
    width:112px;
    height:15px!important;
    height /*ie55*/: 21px;
    padding:3px 2px 1px 2px;
    padding-right:0;
    border: 1px solid #7ad2ff;
    background:url(images/header_mm_srch_bk.png) no-repeat;
    color: #000;
}
#head #headnavbar li#advancebox input.dc {
    color: #90b1c5 !important;
}
#head #headnavbar li#advancebox .headersearchbtn {
    display:block;
    float:left;
    margin-left /*ie55*/: -3px;
}
#head #headnavbar li#advancebox li {
    background: none!important;
}
12.#quicklinks
#head #quicklinks{
    float:right;
    width:750px;
    margin-top:6px;
    margin-right:6px;
}
右浮动,宽度为750px,上,右补丁各为6px
13.为#head #quicklinks定义列表li样式
#head #quicklinks li{
    float: right;
    margin-left:10px;
    line-height:21px;
}
line-height:21px; 行高21px;
14.定义#head #quicklinks li内链接样式,多个相同的定义时可以用,分割开,而且路径要写完整
#head #quicklinks li a:link, #head #quicklinks li a:visited {
    font-style:normal;
    font-weight:normal;
    font-size: 12px;
    color:#04d;
}
#head #quicklinks li a:hover, #head #quicklinks li a:active {
    color:#e60;
}
15.
.hackbox{
   border-top:1px solid transparent !important;
   border-top:0;
   clear:both;
}
这里有两个重复定义的border-top(上边框,!important优先,边框为1px,透明
clear:both; 左右浮动均清除,类似换一行
淘宝头部导航已经基本分析完成,现在总结一下:
(1).容器div可以嵌套,比如
,嵌套时容器的写法:需要在前面加上容器的命名,如 #head #logo,我们发现,logo虽然在容器headtop里面却不用写成 #head #headtop #logo,因为headtop并没有对logo限制
(2).独特的容器名字前面加符号 #,通用的前面加符号小句点.
(3).容器的基本参数包括 外补丁 margin,内补丁 padding,宽度 width,背景 background,浮动 float,清除 clear,这几个参见参数的用法要熟记
(4).需要换行显示时用 clear:both;
(5).可以单独为某个容器定义链接样式, 顺序为 lvha(a:link,a:visited,a:hover,a:active),链接样式的几个参数背景(background),内补丁 (padding)宽度(width)描述(text-decoration)文字颜色(color)等,可以设置链接以块状方式显示
其他未总结之处,请多看源码.