web前端技术实验报告实验二Word格式文档下载.docx

web前端技术实验报告实验二Word格式文档下载.docx

《web前端技术实验报告实验二Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《web前端技术实验报告实验二Word格式文档下载.docx（9页珍藏版）》请在冰豆网上搜索。

图五：

介绍页获奖记录

五、实验代码

主要代码：

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、期间遇到了一些问题：

模块嵌套不理想等等。

发现问题并找到问题进行了改正。