Dreamweaver的使用(网页界面布局)实验报告

Dreamweaver的使用(网页界面布局)实验报告实验名称实验1Dreamweaver的使用(网页界面布局)院（系）计算机科学与工程学院专业班级姓名学号指导教师所属学期2019－2020学年第一学期《电子商务静态网站建设》实验报告实验序号：实验一实验项目名称：实验一Dreamweaver的使用（网页界面布局）实验时间：年月日学号姓名专业班级实验地点指导教师上机号实验1Dreamweaver的使用（层叠样式表的应用）【实验目的】1、掌握CSS样式表的引用的几种方式2、掌握用外部CSS样式文件控制网页中元素的格式和外观3、掌握对网页中元素的样式应用【实验环境】Windowsxp，DreamweaverCS6。【实验重点及难点】创建和保存外部CSS样式文件。【实验内容】利用css+div完成滚动轮播图效果轮播图效果展示实现代码效果展示实现代码效果展示：利用CSS+DIV完成下面网页界面布局实现代码格子布局css效果

一、将下面的代码粘贴到网页中#top{height:400px; width:1000px;background-image:url(t2.jpg); margin-right:auto;margin-left:auto;position:relative;overflow:hidden}#top#scroll{height:400px;width:4000px;position:absolute;animation:move8sinfinite}ul{list-style:none}ulli{ height:20px;float:left;width:20px;margin-right:20px;margin-right:15px;border:1pxsolid#F00;}#top#bottom{width:500px;height:60px;position:absolute;background-color:rgba(255,255,208,0.3); z-index:3;bottom:0px;left:250px}#top#scrollimg{width:1000px;height:400px;float:left}@keyframesmove{0%{margin-left:0px}30%{margin-left:-1000px}70%{margin-left:-2000px}100%{{margin-left:-3000px}}</style>二．利用CSS+DIV完成下面网页界面布局1.2主要代码如下：/*页面层容器*/#container{width:100%}/*页面头部*/#Header{width:960px;margin:0auto;height:100px;background:#FC9}/*页面主体*/#PageBody{width:960px;margin:0auto;height:400px;background:#9FC}/*页面底部*/#Footer{width:960px;margin:0auto;height:50px;background:#0FF}3.主要代码如下：/*页面层容器*/#container{width:100%}/*页面头部*/#nav{width:100%;height:100px;background:#FFF}#Header{width:100%;height:400px;background:#FC9}/*页面主体*/#PageBody{width:960px;height:400px;background:#9FC}/*页面底部*/在里面全台拆分为三部分#Footer{width:960px;margin:0auto;height:50px;background:#0FF}、3.自备素材通过CSS+DIV完成简单的网页界面布局要求：1.页面中既有图片也有文本2.要求有6个以上的DIV