实验手册实验12.doc

《实验手册实验12.doc》由会员分享，可在线阅读，更多相关《实验手册实验12.doc（18页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、实验12 DIV+CSS布局【实验目的】1熟悉CSS定位与DIV布局的基本理念；2. 能够将页面使用DIV分块；3. 能够对元素进行定位和设计细节；4. 能够使用DIV+CSS灵活的设计各种版式布局【实验环境与设备】计算机实验室要求：机器上安装有浏览器和记事本等。【实验要求】 l 练习课本例子（最好根据自身需要适当改变）。l 练习实验手册中例子（最好根据自身需要适当改变）。附加. 布局（有内容）文件名exp12-else.html布局bodymargin:0 auto; /*设置网页边距*/width:700px; font-size:13px;divbox-sizing:border-box

2、; /*设置盒子显示模式*/background-color:#d3dec0;line-height:1.2;.imgfloatfloat:right; /*设置图像右浮动*/atext-decoration:none; /*设置链接无下划线*/color:#7f5f52;#banner width:100%; /*页眉所在div样式*/#left /*左边div样式*/width:200px;float:left; /*浮动*/padding:10px; /*设置盒子边框距内容的补白*/height:450px;#right /*右边div样式*/width:500px;height:450

3、px;padding:10px;float:right; /*浮动*/辛弃疾其它作品青玉案 元夕丑奴儿 书博山道中壁菩萨蛮 书江西造口壁清平乐 村居永遇乐 京口北固亭怀古西江月 夜行黄沙道中南乡子 登京口北固亭有怀此词上篇通过立春时节景物的描绘，隐喻当时南宋不安定的政局。开头“春已归来”三句，点明立春节候。按当时风俗，立春日，妇女们多剪彩为燕形小幡，戴之头鬓。故欧阳修春日帖子中有“共喜钗头燕已来”之句。“无端风雨”两句，既指自然界的气候多变，也暗指南宋最高统治集团惊魄不定、碌碌无为之态，宛如为余寒所笼罩。“年时燕子”三句，作者由春幡联想到这时正在北飞的燕子，可能已经把他的山东家园作为归宿了。“

4、年时”即去年之意，这说明作者作此词时，离别他的家乡才只一年光景。接下去“浑未办”三句，是说作者新来异乡，生活尚未安定，春节到了，连旨酒也备办不起，更谈不到肴馔了。词的下篇进一步抒发作者自己的忧国怀乡之情。“却笑东风从此”三句，作者想到立春之后，东风就会忙于吹送出柳绿花江的一派春光。“闲时又来镜里，转变朱颜”，语虽虚拟，实际表达了作者初归南宋急欲报国、收复失土的决心，深恐自己磋砣岁月，年华虚度。这里说的“清愁”，实际是作者的忧国忧民的情怀。“解连环”，是用战国策秦昭王送玉连环给齐国王后，让她解开的故事。当时的齐王后果断机智地把玉连环椎破，使秦的诡计流于破产。但环顾当前，南宋最高统治集团中人，谁是

5、能作出抗金的正确决策的智勇人物呢？“生怕”，即“甚怕”。“生怕见、花开花落，朝来塞雁先还。”表示作者对于恢复事业的担忧，深恐这一年的花由盛开又复败落，而失地却未能收复，有家仍难归去，言语流露出一丝的惆怅。该例子在360安全浏览器7.1中效果如下图所示。1. 简单布局1（无内容）文件名exp12-1.html布局1bodymargin:0px;text-align:center; /*居中*/divbox-sizing:border-box; /*盒子宽高设置以border为标准*/#container /*父div容器*/width:960px; /*宽*/margin:0 auto;#ban

6、nerheight: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;height:80px;border:1px black solid;bac

7、kground-color:#CFF;float:left;bannercontentlinkfoot该例子在360安全浏览器7.1中效果如下图所示。2. 简单布局2（无内容）文件名exp12-2.html布局2，在布局1的基础上做浮动的对调bodytext-align:center; /*居中*/divbox-sizing:border-box; /*盒子宽高设置以border为标准*/#container /*父div容器*/width:960px; /*宽*/margin:0 auto;#bannerheight:120px;border:1px black solid;backgrou

8、nd-color:#FF9; #contentwidth:760px;height:400px;background-color:#CF9; /*背景色*/border:1px black solid;float:right; /*浮动*/#linkwidth:200px;height:400px;background-color:#CFC;border:1px black solid;float:left;#footwidth:960px;height:80px;border:1px black solid;background-color:#CFF;float:left;banner co

9、ntent link foot该例子在360安全浏览器7.1中效果如下图所示。3. 简单布局3（无内容）文件名exp12-3.html布局3bodytext-align:center; /*居中*/divbox-sizing:border-box; /*盒子宽高设置以border为标准*/#container /*父层容器*/width:960px; /*宽*/background-color:#FC9;margin:0 auto;#bannerwidth:100%;height:120px;border:1px black solid;#content1width:200px;height:

10、400px;background-color:#99C;border:1px black solid;float:left; /*浮动*/#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

11、;border:1px black solid;background-color:#9CF;float:left;banner content1 content2 link foot该例子在360安全浏览器7.1中效果如下图所示。4. 简单布局4（无内容）文件名exp12-4.html布局4bodytext-align:center; /*居中*/divbox-sizing:border-box; /*盒子宽高设置以border为标准*/#container /*父层容器*/width:960px; /*宽*/background-color:#FC9;margin:0 auto;#link2

12、width: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; /*浮动*/#content2width:560px;height:400px;background-color:#FF6; /*背景色*/border:1px black

13、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;bannerlink2 content1 content2 link foot该例子在360安全浏览器7.1中效果如下图所示。5. 简单布局5（无内容）文件名exp12-5.html布局

14、5，在布局2的基础上做调整bodytext-align:center; /*居中*/divbox-sizing:border-box; /*盒子宽高设置以border为标准*/#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-c

15、olor:#FF6; /*背景色*/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;banner content link foot该例子在360安全浏览器7.

16、1中效果如下图所示。6. 简单布局6（无内容）文件名exp12-6.html布局6bodytext-align:center; /*居中*/divbox-sizing:border-box; /*盒子宽高设置以border为标准*/#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

17、: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; /*浮动*/#linkwidth:200px;height:400px;background-color:#CF9;border:1px black solid;float:

18、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; /*浮动*/#content4width:400px;height:200px;background-color:#FC3;border:1px black solid;float:right; /*浮

19、动*/#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;bannerlink2 content1 content2 link banner2 content3 content4 content5 foot该例子在360安全浏览器7.1中效果如下图所示。7. 简单布局7（无内容）文件名

20、exp12-7.html布局7，在布局3基础上修改，将content1、content2和link放在一个父div中bodytext-align:center; /*居中*/divbox-sizing:border-box; /*盒子宽高设置以border为标准*/#container /*父层容器*/width:960px; /*宽*/margin:0 auto;#bannerwidth:100%;height:120px;border:1px black solid;background-color:#FC9;#middle /*中间放置content1、content2和link的父di

21、v*/width:960px;height:400px;#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; /*浮动*/#linkwidth:200px;height:400px;background-color:#CF9;border:1px black solid;float:left; /*浮动,左右都可*/#footwidth:960px;height:80px;border:1px black solid;background-color:#9CF;banner content1 content2 link foot该例子在360安全浏览器7.1中效果如下图所示。