实验三CSS实验--第1页
学生实验报告
课程名称电子商务网页制作实验成绩
实验项目名称CSS实验批阅教师代四广
实验者饶潘琴学号20510811139专业电商1111实3月13-5月10
一、实验预习报告（实验目的、内容，主要设备、仪器，基本原理、实验步骤等）（可加页）
1．实验目的：
（1）掌握CSS网页样式控制方法，能灵活利用CSS选择器及其属性设置文本、标题、
列表、图像、表格、表单、超链接等元素的样式；
（2）基本掌握CSS网页布局方法，能灵活利用浮动、定位等多种方法实现网页布局。
2．内容:
（1）用CSS格式化文本、应用背景图像及格式化表格和表单等；
（2）应用CSS盒模型，包括：设置网页元素的宽度、高度、边框、填充、边界、背景等
属性；
（3）CSS浮动布局；
（4）CSS定位布局。
3.主要设备、仪器：联网的计算机、Dreamweaver软件。
4.实验步骤：
根据实验指导书完成以下步骤。
步骤一：使用CSS选择器，为“潜水俱乐部”网站中的首页添CSS加样式表。【实验指导书（三）】
步骤二：使用CSS盒模型，制作“悠然我思”网站首页。【实验指导书（四）】
步骤三：用CSS设置文本样式，制作“唯存教育”网页。【实验指导书（五）】
步骤四：用CSS设置图像样式，制作“八大行星”网页。【实验指导书（六）】
步骤五：用CSS设置网页背景，制作csszengarden网站的77号作品“跳跃”。【实验指导书
实验三CSS实验--第1页
实验三CSS实验--第2页
（七）】
步骤六：制作圆角框，制作“信息与网络中心”网页。【实验指导书（八）】
步骤七：制作导航条，制作“儿童用品网上商店”网站的首页。【实验指导书（十一）】
步骤八：两列浮动布局，制作“信息与网络中心”网页。【实验指导书（九）】
步骤九：两列定位布局，定义“泡泡潜水俱乐部”网站首页的样式。【实验指导书（十）】
实验三CSS实验--第2页
实验三CSS实验--第3页
二、实验过程记录（包括实验过程、数据记录、实验现象等）（可加页）
实验指导书三的步骤
（1）启动dreamweaver8，使用站点新建站点并保存。（2）新建一个文件夹将myweb保
存其中，打开“index.html”文件。（3）新建css样式表，并保存在myweb文件夹中且命名为
style.css如图所示
（4）切换至index.html窗口的代码视图中，在headhead/标记间添加link/标记link
切换至窗口Style.css完成添加样式后预览如下
实验三CSS实验--第3页
实验三CSS实验--第4页
三、实验结果分析（可加页）
实验指导书四步骤
（1）新建一个文件夹试验四将“悠然我思”文件夹中的myweb文件夹复制到此新文件夹中。
（2）启动dreamweaver新建一个站点保存在实验四文件夹中。打开index.html将窗口切
换至代码视图为body添加container标签content标签。（3）新建css文件命名为style.css，
将窗口切换至index.html文件代码视图，在head之间添加link标记。（4）切换窗口到
style.css文件添