CSS基础知识实验报告.doc

淮海工学院计算工程学院
实验报告书

课程名： Web应用开发技术
题 目： 实验一
班 级： 软件152班
学 号： 2015107166
姓 名： 王磊

评语：

成绩： 指导教师：

批阅时间： 年 月 日

《Web应用开发技术》实验报告 - 6 -
1、实验目的与要求
目的：
通过本章学习，能够理解CSS的基本概念，掌握CSS的语法，熟悉常用的CSS属性的含义。
核心要点：
l CSS的概念
l 基本语法
l 常用字体属性
要求：
1）独立完成程序设计、编码与调试
2）编写实验报告
2、实验内容或题目
用CSS的基础知识设计网页
3、实验源程序

源程序：

HTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

无标题文档

<!--
#head{
width: 860px;
height: 720</p><p style='padding:5px 0px;'>4、px;
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:heig</p><p style='padding:5px 0px;'>5、ht: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:#</p><p style='padding:5px 0px;'>6、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;
}

"background.jpg">
td>
rquee>第一行合并单元格，设置无边框效果，放入标题，下面放入主要内容，并加入样式，效果如下：

其中三个导航超链接中，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 :正在单击时超链接字体效果变化

内容用关于我们      便捷服务       自信AI       AI导航        抽奖活动©2010-2026 宁波自信网络信息技术有限公司  版权所有客服电话：[phone]  投诉电话：[phone]浙公网安备33021202000488号   浙ICP备2021020529号-1  |  浙B2-20240490  关注我们 ：