Web前端技术实验报告
课程名称： Web前端技术
实验名称： css+div网页
设计
领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计
系别班级：计科系 1306 班
学生姓名： 宋馨芳
学生学号： 2013100603
指导老师： 杨晓敏
一、实验目的
1、掌握CSS基本概念、CSS类型及四种CSS样式定义的方法
2、理解DIV的概念
3、掌握DIV的属性设置方法
4、学会使用DIV+CSS进行网页布局设计
二、内容及要求
1、定义四种样式
表
关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf
，并学会引用
2、自定义外部样式表，并能在web页面中导入或链入外部样式表。
3、使用DIV+CSS进行简单的网页布局
4、区别CSS选择符类型，并能灵活运用各种选择符样式定义
三、实验原理
使用了css+div
四、实验步骤
1、 确立自己的网页主题
选择了韩国FTISLAND组合队长李弘基作为本次网页设计的主题。
2、收集资料及设置重点
李弘基的资料从格式上分为两类：图片、文本，从内容上大致分为：基本信息、演艺经历、获奖记录、人物评价等。
3、 网页基本设计
a、 分设一个基础网页，开始界面。开始界面可以链接到其他界面。
b、 设计开始页为整图如下：
图一：开始界面
c、 点击上方的不同文字链接进入不同的查看页面。如图为专辑介绍页：
图二：介绍专辑主页
如图为演艺经历介绍页：
图三：介绍演艺经历
如图为人物评价介绍页：
图四：介绍人物评价
如图为获奖记录介绍页：
图五：介绍页获奖记录
五、实验代码
主要代码：
1.主页：
李弘基资料卡
a:link{color:#FFF;}
a:visited{color:#FFF;}
a:hover{color:#CCC;}
a:active{color:#333;}
2.layout.css文件
body{
font-family: Verdana;
font-size: 100;
margin: 0;
text-align: justify;
}
p{
margin:2px;
}
#Container{
margin:0 auto;
width:100%;
}
#Header{
height: 350px;
margin-bottom: 5px;
background-image: url("n.jpg");
}
#PageBody{
height: 400px;
}
#left{
float: left;
width: 200px;
height: 500px;
background:#FFF;
}
#MainBody{
margin:o auto;
width: 1000px;
height: 500px;
}
#right{
float: right;
width: 200px;
height: 500px;
background:#FFF;
}
#Footer{
height: 80px;
background-image: url("m.jpg");
text-align: center;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 13px;
padding-top: 10px;
}
img{
float:center;
}
span{
width:100px;
margin-top:50px;
font-size:20px;
font-family:"华文新魏";
cursor:pointer;
}
h3{
text-align: center;
color: #666;
font-size: 24px;
}
6、实验总结
1、我学会了利用CSS+DIV制作简单的网页制作：不同的文字样式设计、定义不同样式、进行外部调用等等。
2、期间遇到了一些问题：模块嵌套不理想等等。发现问题并找到问题进行了改正。
浙公网安备 33021202002483