实验12 DIV+CSS布局
【实验目的】
;
2. 能够将页面使用DIV分块;
3. 能够对元素进行定位和设计细节;
4. 能够使用DIV+CSS灵活的设计各种版式布局
【实验环境与设备】
计算机实验室
要求:机器上安装有浏览器和记事本等。
【实验要求】
练习课本例子(最好根据自身需要适当改变)。
练习实验手册中例子(最好根据自身需要适当改变)。
附加. 布局(有内容)
文件名exp12-
<!DOCTYPE html>
<html>
<head>
<title>布局</title>
<style type="text/css">
body{
margin:0 auto; /*设置网页边距*/
width:700px;
font-size:13px;
}
div{
box-sizing:border-box; /*设置盒子显示模式*/
background-color:#d3dec0;
line-height:;
}
.imgfloat{
float:right; /*设置图像右浮动*/
}
a{
text-decoration:none; /*设置链接无下划线*/
color:#7f5f52;
}
#banner{ width:100%; } /*页眉所在div样式*/
#left{ /*左边div样式*/
width:200px;
float:left; /*浮动*/
padding:10px; /*设置盒子边框距内容的补白*/
height:450px;
}
#right{ /*右边div样式*/
width:500px;
height:450px;
padding:10px;
float:right; /*浮动*/
}
</style>
</head>
<body>
<div id="banner"><img src="images/" /></div>
<div id="left">
<h4>辛弃疾其它作品</h4>
<a href="#">青玉案元夕</a><br />
<a href="#">丑奴儿书博山道中壁</a><br />
<a href="#">菩萨蛮书江西造口壁</a><br />
<a href="#">清平乐村居</a><br />
<a href="#">永遇乐京口北固亭怀古</a><br />
<a href="#">西江月夜行黄沙道中</a><br />
<a href="#">南乡子登京口北固亭有怀</a>
</div>
<div id="right">
<p>此词上篇通过立春时节景物的描绘,隐喻当时南宋不安定的政局。开头“春已归来”三句,点明立春节候。按当时风俗,立春日,妇女们多剪彩为燕形小幡,戴之头鬓。故欧阳修《春日帖子》中有“共喜钗头燕已来”之句。“无端风雨”两句,既指自然界的气候多变,也暗指南宋最高统治集团惊魄不定、碌碌无为之态,宛如为余寒所笼罩。“年时燕子”三句,作者由春幡联想到这时正在北飞的燕子,可能已经把他的山东家园作为归宿了。“年时”即去年之意,这说明作者作此词时,离别他的家乡才只一年光景。接下去“浑未办”三句,是说作者新来异乡,生活尚未安定,春节到了,连旨酒也备办不起,更谈不到肴馔了。</p>
<p>词的下篇进一步抒发作者自己的忧国怀乡之情。“却笑东风从此”三句,作者想到立春之后,东风就会忙于吹送出柳绿花江的一派春光。“闲时又来镜里,转变朱颜”,语虽虚拟,实际表达了作者初归南宋急欲报国、收复失土的决心,深恐自己磋砣岁月,年华虚度。这里说的“清愁”,实际是作者的忧国忧民的情怀。
<img src="images/" class="imgfloat" />
“解连环”,是用《战国策》秦昭王送玉连环给齐国王后,让她解开的故事。当时的齐王后果断机智地把玉连环椎破,使秦的诡计流于破产。但环顾当前,南宋最高统治集团中人,谁是能作出抗金的正确决策的智勇人物呢?“生怕”,即“甚怕”。“生怕见、花开花落,朝来塞雁先还。”表示作者对于恢复事业的担忧,深恐这一年的花由盛开又复败落,而失地却未能收复,有家仍难归去,言语流露出一丝的惆怅。</p>
</div>
</body>
</html>
。
1. 简单布局1(无内容)
文件名exp12-
<!DOCTYPE html>
<html>
<head>
<title>布局1</title>
<st
实验手册——实验12 来自淘豆网m.daumloan.com转载请标明出处.
