2024年web实验报告书.docVIP

..

淮海工學院计算机工程學院

试验汇报書

課程名:《Web应用開发技术》

題目：试验五用CSS進行文字与图像排版

班级：

學号：

姓名：

评語：

评語：

成绩：指导教師：

批阅時间：年月曰

试验五用CSS進行文字与图像排版

壹试验目的

掌握盒子模型的概念

掌握盒子模型有关的CSS属性

掌握文本控制有关的属性

掌握CSS属性继承的概念并可以合理应用

掌握背景控制有关的CSS属性

掌握列表有关的CSS属性

熟悉Chrome/Firefox開发人员工具中CSS有关功能的使用

理解常見的CSS设计技巧（CSSHacks）和设计模式（如CSSSprite等）

二试验内容和规定

试验内容:

對Spring.html网页文献進行必要的修改，使得目录部分的链接可以跳转到网页中對应的部分；

使用合适的盒子模型CSS属性使网页内容居中显示；

使用文本有关的CSS属性和背景属性對网页的显示進行设计；

文本与图片围绕显示，图片位于左边或右边；

通過伪类选择器控制不壹样状态下超链接的显示。

使用列表有关的CSS属性设计目录部分的显示效果

试验规定：

需要每個同學独立完毕所有的试验环节；（可合适增長class,id等属性辅助CSS样式规则）

下課之前将试验汇报的電子文档提交至教學平台。

三试验环节

!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN

htmlxmlns=xml:lang=en

head

metahttp-equiv=Content-Typecontent=text/html;charset=UTF-8

title春天/title

style

body{

font-size:19px;

font-family:仿宋;

background:#33FFCC;

}

#wrap{

width:960px;

margin:0auto;

background-color:#fff;

border-radius:20px12px;

}

h1,h2,h3,p{

line-height:120%;

}

ol{

list-style-type:none;

}

h1{

font-size:60px;

padding:10px15px;

margin-top:10px;

border-left:8pxsolid#008822;

margin-left:10px;

}

h2,h3{

padding:10px;

border-left:#008822solid5px;

margin-left:10px;

}

p{

margin:10px15px;

}

.landscape-left,.landscape-right{

text-align:center;

border:#D9D9D9solid3px;

margin:0px15px;

}

.landscape-left{

float:left;

}

.landscape-right{

float:right;

}

h2,h3{

clear:both;

}

lia{

font-size:120%;

}

a:link{

text-decoration:none;

color:#052;

}

a:visited{

color:#f0f;

}

a:hover{

color:#f00;

text-decoration:underline;

}

/style

/head

body

divid=wrap

h1春天/h1

p春天，又称為春季，是壹年的第壹种季节，半球為公历3、4、5月，而南半球却是在9月開始，11月結束，如澳大利亚。气候學上以持续5天曰平均气温稳定通過10℃為春季的開始。春天气候温暖适中，中国内陆大部分地区少雨，萬物生机