CSS實現(xiàn)頁面布局

1、CSS實現(xiàn)頁面布局第六章 本章關(guān)鍵字float 浮動div 層span 層absolute 據(jù)對定位本章目標(biāo) 了解與頁面布局相關(guān)的CSS屬性 理解CSS的盒狀模型 理解DIV標(biāo)簽和SPAN標(biāo)簽 掌握CSS實現(xiàn)頁面布局與頁面布局相關(guān)的CSS樣式屬性 外邊距和內(nèi)邊距 尺寸 定位 分類 外邊距和內(nèi)邊距 外邊距和內(nèi)邊距屬性示例*margin:0;padding:0;body background-color:#fedcba;#outerDiv border:1px solid blue; width:400px;margin:20px;padding:10px;background-color:#ab

2、cdef;#innerDiv border:1px solid red;width:300px;margin:20px;padding:10px;background-color:#cccccc;p border:1px solid green; 這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。 尺寸 尺寸屬性示例CSS樣式屬性_尺寸#mytable height:180px;border:4px double blac

3、k;border-collapse:collapse;#mytable tdwidth:150px;border:1px solid gray;pline-height:28px; 段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字單元格單元格段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字定位 定位屬性示例p border:1px solid gray;#p_pos_left position:relative;left:20px;#p_pos_top position:relative;top:20px;段落文字

4、段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字定位屬性示例* margin:0px;padding:0px;div border:1px so

5、lid blue;p border:1px dashed red;#first position:absolute;z-index:1; left:20px;top:10px;width:220px;height:250px; background-color:#abcdef;#secondposition:absolute;z-index:3; left:250px;top:10px;width:180px;height:150px; background-color:#abcdef;#third position:absolute; background-color:#fedcba; le

6、ft:-20px;top:50px; #forthposition:absolute; z-index:2; left:100px; top:120px;width:180px; height:100px; background-color:red; first div 位于 body 中second div 位于 body 中third div 位于 second div 中forth div 位于 body 中定位屬性示例#footerposition:fixed;bottom:10px;right:10px;width:350px;height:50px;background-color

7、:#fedcba; 不管頁面如何滾動，我自始至終都在這里。頁面正文頁面正文頁面正文頁面正文頁面正文頁面正文頁面正文頁面正文頁面正文頁面正文頁面正文頁面正文頁面正文頁面正文頁面正文頁面正文 定位屬性示例#mytablewidth:250px;border:4px double gray;border-collapse:collapse;#mytable tdvertical-align:top;border:1px solid gray;#mydivwidth:300px;height:250px;overflow:scroll;border:1px solid blue; 段落文字段落文字單元

8、格單元格單元格H2OY=2X2+3X+4分類 分類屬性示例body cursor:move;p display:inline;#mydiv display:none;第一個段落第二個段落div的內(nèi)容第三個段落第四個段落第五個段落分類屬性示例#mydiv width:80px;border:1px solid gray;text-align:center;float:right;margin:5px;#myul li float:left;background-color:#cccccc;margin:2px;width:100px;text-align:center;a text-decora

9、tion:none;真有趣！段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字菜單項一菜單項二菜單項三菜單項四 分類屬性示例.imgfloatfloat:left;clear:both;#mypclear:left; 段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字

10、段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字CSS的盒狀模型(Box Model) 頁面中可放置內(nèi)容的窗口元素稱為盒子即Box。每個盒子都有內(nèi)容Content，內(nèi)邊距Padding，邊框Border，外邊距Margin。盒狀模型用于描述它們之間的層次、關(guān)系與相互的影響。 CSS盒狀模型盒狀模型示例* margin:0;padding:0;border:none; body background-color:white; #divouterbackg

11、round-color:#abcdef; margin:40px; padding:20px;border:solid 5px blue; width:400px; height:240px;#divinnerbackground-color:#fedcba; margin:20px; padding:40px;border:solid 10px green; width:200px; height:120px; Content CSS實現(xiàn)頁面布局 使用div標(biāo)簽分割頁面中的各組元素。使用float、clear、position、left、top等樣式屬性控制各個div的位置。使用width、height屬性控制div的大小?？偨Y(jié)margin屬性描述元素的外邊距，padding屬性描述元素的內(nèi)容與邊框之間的間隙。width屬性和height屬性描述元素內(nèi)容的尺寸。position屬性描述元素的定位方式，默認(rèn)為static，其他定位方式還有absolute、relative、fiexed。display屬性和visibility屬性描述元素如何顯示