实验八 CSS与盒子模型

安徽机电职业技术学院实验报告

课程名称 实验名称 班级 实验时间 指导教师 网页设计与网站管理 实验八 CSS与盒子模型 姓名 年 月 日 韦佳佳 学号 地点 成绩 一、实验目的

1. 了解CSS和盒子模型的概念和作用；

2. 掌握CSS样式的创建、设置、编辑和删除等方法； 3. 掌握CSS+Div布局网页的方法。

文档命名格式：学号+姓名+班级 二、实验内容 一、实战应用

任务一：制作“驴友攻略”网页

本任务是在学习了Div搭建网页结构，CSS修饰网页样式，以及理解“盒子模型”概念后，综合应用Div+CSS标准流布局技术制作网页。

实验目标：为“快乐旅游网”制作“驴友攻略”网页，在其中将显示景点的名称、评价情况、相关图像展示以及攻略等内容，通过该页面可以让网友对景点和相关规定有一个大概的了解。

实验思路：制作过程主要包括Div标签的插入、CSS样式的设置，以及为不同对象应用不同CSS样式等操作，操作思路如图所示：

网页制作思路

实现效果图

实验要求：

1.至少应用到两种CSS样式表应用类型，如链接外部样式表，内部样式表，内嵌样式表等。

2.将创建的CSS样式表内容（包括内部样式表和外部样式表文件）记录如下框展示出：

3.将完成后的页面贴入下框： 二、技术探索

在综合学习过几种网页布局技术之后，谈谈你对使用两种主流布局技术——表格和Div标签——制作网页的感受，即它们在技术特性上有哪些不同，有哪些相似，优缺点又是什么？

答：

三、记录实验体会和实验中遇到的问题及其解决方法（请将你在实验过程中遇到的问题记录下来并写出你的解决方法） 答：