实验三 CSS实验_原创文档.pdf

实验三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文件添