资源描述
淮海工学院计算工程学院
实验报告书
课程名： Web应用开发技术
题 目： 实验一
班 级： 软件152班
学 号： 2015107166
姓 名： 王磊
评语：
成绩： 指导教师：
批阅时间： 年 月 日
《Web应用开发技术》实验报告 - 6 -
1、实验目的与要求
目的：
通过本章学习，能够理解CSS的基本概念，掌握CSS的语法，熟悉常用的CSS属性的含义。
核心要点：
l CSS的概念
l 基本语法
l 常用字体属性
要求：
1）独立完成程序设计、编码与调试
2）编写实验报告
2、实验内容或题目
用CSS的基础知识设计网页
3、实验源程序
源程序：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#head{
width: 860px;
height: 720px;
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-position: center center;
border: 1px solid #0FF;
margin:auto;
}
#head h1 {
font-size: 3em;
background-image:url(top.jpg);
color: white;
}
span{
color:#F00;
font-size:15px;
}
li{
line:height:24px;
height:24px;
}
p{
color:#00C;
font-size:19px;
}
a{
font-size:22px;
line-height:30px;
text-decoration:none;
text-align:center;
height:30px;
width:110px;
display:block;
}
a:link{
color:#006;
background-color:#69F;
}
a:visited{
color:#C9F;
background-color:#63F;
}
a:hover{
font-weight:bold;
color:#FFF;
background-color:#30F;
letter-spacing:2px;
}
a:active{
color: #60F;
letter-spacing: 3px;
font-style: normal;
font-size: 18px;
}
#head table tr th marquee {
font-size: 24px;
color: #03F;
}
</style>
</head>
<body background="background.jpg">
<div id="head" align="center">
<table width="864" height="711" border="0" align="left">
<tr>
<th height="227" colspan="2" align="left" valign="middle" scope="row"><h1>著名网站介绍</h1></th>
</tr>
<tr>
<th width="123" height="118" align="left" valign="middle" scope="row"><a href="">百度</a></th>
<td width="686">
<ul>
<li><p>百度<span>（Nasdaq：BIDU）</span></p></li>
<li>全球最大的中文搜索引擎、最大的中文网站</li>
</ul>
</td>
</tr>
<tr>
<th height="124" align="left" valign="middle" scope="row"><a href="">新浪</a></th>
<td>
<ul>
<li><p>新浪<span>（NASDAQ：SINA）</span></p></li>
<li>是一家以服务大中华地区与海外华人为己任的网络公司</li>
<li>覆盖全球华人社区的全球最大中文门户网站。</li>
</ul>
</td>
</tr>
<tr>
<th height="120" align="left" valign="middle" scope="row"><a href="">腾讯</a></th>
<td>
<ul>
<li><p>腾讯计算机系统有限公司<span>（TENCENT）</span></p></li>
<li>成立于1998年11月，由马化腾、张志东等五位创始人共同创立</li>
<li>是中国最大的互联网综合服务提供商之一</li>
</ul>
</td>
</tr>
<tr>
<th height="110" colspan="2" align="right" valign="middle" scope="row"><marquee>版权所有——王耘（软件132班）</marquee></th>
</tr>
</table>
</div>
</body>
</html>
4、 实验步骤与截图
1.先设计CSS样式#head、#head h1、span、li、p、a，并设计超链接的link，visited，hover，active的五个样式，代码如下：
背景代码和效果图如下：
标题代码和效果如下：
2．建立一个5行2列的表格，第一行合并单元格，设置无边框效果，放入标题，下面放入主要内容，并加入样式，效果如下：
其中三个导航超链接中，a定义了宽度、高度、display（显示）、text-decoration（文字修饰）、text-align（文本水平居中）和行高。display：block定义超链接为块状，从而可以设置宽度和高度，行高和text-align分别定义了文字的水平居中和垂直居中，text-decoration去掉了超链接下默认的下划线。
link，visited，hover，active分别实现的功能如下：
a:link ;字体#006颜色，超链接不带下划线
a:visited :超链接字体颜色变成另一种颜色
a:hover :鼠标在超链接上方显示手；
a:active :正在单击时超链接字体效果变化
内容用<li>排版，对li定义了高度和行高
效果图如下：
最后加入版权信息，用<marquee>让字体横向移动
代码和效果图如下：
最终效果图如下：
5、结果分析与实验体会
这是第一次网页设计的实验，虽然只是用CSS基础知识设计，但是设计过程中还是遇到一些小问题，比如超链接的显示效果问题，一开始用图片作为背景，但是显示效果不佳，最后改用纯色。文字的排版一开始出现字的行与行之间有重叠，后改变行高得以解决，总之，这次实验并不是很难，但是通过这次实验，我的基础知识掌握的更加牢固，动手操作能力也有所提高，我一定会在以后的学习中更加努力，提升自我！
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
