web前端技术实验报告实验二Word格式文档下载.doc
《web前端技术实验报告实验二Word格式文档下载.doc》由会员分享，可在线阅读，更多相关《web前端技术实验报告实验二Word格式文档下载.doc（7页珍藏版）》请在冰豆网上搜索。
二、内容及要求
1、定义四种样式表，并学会引用
2、自定义外部样式表，并能在web页面中导入或链入外部样式表。
3、使用DIV+CSS进行简单的网页布局
4、区别CSS选择符类型，并能灵活运用各种选择符样式定义
三、实验原理
使用了css+div
四、实验步骤
1、确立自己的网页主题
选择了韩国FTISLAND组合队长李弘基作为本次网页设计的主题。
2、收集资料及设置重点
李弘基的资料从格式上分为两类：
图片、文本，从内容上大致分为：
基本信息、演艺经历、获奖记录、人物评价等。
3、网页基本设计
a、分设一个基础网页，开始界面。
开始界面可以链接到其他界面。
b、设计开始页为整图如下：
图一：
开始界面
c、点击上方的不同文字链接进入不同的查看页面。
如图为专辑介绍页：
图二：
介绍专辑主页
如图为演艺经历介绍页：
图三：
介绍演艺经历
如图为人物评价介绍页：
图四：
介绍人物评价
如图为获奖记录介绍页：
图五：
介绍页获奖记录
五、实验代码
主要代码：
1.主页：
<
html>
<
head>
<
title>
李弘基资料卡<
/title>
linkhref="
layout.css"
rel="
stylesheet"
>
styletype="
text/css"
/>
a:
link{color:
#FFF;
}
visited{color:
hover{color:
#CCC;
active{color:
#333;
/style>
/head>
body>
divid="
Container"
<
Header"
center>
span>
fontface="
幼圆"
size="
+2"
首页<
/font>
/span>
color="
#FFF"
|<
ahref="
专辑.html"
专辑<
/a>
获奖记录.html"
获奖记录<
演艺经历.html"
演艺经历<
人物评价.html"
人物评价<
/center>
/div>
<
PageBody"
<
left"
<
right"
MainBody"
imgsrc="
1.jpg"
alt="
"
width="
1000"
border="
0"
Footer"
/body>
/html>
2.layout.css文件
body{
font-family:
Verdana;
font-size:
100;
margin:
0;
text-align:
justify;
}
p{
2px;
#Container{
0auto;
width:
100%;
#Header{
height:
350px;
margin-bottom:
5px;
background-image:
url（"
n.jpg"
）;
#PageBody{
400px;
#left{
float:
left;
200px;
500px;
background:
#MainBody{
oauto;
1000px;
#right{
right;
#Footer{
80px;
m.jpg"
center;
"
GillSans"
"
GillSansMT"
MyriadPro"
DejaVuSansCondensed"
Helvetica,Arial,sans-serif;
13px;
padding-top:
10px;
img{
center;
span{
100px;
margin-top:
50px;
20px;
华文新魏"
;
cursor:
pointer;
h3{
color:
#666;
24px;
}
六、实验总结
1、我学会了利用CSS+DIV制作简单的网页制作：
不同的文字样式设计、定义不同样式、进行外部调用等等。
2、期间遇到了一些问题：
模块嵌套不理想等等。
发现问题并找到问题进行了改正。
解决党委自身和基层党支部存在的的突出问题，发挥各村、社区、机关单位党支部在当前城市征迁、园区建设、招商引资、服务群众、维护稳定的作用，我镇党委高度重视，制定了切合临淮实际的活动实施方案，按照中央规定的活动步骤和要求扎实有效的开展了基层组织建设年活动。
升级会员 