CSS基础知识实验报告

1、css基础知识实验报告 淮海工学院计算工程学院 实 验 报 告 书 课 程 名 ： web 应用开发技术 题 目： 实验一 班 级： 软件 152 班 学 号： 2021107166 姓 名： 王磊 评语： 成绩： 指导教师： 批阅时间： 年 月 日 1、实验目的与要求 目的： 通过本章学习，能够理解 css 的基本概念，掌握 css 的语法，熟悉常用的 css 属性的含义。 核心要点： l css 的概念 l 基本语法 l 常用字体属性 要求： 1）独立完成程序设计、编码与调试 2）编写实验报告 2、实验内容或题目 用 css 的基础知识设计网页 3、实验源程序 源程序： !doctype

2、html public -/w3c/dtd xhtml 1.0 transitional/en l1/dtd/xhtml1-transitional.dtd html xmlns=l 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; bac

3、kground-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-

4、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: 18p

5、x; #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=rowh1著名网站介绍/h1/th /tr tr th width=123 height=118 align=left valign=

6、middle scope=rowa href=l 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 定义超链

7、接为块状，从而可以设置宽度和高度，行高和text-align 分别定义了文字的水平居中和垂直居中，text-decoration 去掉了超链接下默认的下划线。 link，visited，hover，active 分别实现的功能如下： a:link ;字体#006 颜色，超链接不带下划线 a:visited :超链接字体颜色变成另一种颜色 a:hover :鼠标在超链接上方显示手； a:active :正在单击时超链接字体效果变化 内容用li排版，对 li 定义了高度和行高 效果图如下： 最后加入版权信息，用marquee让字体横向移动 代码和效果图如下： 最终效果图如下： 5、结果分析与实验体会 这是第一次网页设计的实验，虽然只是用 css 基础知识设计，但是设计过程中还是遇到一些小问题，比如超链接的显示效果问题，一开始用图片作为背景，但是