實(shí)驗(yàn)手冊(cè)——實(shí)驗(yàn)12_第1頁(yè)
實(shí)驗(yàn)手冊(cè)——實(shí)驗(yàn)12_第2頁(yè)
實(shí)驗(yàn)手冊(cè)——實(shí)驗(yàn)12_第3頁(yè)
實(shí)驗(yàn)手冊(cè)——實(shí)驗(yàn)12_第4頁(yè)
實(shí)驗(yàn)手冊(cè)——實(shí)驗(yàn)12_第5頁(yè)
已閱讀5頁(yè)，還剩13頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

1、實(shí)驗(yàn)12 DIV+CSS布局【實(shí)驗(yàn)?zāi)康摹?熟悉CSS定位與DIV布局的基本理念；2. 能夠?qū)㈨?yè)面使用DIV分塊；3. 能夠?qū)υ剡M(jìn)行定位和設(shè)計(jì)細(xì)節(jié)；4. 能夠使用DIV+CSS靈活的設(shè)計(jì)各種版式布局【實(shí)驗(yàn)環(huán)境與設(shè)備】計(jì)算機(jī)實(shí)驗(yàn)室要求：機(jī)器上安裝有瀏覽器和記事本等。【實(shí)驗(yàn)要求】 l 練習(xí)課本例子（最好根據(jù)自身需要適當(dāng)改變）。l 練習(xí)實(shí)驗(yàn)手冊(cè)中例子（最好根據(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)頁(yè)邊距*/width:700px; font-size:13px;divbox-sizing:border-box; /*設(shè)置盒子顯示模式*/background-color:#d3dec0;line-height:1.2;.imgfloatfloat:right; /*設(shè)置圖像右浮動(dòng)*/atext-decoration:none; /*設(shè)置鏈接無(wú)下劃線*/color:#7f5f52;#banner width:100%; /*頁(yè)眉所在div樣式*/#left /*左邊div樣式*/wi

3、dth:200px;float:left; /*浮動(dòng)*/padding:10px; /*設(shè)置盒子邊框距內(nèi)容的補(bǔ)白*/height:450px;#right /*右邊div樣式*/width:500px;height:450px;padding:10px;float:right; /*浮動(dòng)*/</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="#">丑奴兒 書(shū)博山道中壁</a><br /><a href="#">菩薩蠻 書(shū)江西造口壁</a><br /><a href="#">清平樂(lè) 村居</a><br /><a href="#">永遇樂(lè)

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

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

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

8、gt;</body></html>該例子在360安全瀏覽器7.1中效果如下圖所示。1. 簡(jiǎn)單布局1（無(wú)內(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. 簡(jiǎn)單布局2（無(wú)內(nèi)容）文件名exp12-2.html<!DOCTYPE html><html><head><title>布局2，在布局1的基礎(chǔ)上做浮動(dòng)的對(duì)調(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; /*浮動(dòng)*/#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. 簡(jiǎn)單布局3（無(wú)內(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; /*浮動(dòng)*/#content2width:560px;height:400px;background-color:#FF6; /*背景色*/border:1px black solid;float:left; /*浮動(dòng)*/#linkwidth:200px;height:400px;background-color:#CF9;border:1px black solid;float:left; /*浮動(dòng),左右都可*/#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. 簡(jiǎn)單布局4（無(wú)內(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、; /*浮動(dòng)*/#content2width:560px;height:400px;background-color:#FF6; /*背景色*/border:1px black solid;float:left; /*浮動(dòng)*/#linkwidth:200px;height:400px;background-color:#CF9;border:1px black solid;float:left; /*浮動(dòng),左右均可*/#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. 簡(jiǎn)單布局5（無(wú)內(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; /*浮動(dòng)*/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. 簡(jiǎn)單布局6（無(wú)內(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; /*浮動(dòng)*/#content2width:560px;height:400px;background-color:#FF6; /*背景色*/border:1px black solid;float:left; /*浮動(dòng)

28、*/#linkwidth:200px;height:400px;background-color:#CF9;border:1px black solid;float:left; /*浮動(dòng)*/#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; /*浮動(dòng)*/#content4wid

29、th:400px;height:200px;background-color:#FC3;border:1px black solid;float:right; /*浮動(dòng)*/#content5width:400px;height:200px;background-color:#C9F;border:1px black solid;float:right; /*浮動(dòng)*/#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. 簡(jiǎn)單布局7（無(wú)內(nèi)容）文件名exp12-7.html<!DOCTYPE html><html><head><title>布局7，在布局3基礎(chǔ)上修改，將content1、content2和link放在一個(gè)父div中</title><style type="text/css">bodytext-align:center; /*

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論