实验三CSS实验.docx
- 文档编号:10935540
- 上传时间:2023-02-23
- 格式:DOCX
- 页数:19
- 大小:3.04MB
实验三CSS实验.docx
《实验三CSS实验.docx》由会员分享,可在线阅读,更多相关《实验三CSS实验.docx(19页珍藏版)》请在冰豆网上搜索。
实验三CSS实验
学生实验报告
课程名称
电子商务网页制作
实验成绩
实验项目名称
CSS实验
批阅教师
代四广
实验者
饶潘琴
学号
20510811139
专业班级
电商1111
实验日期
3月13-5月10日(16学时)
一、实验预习报告(实验目的、内容,主要设备、仪器,基本原理、实验步骤等)(可加页)
1.实验目的:
(1)掌握CSS网页样式控制方法,能灵活利用CSS选择器及其属性设置文本、标题、列表、图像、表格、表单、超链接等元素的样式;
(2)基本掌握CSS网页布局方法,能灵活利用浮动、定位等多种方法实现网页布局。
2.内容:
(1)用CSS格式化文本、应用背景图像及格式化表格和表单等;
(2)应用CSS盒模型,包括:
设置网页元素的宽度、高度、边框、填充、边界、背景等属性;
(3)CSS浮动布局;
(4)CSS定位布局。
3.主要设备、仪器:
联网的计算机、Dream weaver软件。
4.实验步骤:
根据实验指导书完成以下步骤。
步骤一:
使用CSS选择器,为“潜水俱乐部”网站中的首页添加CSS样式表。
【实验指导书(三)】
步骤二:
使用CSS盒模型,制作“悠然我思”网站首页。
【实验指导书(四)】
步骤三:
用CSS设置文本样式,制作“唯存教育”网页。
【实验指导书(五)】
步骤四:
用CSS设置图像样式,制作“八大行星”网页。
【实验指导书(六)】
步骤五:
用CSS设置网页背景,制作csszengarden网站的77号作品“跳跃”。
【实验指导书(七)】
步骤六:
制作圆角框,制作“信息与网络中心”网页。
【实验指导书(八)】
步骤七:
制作导航条,制作“儿童用品网上商店”网站的首页。
【实验指导书(十一)】
步骤八:
两列浮动布局,制作“信息与网络中心”网页。
【实验指导书(九)】
步骤九:
两列定位布局,定义“泡泡潜水俱乐部”网站首页的样式。
【实验指导书(十)】
二、实验过程记录(包括实验过程、数据记录、实验现象等)(可加页)
实验指导书三的步骤
(1)启动dreamweaver8,使用站点新建站点并保存。
(2)新建一个文件夹将myweb保存其中,打开“index.html”文件。
(3)新建css样式表,并保存在myweb文件夹中且命名为style.css如图所示
(4)切换至index.html窗口的代码视图中,在
切换至窗口Style.css完成添加样式后预览如下
三、实验结果分析(可加页)
实验指导书四步骤
(1)新建一个文件夹试验四将“悠然我思”文件夹中的myweb文件夹复制到此新文件夹中。
(2)启动dreamweaver新建一个站点保存在实验四文件夹中。
打开index.html将窗口切换至代码视图为body添加container标签content标签。
(3)新建css文件命名为style.css,将窗口切换至index.html文件代码视图,在
之间添加标记。(4)切换窗口到style.css文件添加样式后如图
实验指导书五步骤
(1)新建一个文件夹试验五将“唯存教育”文件夹中的myweb文件夹复制到此新文件夹中。
(2)启动dreamweaver新建一个站点保存在实验五文件夹中。
(3)新建一个打开myweb中的article.html切换至代码视图。
新建css样式保存至实验五中,在代码视图head之间添加link标记。
(4)再添加css控制网页表现后如图
发现中间的图片一直在左边。
这与原图不符,在修改图片css样式为center后如图
最终结果如图
实验指导书六步骤
(1)新建一个文件夹试验六将“八大行星”文件夹中的myweb文件夹复制到此新文件夹中。
(2)启动dreamweaver新建一个站点保存在六文件夹中。
(3)打开index.html,将窗口切换至代码视图,为body中的container和list添加div标签。
(4)建立命名标记:
点击菜单栏上的命名锚记输入名称确定后在文档设计视图中选择创建连接文本,在属性检查器“链接”文本框中插入数字符号#和锚记名称。
(5)新建css样式表控制网页如图
实验指导书七
(1)新建一个文件夹试验七将“77号作品”文件夹中的myweb文件夹复制到此新文件夹中。
(2)启动dreamweaver新建一个站点保存在实验七文件夹中。
(3)打开index.html和style.css,在style.css中补充网页背景样式,未添加样式前的网页如图
(四)给网页添加背景颜色#f2caff如图。
(五)添加css样式后如图
实验指导书八步骤
(1)新建一个文件夹试验八将“信息与网络中心”文件夹中的myweb文件夹复制到此新文件夹中。
(2)启动dreamweaver新建一个站点保存在实验八文件夹中。
(3)打开index.html和style.css,打开style.css补充网页样式后如图
实验指导书九步骤
(1)新建一个文件夹试验九将“信息与网络中心”文件夹中的myweb文件夹复制到此新文件夹中。
(2)启动dreamweaver新建一个站点保存在实验九文件夹中。
(3)打开index.html和style.css,打开style.css补充网页样式
修改sidebar和content后
Head添加图片和高度后如图
加footer后
添加圆角框顶部后如图
添加圆角框中部和底部图像如图
添加fltlt浮动后
添加图片元素填充和边框和水平排列后如图
最终效果如图
实验指导书十一步骤
(1)新建一个文件夹试验十一将“宝贝屋”文件夹中的myweb文件夹复制到此新文件
(2)启动dreamweaver新建一个站点保存在实验十一文件夹中。
(3)打开index.html和style.css文件,补充css文件完整后如图
实验指导书十步骤
(1)新建一个文件夹实验十将myweb文件夹复制该文件夹中;
(2)启动Dreamweaver,使用“站点|新建站点”命令新建“潜水俱乐部”站点,并指定myweb文件夹为“潜水俱乐部”站点的本地根文件夹。
(3)打开index.html和style.css,补充css样式:
1更改字与字之间的行距后如图
2,
3,添加编号列表和项目列表后如
4,添加超级连接后如图
5,添加container元素后如图
6,设置header居中如图
7导航变化如图
8,添加footer样式
8,添加extradiv元素设置(共七个)后最终结果如图
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 实验三 CSS实验 实验 CSS