實(shí)驗(yàn)三DIV+CSS樣式應(yīng)用_第1頁
實(shí)驗(yàn)三DIV+CSS樣式應(yīng)用_第2頁
實(shí)驗(yàn)三DIV+CSS樣式應(yīng)用_第3頁
實(shí)驗(yàn)三DIV+CSS樣式應(yīng)用_第4頁
實(shí)驗(yàn)三DIV+CSS樣式應(yīng)用_第5頁
已閱讀5頁，還剩6頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

實(shí)驗(yàn)名稱DIV+CSS樣式應(yīng)用實(shí)驗(yàn)3DIV+CSS樣式應(yīng)用實(shí)驗(yàn)?zāi)康牧私忭撁娉Ｓ貌季纸Y(jié)構(gòu)；掌握使用CSS盒子模型浮動(dòng)與定位的方法掌握DIV的使用方法；掌握DIV+CSS布局的基本方法；實(shí)驗(yàn)內(nèi)容及要求制作一個(gè)簡單的如下圖框架的首頁，不需要填寫具體內(nèi)容，使用背景色標(biāo)出區(qū)域；實(shí)驗(yàn)原理浮動(dòng)邊框可以向左或向右移動(dòng)，直到外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。通過float或margin來讓元素產(chǎn)生位置移動(dòng)。4儀器與材料安裝有Windows7或以上操作系統(tǒng)的計(jì)算機(jī)，Dreamweaver5實(shí)驗(yàn)內(nèi)容5.1CSS布局入門CSS布局與傳統(tǒng)表格(table)布局最大的區(qū)別在于：原來的定位都是采用表格，通過表格的間距或者用無色透明的GIF圖片來控制文布局版塊的間距；而現(xiàn)在則采用層(div)來定位，通過層的margin、padding、border等屬性來控制版塊的間距。定義DIV，分析一個(gè)典型的定義div例子：#sample{margin:10px10px10px10px;padding:20px10px10px20px;border-top:#ccc2pxsolid;border-right:#ccc2pxsolid;border-bottom:#ccc2pxsolid;border-left:#ccc2pxsolid;background:url(./images/templatemo_ads.jpg)#FEFEFEno-repeatrightbottom;color:#666;text-align:center;line-height:150%;width:60%;}說明如下：層的名稱為sample，在頁面中用就可以調(diào)用這個(gè)樣式；margin是指層的邊框以外留的空白，用于頁邊距或者與其它層制造一個(gè)間距。"10pxlOpxlOpxlOpx"分別代表"上右下左"(順時(shí)針方向)四個(gè)邊距，如果都一樣，可以縮寫成,margin:lOpx;"。如果邊距為零，要寫成'margin:0px;"；注意：當(dāng)值是零時(shí)，除了rgb顏色值0%必須跟百分號，其他情況后面可以不跟單位"px"。margin是透明元素，不能定義顏色；padding是指層的邊框到層的內(nèi)容之間的空白。和margin一樣，分別指定上右下左邊框到內(nèi)容的距離。如果都一樣，可以縮寫成"padding:Opx"。單獨(dú)指定左邊可以寫成"padding-left:Opx;"。padding是透明元素，不能定義顏色；border是指層的邊框，"border-right:#ccc2pxsolid;"是定義層的右邊框顏色為"#ccc"，寬度為"2px"，樣式為"solid"直線。如果要虛線樣式可以用"dotted"；background是定義層的背景。分2級定義，先定義圖片背景，采用"url(../images/bg_logo.gif)"來指定背景圖片路徑；其次定義背景色"#fefefe"。"no-repeat"指背景圖片不需要重復(fù)，如果需要橫向重復(fù)用"repeat-x",縱向重復(fù)用"repeat-y",重復(fù)鋪滿整個(gè)背景用"repeat"。后面的

"rightbottom;"是指背景圖片從右下角開始。如果沒有背景圖片可以只定義背景色background:#fefefe；color用于定義字體顏色；text-align用來定義層中的內(nèi)容排列方式，center居中，left居左,right居右；line-height定義行高，150%是指高度為標(biāo)準(zhǔn)高度的150%，也可以寫作：line-height:1.5或者line-height:1.5em，都是一樣的意思；width是定義層的寬度，可以采用固定值，例如500px，也可以采用百分比，象這里的"60%"。要注意的是：這個(gè)寬度僅僅指你內(nèi)容的寬度，不包含margin,border和padding。面是這個(gè)層的實(shí)際表現(xiàn)：這里是酋示內(nèi)容，這里是濟(jì)示內(nèi)容.逑里是酒示內(nèi)容.宼里是演示內(nèi)葫這里是演示內(nèi)容，速里是濟(jì)示內(nèi)葫遠(yuǎn)里星渝示

內(nèi)容-125?125

banner125?125

banner逹里是演質(zhì)內(nèi)容.這里是誼示內(nèi)客.這里是演示內(nèi)蓉遠(yuǎn)里是筒示內(nèi)容…可以看到邊框是2px的灰色，背景圖片在右下沒有重復(fù)，內(nèi)容距離上和左邊框20px，內(nèi)容居中。5.2CSS盒子模型盒模型主要定義四個(gè)區(qū)域：內(nèi)容(content)、邊框距(padding)、邊界(border)和邊距(margin)。上面我們講的sample層就是一個(gè)典型的盒子模型。要搞清楚margin，

background-color，background-image，padding，content，border之間的層次、關(guān)系和相互影響。5.3第一個(gè)CSS布局實(shí)例和傳統(tǒng)的方法一樣，首先要在腦海里有大致的輪廓構(gòu)想。用傳統(tǒng)表格方法實(shí)現(xiàn)的布局，用DIV也可以實(shí)現(xiàn)。1)確定布局，這里我們采用三列布局方式1)確定布局，這里我們采用三列布局方式定義body樣式，先定義整個(gè)頁面的body的樣式,代碼如下：body{margin:Opx;padding:Opx；background:url(./images/templatemo_ads.jpg)#fefefeno-repeatrightbottom;font-family:'lucidagrande','lucidasansunicode','宋體','新宋體',arial,verdana,sans-serif;color:#666;font-size:12px;line-height:150%;}以上代碼的作用定義了邊框邊距為0；背景顏色為#FEFEFE，背景圖片為bg_logo.gif，圖片位于頁面右下角，不重復(fù)；定義了字體尺寸為12px；字體顏色為#666;行高150%。3)定義主要的div采用固定寬度的三列布局。分別定義左中右的寬度為200:300:280，在CSS中如下定義：/*定義頁面左列樣式*/#left{width:200px;margin:0px;padding:0px;background:#cdcdcd;}/*定義頁面中列樣式*/#middle{position:absolute;left:200px;top:0px;width:300px;margin:0px;padding:0px;background:#dadada;}/*定義頁面右列樣式*/#right{position:absolute;left:500px;top:0px;width:280px;margin:Opx;padding:Opx;background:#999999;}注意：定義中列和右列div都采用了POSITION:absolute;，然后分別定義了LEFT:200px;TOP:0px和LEFT:500px;TOP:0px;這是這個(gè)布局的關(guān)鍵，采用了層的絕對定位。定義中間列距離頁面左邊框200px，距離頂部0px；定義右列距離頁面左邊框500px，距離頂部0px；這時(shí)候整個(gè)頁面的代碼是(替換為你的郵箱和姓名)：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtmll/DTD/xhtmll-transitional.dtd"><html><head><title>歡迎</title><styletype="text/css">body{margin:0px;padding:0px;background:url(./images/templatemo_ads.jpg)#fefefeno-repeatrightbottom;font-family:'lucidagrande','lucidasansunicode','宋體新宋體',arial,verdana,sans-serif;color:#666;font-size:12px;line-height:150%;}/*定義頁面左列樣式*/#left{width:200px;margin:0px;padding:0px;background:#cdcdcd;}/*定義頁面中列樣式*/#middle{position:absolute;left:200px;

頁面的效果僅僅可以看到三個(gè)并列的灰色矩形，和一個(gè)背景圖。如果希望高度是滿屏的，需要使用自使用高度。3）自適應(yīng)高度如果想在3列布局的最后加一行頁腳，放版權(quán)之類的信息。就遇到必須對齊3列底部的問題。在table布局中，我們用大表格嵌套小表格的方法，可以很方便對齊三列；而用div布局，三列獨(dú)立分散，內(nèi)容高低不同，就很難對齊其實(shí)我們完全可以嵌套div,把三列放進(jìn)一個(gè)DIV中，就做到了底部對齊。下面是實(shí)現(xiàn)例子：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtmll/DTD/xhtmll-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>無標(biāo)題文檔</title><styletype="text/css"><!--#header{MARGIN:0pxauto;BORDER:0px;BACKGROUND:#ccd2de;WIDTH:580px;HEIGHT:60px;}#mainbox{MARGIN:0pxauto;WIDTH:580px;BACKGROUND:#FFFFFF;}#menu{FLOAT:right;MARGIN:2px0px2px0px;PADDING:Opx0px0px0px;WIDTH:400px;BACKGROUND:#ccd2de;}#sidebar{FLOAT:left;MARGIN:2px2px0px0px;PADDING:0px;BACKGROUND:#F2F3F7;WIDTH:170px;}#content{FLOAT:right;MARGIN:1px0px2px0px;PADDING:0px;WIDTH:400px;BACKGROUND:#E0EFDE;}#footer{CLEAR:both;MARGIN:0pxauto;PADDING:5px0px5px0px;BACKGROUND:#ccd2de;HEIGHT40px;WIDTH:580px;}--></style></head><body><divid="header">這里是header</div><divid="mainbox"><divid="menu">這里是menu</div><divid="sidebar">是sidebar</div><divid="content"><p>是#8皿6皿<巾><p>這里是主要內(nèi)容，根據(jù)內(nèi)容自動(dòng)適應(yīng)高度</p><p>這里是主要內(nèi)容，根據(jù)內(nèi)容自動(dòng)適應(yīng)高度</p><p>這里是主要內(nèi)容，根據(jù)內(nèi)容自動(dòng)適應(yīng)高度</p></div>是#content</div><divid="footer">這里是footer</div></body></html>這里是h亡辻是#content</div><divid="footer">這里是footer</div></body></html>這里是h亡辻d亡T這里是主要內(nèi)容，根據(jù)內(nèi)容自動(dòng)適應(yīng)高度這里是主要內(nèi)容，根據(jù)內(nèi)容自動(dòng)適應(yīng)高度這里是主要內(nèi)容，根據(jù)內(nèi)容自動(dòng)適應(yīng)高度^sidebar遠(yuǎn)里是hi巴iui大家將代碼保存后可以看到，整個(gè)頁面是居中顯示的，那么究竟是什么原因使得頁面居中顯示呢？是因?yàn)槲覀冊?header、#mainbox、#footer中使用了以下屬性：margin:Opxauto；按照前面的說明，可以知道，表示上下邊距為0，左右為自動(dòng)，因此該層就會自動(dòng)居中了。如果要讓頁面居左，則取消掉auto值就可以了，因?yàn)槟J(rèn)就是居左顯示的。通過margin:auto我們就可以輕易地使層自動(dòng)居中了。重點(diǎn)在于#mainbox層嵌套F#menu、#sidebar、#content三個(gè)層。當(dāng)#content的內(nèi)容增加，#content的高度就會增高/同時(shí)#mainbox的高度也會撐開，#footer層就自動(dòng)下移。這樣就實(shí)現(xiàn)了高度的自適應(yīng)。另外值得注意的是：#menu和#content都是浮動(dòng)在頁面右面"FLOAT:right;"，#sidebar是浮動(dòng)在#menu層的左面"FLOAT:left；"，這

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論