CSS基础知识实验报告

淮海工学院计算工程学院 实验报告书 课 程 名 Web 应用开发技术 题 目 实验一 班 级 软件 152 班 学 号 2015107166 姓 名 王磊 评语 成绩 指导教师 批阅时间 年 月 日 Web 应用开发技术 实验报告 0 1 实验目的与要求 目的 目的 通过本章学习 能够理解 CSS 的基本概念 掌握 CSS 的语法 熟悉常用的 CSS 属性的含义 核心要点 核心要点 CSS 的概念 基本语法 常用字体属性 要求 要求 1 独立完成程序设计 编码与调试 2 编写实验报告 2 实验内容或题目 用 CSS 的基础知识设计网页 3 实验源程序 源程序 源程序 无标题文档 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 Web 应用开发技术 实验报告 1 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 Web 应用开发技术 实验报告 2 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 著名网 站介绍 百度 百度 Nasdaq BIDU 全球最大的中文搜索引擎 最大的中文网站 新浪 Web 应用开发技术 实验报告 3 新浪 NASDAQ SINA 是一家以服务大中华地区与海外华人为己任的网络公司 覆盖全球华人社区的全球最大中文门户网站 腾讯 腾讯计算机系统有限公司 TENCENT 成立于 1998 年 11 月 由马化腾 张志东等五位创始人共同创立 是中国最大的互联网综合服务提供商之一 版 权所有 王耘 软件 132 班 4 实验步骤与截图 1 先设计 CSS 样式 head head h1 span li p a 并设计超链接的 link visited hover active 的五个样式 代码如下 Web 应用开发技术 实验报告 4 背景代码和效果图如下 标题代码和效果如下 Web 应用开发技术 实验报告 5 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 正在单击时超链接字体效果变化 Web 应用开发技术 实验报告 6 内容用排版 对 li 定义了高度和行高 效果图如下 最后加入版权信息 用让字体横向移动 代码和效果图如下 最终效果图如下 5 结果分析与实验体会 这是第一次网页设计的实验 虽然只是用 CSS 基础知识设计 但是设计过程中还 是遇到一些小问题 比如超链接的显示效果问题 一开始用图片作为背景 但是显示 效果不佳 最后改用纯色