- -
- 考试资料
..
淮海工学院计算机工程学院
实验报告书
课程名:《Web应用开发技术》
题 目：实验五 用CSS进行文字与图像排版
班 级：
学 号：
姓 名：
评语：
成绩： 指导教师：
批阅时间： 年 月 日
- -
- 考试资料
实验五 用CSS进行文字与图像排版
一 实验目的
掌握盒子模型的概念
掌握盒子模型相关的CSS属性
掌握文本控制相关的属性
掌握CSS属性继承的概念并能够合理应用
掌握背景控制相关的CSS属性
掌握列表相关的CSS属性
熟悉Chrome/Firefox开发人员工具中CSS相关功能的使用
了解常见的CSS设计技巧（CSS Hacks）和设计模式（如CSS Sprite等）
二 实验内容和要求
实验内容:
，使得目录部分的链接可以跳转到网页中相应的部分；
使用合适的盒子模型CSS属性使网页内容居中显示；
使用文本相关的CSS属性和背景属性对网页的显示进行设计；
文本与图片环绕显示，图片位于左边或右边；
通过伪类选择器控制不同状态下超链接的显示。
使用列表相关的CSS属性设计目录部分的显示效果
实验要求：
需要每个同学独立完成所有的实验步骤；（可适当增加class,id等属性辅助CSS样式规则）
下课之前将实验报告的电子文档提交至教学平台。
三 实验步骤
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN" ".-">
<html xmlns="." 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:
web实验报告 来自淘豆网m.daumloan.com转载请标明出处.
