淮海工学院计算机工程学院实验报告书课程名:《Web应用开发技术》题目:实验五用CSS进行文字与图像排版班级:学号:姓名:评语:成绩:指导教师:批阅时间:年月日实验五用CSS进行文字与图像排版一实验目的掌握盒子模型的概念掌握盒子模型相关的CSS属性掌握文本控制相关的属性掌握CSS属性继承的概念并能够合理应用掌握背景控制相关的CSS属性掌握列表相关的CSS属性熟悉Chrome/Firefox开发人员工具中CSS相关功能的使用了解常见的CSS设计技巧(CSSHacks)和设计模式(如CSSSprite等)二实验内容和要求实验内容:,使得目录部分的链接可以跳转到网页中相应的部分;使用合适的盒子模型CSS属性使网页内容居中显示;使用文本相关的CSS属性和背景属性对网页的显示进行设计;文本与图片环绕显示,图片位于左边或右边;通过伪类选择器控制不同状态下超链接的显示。使用列表相关的CSS属性设计目录部分的显示效果实验要求:需要每个同学独立完成所有的实验步骤;(可适当增加class,id等属性辅助CSS样式规则)下课之前将实验报告的电子文档提交至教学平台。三实验步骤<!DOCTYPEhtmlPUBLIC"-//W3C////EN""/xhtml1/DTD/xhtml1-"><htmlxmlns="9/xhtml"xml:lang="en"><head> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"> <title>春天</title> <style> body{ font-size:19px; font-family:"仿宋"; background:#; } #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℃为春季的开始。春天气候温暖适中,中国内陆大部分地区少雨,万物生机萌发,气候多变,乍暖还寒。</p> <h2>目录</h2> <ol> <li><ahref="#">1雅述</a></li> <li><ahref="#jq">2节气</a></li> <li> <ol> <li><ahref="#lc"></a></li> <li><ahref="#ys"></a></li> <li><ahref="#jz"></a></li> <li><ahref="#cf"></a></li> <li><ahref="#qm"></a></li> <li><ahref="#gy"></a></li> </ol> </li> </ol> <h2>春天-雅述</h2> <divclass="landscape-right"> <p><imgsrc="landscape-"alt="春天,
web实验报告 来自淘豆网m.daumloan.com转载请标明出处.
