..
淮海工学院计算机工程学院
实验报告书
课程名:《Web应用开发技术》
题 目：实验五 用CSS进行文字与图像排版
班 级：
学 号：
姓 名：
实验五 用CSS进行文字与图像排版
一实验目的
l 掌握盒子模型的概念
l 掌握盒子模型相关的CSS属性
l 掌握文本控制相关的属性
l 掌握CSS属性继承的概念并能够合理应用
l 掌握背景控制相关的CSS属性
l 掌握列表相关的CSS属性
l 熟悉Chrome/Firefox开发人员工具中CSS相关功能的使用
l 了解常见的CSS设计技巧（CSS Hacks）和设计模式（如CSS Sprite等）
二 实验内容和要求
实验内容:
1. 对Spring.html网页文件进行必要的修改，使得目录部分的链接可以跳转到网页中相应的部分；
2. 使用合适的盒子模型CSS属性使网页内容居中显示；
3. 使用文本相关的CSS属性和背景属性对网页的显示进行设计；
4. 文本与图片环绕显示，图片位于左边或右边；
5. 通过伪类选择器控制不同状态下超链接的显示。
6. 使用列表相关的CSS属性设计目录部分的显示效果
实验要求：
（1） 需要每个同学独立完成所有的实验步骤；（可适当增加class,id等属性辅助CSS样式规则）
（2） 下课之前将实验报告的电子文档提交至教学平台。
三实验步骤
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>春天</title>
<style>
body {
font-size:19px;
font-family:"仿宋";
background: #33FFCC;
}
#wrap {
width:960px;
margin:0 auto;
background-color:#fff;
border-radius:20px 12px;
}
h1,h2,h3,p {
line-height: 120%;
}
ol {
list-style-type:none;
}
h1 {
font-size: 60px;
padding: 10px 15px;
margin-top: 10px;
border-left: 8px solid #008822;
margin-left: 10px;
}
h2,h3 {
padding: 10px;
border-left: #008822 solid 5px;
margin-left: 10px;
}
p{
margin: 10px 15px;
}
.landscape-left, .landscape-right {
text-align: center;
border: #D9D9D9 solid 3px;
margin: 0px 15px;
}
.landscape-left {
float:left;
}
.landscape-right {
float:right;
}
h2,h3 {
clear: both;
}
li a {
font-size: 120%;
}
a:link {
text-decoration: none;
color: #052;
}
a:visited {
color: #f0f;
}
a:hover {
color: #f00;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="wrap">
<h1>春天</h1>
<p>春天，又称为春季，是一年的第一个季节，半球为公历3、4、5月，而南半球却是在9月开始，11月结束，如澳大利亚。气候学上以连续5天日平均气温稳定通过10℃为春季的开始。春天气候温暖适中，中国内陆大部分地区少雨，万物生机萌发，气候多变，乍暖还寒。</p>
<h2>目录</h2>
<ol>
<li><a href="#">1 雅述</a></li>
<li><a href="#jq">2 节气</a></li>
<li>
<ol>
<li><a href="#lc">2.1 立春</a></li>
<li><a href="#ys">2.2 雨水</a></li>
<li><a href="#jz">2.3 惊蛰 </a></li>
<li><a href="#cf">2.4 春分</a></li>
<li><a href="#qm">2.5 清明 </a></li>
<li><a href="#gy">2.6 谷雨 </a></li>
</ol>
</li>
</ol>
<h2>春天 - 雅述</h2>
<div class="landscape-right">
<p><img src="landscape-1.jpg" alt="春天，万物复苏"></p>
<p>春天，万物复苏</p>
</div>
<p>春三月，此谓发陈，天地俱生，万物以荣，夜卧早起，广（多）步（走）于庭，被发缓形（意喻不受束缚），以使志生。生而勿杀，予而勿夺，赏而勿罚，此春气之应，养生之道也。逆之则伤肝，夏为寒变，奉长者少。</p>
<p>春阳：因春天阳光温和明媚，令人神往陶醉，故而得名；<a href="http://www.baike.com/wiki/%E9%99%88%E5%AD%90%E6%98%82">陈子昂</a>诗“白日每不归，春阳时暮矣”。就是描写春阳的诗句。</p>
<p>阳春：春天的美称。唐朝诗人<a href="http://www.baike.com/wiki/%E6%9D%8E%E7%99%BD">李白</a>诗中就有“阳春召我饶烟景”的诗句。</p>
<p>芳春：因春天草木萌动，百草新生，大地草绿如茵，繁花似锦，故而得名。陆机诗“烈心厉劲秋，丽服鲜芳春”。将芳春的特点，写得入景入神。</p>
<p>蠢：古时“春”“蠢”同音同意，春来虫动，形声兼会。</p>
<p>青春：因春天草木青青而得名。<a href="http://www.baike.com/wiki/%E6%9D%9C%E7%94%AB">杜甫</a>诗：“白日放歌须纵酒，青春作伴好还乡”。</p>
<p>艳阳：因春季阳光灿烂而得此荣名。清代华广生辑俗曲集《白雪遣音·艳阳春》有句云：“艳阳天，和风荡荡，杨柳依依”。</p>
<p>三春：因为春季包涵了一、二、三月，而合称“三春”。<a href="http://www.baike.com/wiki/%E5%AD%9F%E9%83%8A">孟郊</a>诗：“谁言寸草心，报得三春晖”。</p>
<p>九春：按民间习俗，十天为一春，春季有90天，故又称“九春”。诗人<a href="http://www.baike.com/wiki/%E9%98%AE%E7%B1%8D">阮籍</a>有诗：“说怪若九春，磐折似秋霜”。</p>
<p>踏青：又叫春游、探春等。中国的踏青习俗由来已久，传说远在先秦时已形成，也有说始于魏晋。据《晋书》记载：每年春天，人们都要结伴到郊外游春赏景，至唐宋尤盛。唐代诗人杜甫就曾记载皇家游春踏青的盛景，“三月三日天地新，长安水边多丽人。”千百年来，踏青渐成了一种仪式，仿佛只有行了这种仪式，才真正拥有了春天。“逢春不游乐，但恐是痴人。”白居易的《春游》诗正是这种心境的写照。</p>
<p>此外，还有“阳节”、“昭节”、“韵节”、“淑节”、“仑灵”等二十多种雅称。</p>
<a name="jq"/>
<h2>春天 - 节气</h2>
<a name="lc"/>
<h3>立春</h3>
<div class="landscape-left">
<p><img src="landscape-2.jpg" alt="春天景色"></p>
<p>春天景色</p>
</div>
<p>立春是开始的意思,立春就是春季的开始。自秦代以来，中国就一直以立春作为春季的开始。立春是从天文上来划分的，而在自然界、在人们的心目中，春是温暖，鸟语花香；春是生长，耕耘播种。在气候学中，春季是指候（5天为一候）平均气温10℃至22℃的时段。 </p>
<p>时至立春，人们明显地感觉到白昼长了，太阳暖了。气温、日照、降雨，这时常处于一年中的转折点，趋于上升或增多。小春作物长势加快，油菜抽苔和小麦拔节时耗水量增加，应该及时浇灌追肥，促进生长。农谚提醒人们立春雨水到，早起晚睡觉"大春备耕也开始了。虽然立了春，但是华南大部分地区仍是很冷“白雪却嫌春色晚，故穿庭树作飞花”的景象。这些气候特点，在安排农业生产时都是应该考虑到的</p>
<a name="ys"/>
<h3>雨水</h3>
<p>降雨开始，雨量渐增。雨水节气的涵义是降雨开始，雨量渐增，在二十四节气的起源地黄河流域，雨水之前天气寒冷，但见雪花纷飞，难闻雨声淅沥。雨水之后气温一般可升至0 ℃以上，雪渐少而雨渐多。可是在气候温暖的南方地区，即使隆冬时节，降雨也不罕见。中国南方大部分地区这段时间候平均气温多在10℃以上，桃李含苞，樱桃花开，确以进入气候上的春天。除了个别年份外，霜期至此也告终止。嫁接果木，植树造林，正是时候。华南继冬干之后，常年多春旱，特别是华南西部更是"春雨贵如油"。农业上要注意保墒，及时浇灌，以满足小麦拔节孕穗、油菜抽苔开花需水关键期的水分供应。西北高原山地仍处于干季，空气温度小，风速大，容易发生森林火灾。另外，寒潮入侵时可引起强降温和暴风雪，对老、弱、幼畜危害极大。所有这些，都要特别注意预防。</p>
<a name="jz"/>
<h3>惊蛰</h3>
<div class="landscape-right">
<p><img src="landscape-3.jpg" alt="惊蛰"></p>
<p>惊蛰</p>
</div>
<p>蛰是藏的意思。惊蛰是指春雷乍动，惊醒了蛰伏在土中冬眠的动物。到了惊蛰，我国大部地区进入春耕大忙季节。真是：季节不等人，一刻值千金。大部分地区惊蛰节气平均气温一般为12℃至14℃，较雨水节气升高3℃以上，是全年气温回升最快的节气。日照时数也有比较明显的增加。但是因为冷暖空气交替，天气不稳定，气温波动甚大。华南东南部长江河谷地区，多数年份惊势期间气温稳定在12℃以上，有利于水稻和玉米播种，其余地区则常有连续3 天以上日平均气温在12℃以下的低温天气出现，不可盲目早播。惊蛰虽然气温升高迅速，但是雨量增多却有限。华南中部和西北部惊蛰期间降雨总量仅10毫米左右，继常年冬干之后，春旱常常开始露头。这时小麦孕穗、油菜开花都处于需水较多的时期，对水分要求敏感，春旱往往成为影响小春产量的重要因素。植树造林也应该考虑这个气候特点，栽后要勤于浇灌，努力提高树苗成活率。</p>
<a name="cf"/>
<h3>春分</h3>
<p>分是平分的意思。春分表示昼夜平分。春分后，中国南方大部分地区越冬作物进入春季生长阶段。华中有"春分麦起身，一刻值千金"的农谚。南方大部分地区各地气温则继续回升，但一般不如雨水至春分这段时期上升得快。3月下旬平均气温华南北部多为13℃至15℃，华南南部多为15℃至16℃。高原大部分地区已经雪融冰消，旬平均气温约5℃至10℃。
中国南方大部分地区等河谷地区气温最高，平均已达18℃至20℃左右。南方除了边缘山区以外，平均十有七、八年日平均气温稳定上升到12℃以上，有利于水稻、玉米等作物播种，植树造林也非常适宜。但是，春分前后华南常常有一次较强的冷空气入侵，气温显著下降，最低气温可低至5℃以下。有时还有小股冷空气接踵而至，形成持续数天低温阴雨，对农业生产不利。根据这个特点，应充分利用天气预报，抓住冷尾暖头适时播种。</p>
<a name="qm"/>
<h3>清明</h3>
<p>天气晴朗，草木繁茂。清明是表征物候的节气，含有天气晴朗、草木繁茂的意思。清明这天，民间有踏青、寒食、扫墓等习俗。</p>
<a name="gy"/>
<h3>谷雨</h3>
<p>雨生百谷。雨量充足而及时，谷类作物能茁壮成长谷雨时节的南方地区，”杨花落尽子规啼“，柳絮飞落，杜鹃夜啼，牡丹吐蕊，樱桃红熟，自然景物告示人们：时至暮春了。这时，南方的气温升高较快，一般4月下旬平均气温，除了华南北部和西部部分地区外，已达20℃至22℃，比中旬增高2℃以上。华南东部常会有一、二天出现30以上的高温，使人开始有炎热之感。低海拔河谷地带业以进入夏季。华南春季气温较高的气候特点，有利于在大春作物栽培措施上抓早。适宜红苕栽插的温度为18℃至22℃，这时已能满足。华南老旱区的经验证明，红苕在谷雨后早栽，能够在伏旱前使藤叶封厢，增强抗旱能力，获得高产稳产。</p>
</div>
</body>
</html>
四实验结果
五实验分析体会
通过实验，理解掌握了什么？解决了什么问题？有何体会？…
第二篇：web实验报告模板
云南大学软件学院
实 验 报 告
序 号： 实验老师： 李震雄
课程名称： Web技术及应用开发实践
实验名称： 实验二 CSS
学 号： 20111120156 姓 名： 郑晓芳
一、实验目的
针对web技术技术及应用开发实践课程的相关知识，进行实际操作，保证对课程知识的实际运用。同时对web技术有基本的了解和技能掌握
二、实验基础
三、实验环境
四、实验内容
导师签名：李震雄