網頁設計基礎

1、第九講 CSS之空間控制2盒子模型(Box Model)實驗八講評navigator網站標題、大娘頭像footer 網頁的版權信息,站點地圖等sidebar三種招牌面條container大娘致辭（三段）特供面條（列表）實驗八要求將范大娘面吧首頁實現(xiàn)如圖的布局實驗八講評div id=“navigator”div id=“footer” div id=“sidebar”div id=“container”div id=“navigator”div id=“footer” div id=“sidebar”div id=“container”回憶navigator,container,sidebar,

2、footer四個區(qū)塊在HTML源文件中的位置CSS屬性float的取值只有兩種:right或left,不存在其他的值。例如：實驗八講評#navigator float : top; 錯實驗八講評div id=“navigator”div id=“footer” div id=“sidebar”div id=“container”#sidebarfloat:right;#containerfloat:left;navigator網站標題、logo圖標footer 版權信息站點地圖sidebar三種招牌面條container大娘致辭特供面條float改變區(qū)塊型標簽獨占一行的屬性每當顯示完一個HTM

3、L元素，會立即定位下一個元素的位置實驗八講評div id=“navigator”div id=“footer” div id=“sidebar”div id=“container”#sidebarfloat:right;navigator網站標題、logo圖標footer 版權信息，站點地圖sidebar三種招牌面條container大娘致辭特供面條區(qū)塊的寬度使用width屬性來調整。#sidebarwidth:30%;container大娘致辭特供面條Game Timediv id=“navigator”div id=“footer” div id=“sidebar”div id=“cont

4、ainer”問題：如何實現(xiàn)右圖的布局？原有的HTML結構是否需要修改，如何修改？CSS是如何設定各個區(qū)塊的位置的？原HTML結構navigator網站標題、logo圖標footer 網頁的版權信息,站點地圖等sidebar三種招牌面條container大娘致辭（三段）特供面條（列表）實際就是實現(xiàn)如右圖的布局Game Timenavigator網站標題、logo圖標footer 版權信息，站點地圖sidebar三種招牌面條container大娘致辭特供面條布局要求div id=“navigator”div id=“footer” div id=“sidebar”div id=“container

5、”HTML結構#sidebar float:right; width:30%;CSS代碼Game Time參考答案Game Time雖然一般是先寫HTML代碼，再根據(jù)布局要求編寫CSS代碼，但從剛才的那個練習我們發(fā)現(xiàn)，如果HTML結構不理想，也很難實現(xiàn)布局要求。所以，在書寫HTML代碼時應該考慮布局的需要和變化。CSS屬性 clear漂浮的區(qū)塊sidebar進入了footer區(qū)塊。使用clear屬性能避免這種重疊的產生。#footer clear:both;表示清除進入它內部的浮動元素CSS屬性 borderCSS允許為元素設置“邊框”，使用border屬性，border屬性類似backgro

6、und屬性，由一些要素組成：border-widthborder-styleborder-color邊框寬度邊框樣式邊框顏色與background要素可以單獨使用不同的是，border的三個要素必須同時使用，不能單獨出現(xiàn)。邊框border的語法等同于p border:2px solid black;border: 粗細 樣式 顏色；注意：3個屬性的先后順序不能顛倒。p border-width:2px; border-style:solid; border-color:black;邊框的粗細 border-width屬性border-width允許使用關鍵詞和像素兩中方法定義邊框的粗細：bor

7、der-width:thin;border-width:5px;關鍵詞可取:thinmediumThick分別表示細,中,粗像素可取:1px2px3px 邊框的樣式 border-style屬性border-style允許使用關鍵詞定義邊框的樣式(共8種):邊框的顏色 border-color屬性border-color允許使用關鍵詞、RGB比例和色彩代碼來設置邊框的顏色。Border的四個邊文字內容或者圖象內容border-top: 5px solid black;border-right:2px dotted red;border-bottom:4px dashed blue;border

8、-left:9px double yellow;盒子模型 Box Model從CSS的角度看，任何一個元素都是一個盒子紙上得來終覺淺，絕知此事要躬行（王安石）紙上得來終覺淺，絕知此事要躬行（王安石）邊框border邊框與文本間的留白padding邊框與外邊界間的留白margin外邊界（不顯示）盒子模型 內容區(qū)域紙上得來終覺淺，絕知此事要躬行（王安石）內容區(qū)域用來存放文本，圖片等內容它的大小恰恰能容下所需要保存的內容。文本區(qū)域并不實際存在,而是幫助大家理解用的盒子模型 邊框border用它可以給能確定范圍的HTML標簽畫邊框它可以定義邊框線的寬度、類型、和顏色紙上得來終覺淺，絕知此事要躬行（王安

9、石）邊框borderp width:200px; border:5px solid black; 盒子模型 paddingpadding位于內容區(qū)域和邊框(border)之間它沒有任何顏色和裝飾我們可以用padding 來控制內容區(qū)域與border的距離紙上得來終覺淺，絕知此事要躬行（王安石）邊框與文本間的留白paddingPadding語法紙上得來終覺淺，絕知此事要躬行（王安石）padding-top: 10px;padding-right:15px;padding-bottom:12px;padding-left:18px;padding: 10px 15px 12px 18px;topr

10、ightbottomleft由于邊框有上、右、下、左四個方向，所以內容域與邊框的距離也分為top、right、bottom、left這四個方向使用padding屬性時需注意其取值必須按照上右下左的順時針順序，不能顛倒或盒子模型 marginmargin是位于邊框外圍的一圈透明的空間它沒有任何顏色和裝飾一般我們用margin控制元素之間的距離紙上得來終覺淺，絕知此事要躬行（王安石）邊框與外邊界間的留白margin外邊界（不顯示）margin語法margin-top: 10px;margin-right:15px;margin-bottom:12px;margin-left:18px;margin

11、: 10px 15px 12px 18px;由于邊框有上、右、下、左四個方向，所以邊框外邊界的距離也分為top、right、bottom、left這四個方向使用margin屬性時需注意其取值必須按照上右下左的順時針順序，不能顛倒或紙上得來終覺淺，絕知此事要躬行（王安石）toprightbottomleft盒子模型的三個要素border: 1px solid gray;padding:1px 2px 2px 3px;margin: 20px 0px 20px 20px;簡寫Game Time問題：使用給定的HTML源代碼，實現(xiàn)如右圖片的布局。茶樹潔面膠 規(guī)格：250ml 市場價格：130 元 本站價格：元 功能：清潔控油 介紹：一種非常溫和不刺激肌膚的 臉部潔面膠，適合各個年齡層的男女使用，尤適合易患有問題肌膚的人。返回頁首HTML代碼Game Time參