转：div+css布局实例分析(一)

1. 1.全部的代码均在一个DIV容器(我暂时这样称呼) Head里面,我们来看看Head的写法
2. #Head{
3.     text-align:center;
4. }
5. 为什么Head前面有一个"#"号呢?
6. 而有的却是在前面加一个"．"比如 "．Head",有时候写css的时候干脆什么也不加,比如 td,body,他们有什么区别,具体怎么用,如果仔细你就会发现在HTML代码的DIV容器里面,有的是 <div id="Head"></div> 而有的是这样 <div class="HackBox"></div>
7. 从id和class字面上的意思,我们也已经了解了,id具有唯一性,而class是一个类,适用于可多次重复使用的容器,而前面什么也不带的,便是 CSS里默认的通用于HTML代码的描叙,即对HTML里的代码起全局作用,比如 td,便是对HTML表格里面的全部列起作用,text-align:center是指在此容器里面的文字全部居中对齐,我们注意到,行后面还有一个分号 ";",
8. 语法 text-align : left | right | center | justify 
9. 取值说明：
10. left  : 默认值。左对齐 
11. right  : 右对齐 
12. center  : 居中对齐 
13. justify  : 两端对齐 
15. 2.HeadTop
16. #Head #HeadTop{
17.     position:relative;
18.     width:760px;
19.     margin:10px auto 10px;
20.     text-align:left;
21. }
22. 为什么#HeadTop前面会有一个#Head?
23. 我们发现#headTop是嵌套在#Head里面的,为了Head里面的设置在HeadTop里面同样生效,将HeadTop放在了Head后面
25. position : static | absolute | fixed | relative 
26. 取值：
27. static  : 默认值。无特殊定位，对象遵循HTML定位规则 
28. absolute  : 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义 
29. fixed  :未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 
30. relative  :对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置 
32. width : auto | length
33. auto  : 默认值。无特殊定位，根据HTML定位规则分配 
34. length  : 由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的宽度。不可为负数。 可以用相对长度象素单位px或者绝对长度in等做单位(1in = 2.54cm = 25.4 mm = 72pt = 6pc)
36. margin:10px auto 10px;
37. 检索或设置对象四边的外补丁
38. 如果提供全部四个参数值，将按上－右－下－左(顺时针方向)的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
40. text-align:left;
41. 我们看到Head里面已经有设置文字对齐是居中的了,而这里又定义文字居左,那么到底文字怎么对齐呢?如果有相冲突的定义,CSS将按最近的一个定义来执 行,这跟HTML中的是一样的,比如<font color=red><font color=green>我到底是什么颜色?</font></font>
43. 3.
44. #Head #Logo{
45.     width: 240px;
46.     height: 31px;
47.     float: left;
48.     margin-left: 2px;
49. }
50. width(宽度),height(高度)都不说了
51. float : none | left | right 
52. 取值：
53. none  : 默认值。对象不飘浮 
54. left  : 文本流向对象的右边 
55. right  : 文本流向对象的左边
56. 翻译为漂浮,left说明是从左开始排列
57. margin-left: 2px; 相当于 maign:0px;0px;0px;2px
58. 这里Logo容器说明的是,从左开始排列,宽度为240px,高度为31px,左补丁(左边空余)2px宽
60. 4.HeadNavBar左边导航条
61. #Head #HeadNavBar{
62.     float:right;
63.     clear:right;
64.     background: url(images/header_mm_bk.gif) left top no-repeat;
65.     width:510px;
66. }
68. clear:right;清除右浮动,说明右边不能再有容器
69. clear : none | left | right | both
70. background: url(images/header_mm_bk.gif) left top no-repeat;
71. (意思是背景图片左,上对齐,不重复)
72. background : background-color || background-image || background-repeat || background-attachment || background-position
73. background-color:silver; 背景色
74. background-image:url(http://www.dayanmei.com/images/space.gif); 
75. 当同时存在背景图片和背景色时背景色将被覆盖
76. background-repeat : repeat | no-repeat | repeat-x | repeat-y 
77. 取值：
78. repeat  : 默认值。背景图像在纵向和横向上平铺 
79. no-repeat  : 背景图像不平铺 
80. repeat-x  : 背景图像仅在横向上平铺 
81. repeat-y  : 背景图像仅在纵向上平铺
82. background-attachment : scroll | fixed 
83. 取值：
84. scroll  : 默认值。背景图像是随对象内容滚动 
85. fixed  : 背景图像固定 
86. background-position : length || length 
87. background-position : position || position 
88. 取值：
89. length  : 百分数 | 由浮点数字和单位标识符组成的长度值。  
90. position  : top | center | bottom | left | center | right 
92. 整句的意思是宽度为510px象素的容器从右往左排列
94. 5.
95. #Head ul{
96.     list-style-type:none;
97.     margin:0;
98.     padding:0;
99. }
100. list-style-type:none;
101. list-style : list-style-image || list-style-position || list-style-type 
102. list-style-image : url ( url );可以将列表样式改变为图片
104. list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none 
105. 取值：可以将列表改变为其他样式
106. disc  : CSS1  默认值。实心圆 
107. circle  : CSS1  空心圆 
108. square  : CSS1  实心方块 
109. decimal  : CSS1  阿拉伯数字 
110. lower-roman  : CSS1  小写罗马数字 
111. upper-roman  : CSS1  大写罗马数字 
112. lower-alpha  : CSS1  小写英文字母 
113. upper-alpha  : CSS1  大写英文字母 
114. none  : CSS1  不使用项目符号 
117. 6.
118. #Head #HeadNavBar li{
119.     float:left;
120.     height:31px;
121.     background: url(images/header_mm_sep.gif) left center no-repeat;
122.     display:inline;
123. }
124. display:inline; 内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行(显示在行内,超出的将不显示)
125. display : block | none | inline | inline-block 
127. 7.
128. #Head #HeadNavBar li.NoSep{
129.     background: none;
130.     margin-left: 5px;
131. }
132. 当列表区块内标志类为NoSep时,没有背景色"background: url(images/header_mm_sep.gif) left center no-repeat;",并且左补丁为5px
134. 8.#MyTaoBao {
135.     padding-left: 14px!important;
136.     margin-left: 9px!important;
137.     margin-left: 4px;
138.     background:transparent url(images/header_mm_mytb_icon.gif) no-repeat left center;
139. }
140. padding:lenth;内补丁,用法参考margin,
141. padding-left: 14px;是指左边空余14px的值,这空余是用来放置居左中的背景图片的
142. !important;提升指定样式规则的应用优先权。
144. 9.设置列表内的链接样式
145. #Head #HeadNavBar li a{
146.     display:block;
147.     padding: 0 6px 0 7px;
148.     float:left;
149.     height:31px;
150.     line-height:31px;
151.     color: #0f3a66;
152.     font-size: 13px;
153. }
154. display:block; 以块状呈现
155. padding: 0 6px 0 7px;左右内补丁各为7px,6px
156. color: #0f3a66;链接时文字颜色为#0f3a66;
157. 链接的完整定义还可以包含背景颜色background,链接样式text-decoration(text-decoration : none[无装饰] || underline[下划线] || blink[文字闪烁] || overline[上划线] || line-through[贯穿线])
158. 链接的顺序应该是这样的(LVHA)
159. a:link
160. a :visited
161. a :hover
162. a :active
165. #Head #HeadNavBar li a:hover{
166.     color: #e60;
167. }
169. 10.
170. #Head #HeadNavBar li#AdvanceBox {
171.     background: none;
172.     margin-left: 10px;
173. }
174. 由于AdvanceBox是在块li里面,故顺序为#Head #HeadNavBar li#AdvanceBox,这句意思是无背景,左外补丁(左空余)为10px;
176. 11.为#AdvanceBox内的其他表单元素定义
177. #Head #HeadNavBar li#AdvanceBox form {
178.     margin:0;
179.     padding:0;
180.     margin-left:8px;
181.     margin-top:5px;
182. }
184. #Head #HeadNavBar li#AdvanceBox .HeaderSearchBox {
185.     display:block;
186.     float:left;
187.     width:112px;
188.     height:15px!important;
189.     height /*ie55*/: 21px;
190.     padding:3px 2px 1px 2px; 
191.     padding-right:0;
192.     border: 1px solid #7ad2ff;
193.     background:url(images/header_mm_srch_bk.png) no-repeat; 
194.     color: #000;
195. }
197. #Head #HeadNavBar li#AdvanceBox input.DC {
198.     color: #90B1C5 !important;
199. }
201. #Head #HeadNavBar li#AdvanceBox .HeaderSearchBtn {
202.     display:block;
203.     float:left;
204.     margin-left /*ie55*/: -3px;
205. }
207. #Head #HeadNavBar li#AdvanceBox li {
208.     background: none!important;
209. }
211. 12.#QuickLinks
212. #Head #QuickLinks{
213.     float:right;
214.     width:750px;
215.     margin-top:6px;
216.     margin-right:6px;
217. }
218. 右浮动,宽度为750px,上,右补丁各为6px
220. 13.为#Head #QuickLinks定义列表li样式
221. #Head #QuickLinks li{
222.     float: right;
223.     margin-left:10px;
224.     line-height:21px;
225. }
226. line-height:21px; 行高21px;
228. 14.定义#Head #QuickLinks li内链接样式,多个相同的定义时可以用","分割开,而且路径要写完整
229. #Head #QuickLinks li a:link, #Head #QuickLinks li a:visited {
230.     font-style:normal;
231.     font-weight:normal;
232.     font-size: 12px;
233.     color:#04d;
234. }
236. #Head #QuickLinks li a:hover, #Head #QuickLinks li a:active {
237.     color:#e60;
238. }
240. 15.
241. .HackBox{
242.    border-top:1px solid transparent !important;
243.    border-top:0;
244.    clear:both;
245. }
246. 这里有两个重复定义的border-top(上边框,!important优先,边框为1px,透明
247. clear:both; 左右浮动均清除,类似换一行
249. 淘宝头部导航已经基本分析完成,现在总结一下:
251. (1).容器div可以嵌套,比如 <div id="Head"><div id="Logo"></div></div>,嵌套时容器的写法:需要在前面加上容器的命名,如 #Head #Logo,我们发现,Logo虽然在容器"HeadTop"里面却不用写成 #Head #HeadTop #Logo,因为HeadTop并没有对Logo限制
253. (2).独特的容器名字前面加符号 "#",通用的前面加符号小句点"."
255. (3).容器的基本参数包括 外补丁 margin,内补丁 padding,宽度 width,背景 background,浮动 float,清除 clear,这几个参见参数的用法要熟记
257. (4).需要换行显示时用 clear:both;
259. (5).可以单独为某个容器定义链接样式, 顺序为 LVHA(a:link,a:visited,a:hover,a:active),链接样式的几个参数背景(background),内补丁 (padding)宽度(width)描述(text-decoration)文字颜色(color)等,可以设置链接以块状方式显示