實驗手冊——實驗12_第1頁
實驗手冊——實驗12_第2頁
實驗手冊——實驗12_第3頁
實驗手冊——實驗12_第4頁
實驗手冊——實驗12_第5頁
已閱讀5頁，還剩13頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

1、實驗12 DIV+CSS布局【實驗?zāi)康摹?熟悉CSS定位與DIV布局的基本理念；2. 能夠?qū)㈨撁媸褂肈IV分塊；3. 能夠?qū)υ剡M(jìn)行定位和設(shè)計細(xì)節(jié)；4. 能夠使用DIV+CSS靈活的設(shè)計各種版式布局【實驗環(huán)境與設(shè)備】計算機(jī)實驗室要求：機(jī)器上安裝有瀏覽器和記事本等?！緦嶒炓蟆?l 練習(xí)課本例子（最好根據(jù)自身需要適當(dāng)改變）。l 練習(xí)實驗手冊中例子（最好根據(jù)自身需要適當(dāng)改變）。附加. 布局（有內(nèi)容）文件名exp12-else.html<!DOCTYPE html><html><head><title>布局</title><style

2、 type="text/css">bodymargin:0 auto; /*設(shè)置網(wǎng)頁邊距*/width:700px; font-size:13px;divbox-sizing:border-box; /*設(shè)置盒子顯示模式*/background-color:#d3dec0;line-height:1.2;.imgfloatfloat:right; /*設(shè)置圖像右浮動*/atext-decoration:none; /*設(shè)置鏈接無下劃線*/color:#7f5f52;#banner width:100%; /*頁眉所在div樣式*/#left /*左邊div樣式*/wi

3、dth:200px;float:left; /*浮動*/padding:10px; /*設(shè)置盒子邊框距內(nèi)容的補(bǔ)白*/height:450px;#right /*右邊div樣式*/width:500px;height:450px;padding:10px;float:right; /*浮動*/</style></head><body><div id="banner"><img src="images/banner.jpg" /></div><div id="left&q

4、uot;><h4>辛棄疾其它作品</h4><a href="#">青玉案 元夕</a><br /><a href="#">丑奴兒 書博山道中壁</a><br /><a href="#">菩薩蠻 書江西造口壁</a><br /><a href="#">清平樂 村居</a><br /><a href="#">永遇樂

5、京口北固亭懷古</a><br /><a href="#">西江月 夜行黃沙道中</a><br /><a href="#">南鄉(xiāng)子 登京口北固亭有懷</a></div><div id="right"><p>此詞上篇通過立春時節(jié)景物的描繪，隱喻當(dāng)時南宋不安定的政局。開頭“春已歸來”三句，點明立春節(jié)候。按當(dāng)時風(fēng)俗，立春日，婦女們多剪彩為燕形小幡，戴之頭鬢。故歐陽修春日帖子中有“共喜釵頭燕已來”之句。“無端風(fēng)雨”兩句，既指自

6、然界的氣候多變，也暗指南宋最高統(tǒng)治集團(tuán)驚魄不定、碌碌無為之態(tài)，宛如為余寒所籠罩?！澳陼r燕子”三句，作者由春幡聯(lián)想到這時正在北飛的燕子，可能已經(jīng)把他的山東家園作為歸宿了?！澳陼r”即去年之意，這說明作者作此詞時，離別他的家鄉(xiāng)才只一年光景。接下去“渾未辦”三句，是說作者新來異鄉(xiāng)，生活尚未安定，春節(jié)到了，連旨酒也備辦不起，更談不到肴饌了。</p><p>詞的下篇進(jìn)一步抒發(fā)作者自己的憂國懷鄉(xiāng)之情?！皡s笑東風(fēng)從此”三句，作者想到立春之后，東風(fēng)就會忙于吹送出柳綠花江的一派春光?！伴e時又來鏡里，轉(zhuǎn)變朱顏”，語雖虛擬，實際表達(dá)了作者初歸南宋急欲報國、收復(fù)失土的決心，深恐自己磋砣歲月，年華虛

7、度。這里說的“清愁”，實際是作者的憂國憂民的情懷。<img src="images/flower4.png" class="imgfloat" />“解連環(huán)”，是用戰(zhàn)國策秦昭王送玉連環(huán)給齊國王后，讓她解開的故事。當(dāng)時的齊王后果斷機(jī)智地把玉連環(huán)椎破，使秦的詭計流于破產(chǎn)。但環(huán)顧當(dāng)前，南宋最高統(tǒng)治集團(tuán)中人，誰是能作出抗金的正確決策的智勇人物呢？“生怕”，即“甚怕”?！吧乱?、花開花落，朝來塞雁先還?！北硎咀髡邔τ诨謴?fù)事業(yè)的擔(dān)憂，深恐這一年的花由盛開又復(fù)敗落，而失地卻未能收復(fù)，有家仍難歸去，言語流露出一絲的惆悵。</p></div&

8、gt;</body></html>該例子在360安全瀏覽器7.1中效果如下圖所示。1. 簡單布局1（無內(nèi)容）文件名exp12-1.html<!DOCTYPE html><html><head><title>布局1</title><style type="text/css">bodymargin:0px;text-align:center; /*居中*/divbox-sizing:border-box; /*盒子寬高設(shè)置以border為標(biāo)準(zhǔn)*/#container /*父div容器

9、*/width:960px; /*寬*/margin:0 auto;#bannerheight:120px;border:1px black solid;background-color:#FF9;#contentwidth:760px;height:400px;background-color:#CF9; /*背景色*/border:1px black solid;float:left;#linkwidth:200px;height:400px;background-color:#CFC;border:1px black solid;float:right;#footwidth:960px;

10、height:80px;border:1px black solid;background-color:#CFF;float:left;</style></head><body><div id="container"><div id="banner">banner</div><div id="content">content</div><div id="link">link</div><di

11、v id="foot">foot</div></div></body></html>該例子在360安全瀏覽器7.1中效果如下圖所示。2. 簡單布局2（無內(nèi)容）文件名exp12-2.html<!DOCTYPE html><html><head><title>布局2，在布局1的基礎(chǔ)上做浮動的對調(diào)</title><style type="text/css">bodytext-align:center; /*居中*/divbox-sizi

12、ng:border-box; /*盒子寬高設(shè)置以border為標(biāo)準(zhǔn)*/#container /*父div容器*/width:960px; /*寬*/margin:0 auto;#bannerheight:120px;border:1px black solid;background-color:#FF9; #contentwidth:760px;height:400px;background-color:#CF9; /*背景色*/border:1px black solid;float:right; /*浮動*/#linkwidth:200px;height:400px;background-

13、color:#CFC;border:1px black solid;float:left;#footwidth:960px;height:80px;border:1px black solid;background-color:#CFF;float:left;</style></head><body><div id="container"><div id="banner">banner</div> <div id="content">content&l

14、t;/div> <div id="link">link</div> <div id="foot">foot</div></div></body></html>該例子在360安全瀏覽器7.1中效果如下圖所示。3. 簡單布局3（無內(nèi)容）文件名exp12-3.html<!DOCTYPE html><html><head><title>布局3</title><style type="text/css

15、">bodytext-align:center; /*居中*/divbox-sizing:border-box; /*盒子寬高設(shè)置以border為標(biāo)準(zhǔn)*/#container /*父層容器*/width:960px; /*寬*/background-color:#FC9;margin:0 auto;#bannerwidth:100%;height:120px;border:1px black solid;#content1width:200px;height:400px;background-color:#99C;border:1px black solid;float:lef

16、t; /*浮動*/#content2width:560px;height:400px;background-color:#FF6; /*背景色*/border:1px black solid;float:left; /*浮動*/#linkwidth:200px;height:400px;background-color:#CF9;border:1px black solid;float:left; /*浮動,左右都可*/#footwidth:960px;height:80px;border:1px black solid;background-color:#9CF;float:left;<

17、;/style></head><body><div id="container"><div id="banner">banner</div> <div id="content1">content1</div> <div id="content2">content2</div> <div id="link">link</div> <div id="

18、;foot">foot</div></div></body></html>該例子在360安全瀏覽器7.1中效果如下圖所示。4. 簡單布局4（無內(nèi)容）文件名exp12-4.html<!DOCTYPE html><html><head><title>布局4</title><style type="text/css">bodytext-align:center; /*居中*/divbox-sizing:border-box; /*盒子寬高設(shè)置以b

19、order為標(biāo)準(zhǔn)*/#container /*父層容器*/width:960px; /*寬*/background-color:#FC9;margin:0 auto;#link2width:100%;height:30px;border:1px black solid;background-color:#FCC;#bannerwidth:100%;height:120px;border:1px black solid;#content1width:200px;height:400px;background-color:#99C;border:1px black solid;float:left

20、; /*浮動*/#content2width:560px;height:400px;background-color:#FF6; /*背景色*/border:1px black solid;float:left; /*浮動*/#linkwidth:200px;height:400px;background-color:#CF9;border:1px black solid;float:left; /*浮動,左右均可*/#footwidth:960px;height:80px;border:1px black solid;background-color:#9CF;float:left;<

21、/style></head><body><div id="container"><div id="banner">banner</div><div id="link2">link2</div> <div id="content1">content1</div> <div id="content2">content2</div> <div id="

22、;link">link</div> <div id="foot">foot</div></div></body></html>該例子在360安全瀏覽器7.1中效果如下圖所示。5. 簡單布局5（無內(nèi)容）文件名exp12-5.html<!DOCTYPE html><html><head><title>布局5，在布局2的基礎(chǔ)上做調(diào)整</title><style type="text/css">bodyt

23、ext-align:center; /*居中*/divbox-sizing:border-box; /*盒子寬高設(shè)置以border為標(biāo)準(zhǔn)*/#container /*父層容器*/width:960px; /*寬*/background-color:#FC9;margin:0 auto;#bannerwidth:100%;height:120px;border:1px black solid;margin-bottom:4px;background-color:#C6C;#contentwidth:756px;height:400px;background-color:#FF6; /*背景色*/

24、border:1px black solid;float:right; /*浮動*/margin-left:4px;#linkwidth:200px;height:400px;background-color:#CF9;border:1px black solid;float:left;#footmargin-top:4px;width:960px;height:80px;border:1px black solid;background-color:#9CF;float:left;</style></head><body><div id="

25、container"><div id="banner">banner</div> <div id="content">content</div> <div id="link">link</div> <div id="foot">foot</div></div></body></html>該例子在360安全瀏覽器7.1中效果如下圖所示。6. 簡單布局6（無內(nèi)容）文件名ex

26、p12-6.html<!DOCTYPE html><html><head><title>布局6</title><style type="text/css">bodytext-align:center; /*居中*/divbox-sizing:border-box; /*盒子寬高設(shè)置以border為標(biāo)準(zhǔn)*/#container /*父層容器*/width:960px; /*寬*/background-color:#FC9;margin:0 auto;#link2width:100%;height:30px

27、;border:1px black solid;background-color:#FCC;#bannerwidth:100%;height:120px;border:1px black solid;#content1width:200px;height:400px;background-color:#99C;border:1px black solid;float:left; /*浮動*/#content2width:560px;height:400px;background-color:#FF6; /*背景色*/border:1px black solid;float:left; /*浮動

28、*/#linkwidth:200px;height:400px;background-color:#CF9;border:1px black solid;float:left; /*浮動*/#banner2width:960px;height:80px;background-color:#FCC;float:left;border:1px black solid;#content3width:560px;height:400px;background-color:#FF6; /*背景色*/border:1px black solid;float:left; /*浮動*/#content4wid

29、th:400px;height:200px;background-color:#FC3;border:1px black solid;float:right; /*浮動*/#content5width:400px;height:200px;background-color:#C9F;border:1px black solid;float:right; /*浮動*/#footwidth:960px;height:80px;border:1px black solid;background-color:#9CF;float:left;</style></head><

30、body><div id="container"><div id="banner">banner</div><div id="link2">link2</div> <div id="content1">content1</div> <div id="content2">content2</div> <div id="link">link</div

31、> <div id="banner2">banner2</div> <div id="content3">content3</div> <div id="content4">content4</div> <div id="content5">content5</div> <div id="foot">foot</div></div></body></html>該例子在360安全瀏覽器7.1中效果如下圖所示。7. 簡單布局7（無內(nèi)容）文件名exp12-7.html<!DOCTYPE html><html><head><title>布局7，在布局3基礎(chǔ)上修改，將content1、content2和link放在一個父div中</title><style type="text/css">bodytext-align:center; /*

溫馨提示

  • 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)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論