最新CSS基础知识实验报告.doc

《最新CSS基础知识实验报告.doc》由会员分享，可在线阅读，更多相关《最新CSS基础知识实验报告.doc（10页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、精品资料CSS基础知识实验报告.淮海工学院计算工程学院实验报告书课程名： Web应用开发技术 题 目： 实验一 班 级： 软件132班 学 号： 2013122913 姓 名： 王耘 评语：成绩： 指导教师： 批阅时间： 年 月 日1、实验目的与要求目的：通过本章学习，能够理解CSS的基本概念，掌握CSS的语法，熟悉常用的CSS属性的含义。核心要点： l CSS的概念l 基本语法l 常用字体属性要求： 1）独立完成程序设计、编码与调试 2）编写实验报告 2、实验内容或题目用CSS的基础知识设计网页3、实验源程序源程序：无标题文档!-#headwidth: 860px;height: 720px

2、;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;spancolor:#F00;font-size:15px;liline:height:24px;height:24px;pcolor:#00C;font-size:19px;afont-size:22

3、px;line-height:30px;text-decoration:none;text-align:center;height:30px;width:110px;display:block;a:linkcolor:#006;background-color:#69F;a:visitedcolor:#C9F;background-color:#63F;a:hoverfont-weight:bold;color:#FFF;background-color:#30F;letter-spacing:2px;a:activecolor: #60F;letter-spacing: 3px;font-s

4、tyle: normal;font-size: 18px;#head table tr th marquee font-size: 24px;color: #03F; 著名网站介绍 百度 百度（Nasdaq：BIDU） 全球最大的中文搜索引擎、最大的中文网站 新浪 新浪（NASDAQ：SINA） 是一家以服务大中华地区与海外华人为己任的网络公司 覆盖全球华人社区的全球最大中文门户网站。 腾讯 腾讯计算机系统有限公司（TENCENT） 成立于1998年11月，由马化腾、张志东等五位创始人共同创立 是中国最大的互联网综合服务提供商之一 版权所有王耘（软件132班） 4、 实验步骤与截图1.先设计C

5、SS样式#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-de

6、coration去掉了超链接下默认的下划线。link，visited，hover，active分别实现的功能如下：a:link ;字体#006颜色，超链接不带下划线a:visited :超链接字体颜色变成另一种颜色a:hover :鼠标在超链接上方显示手；a:active :正在单击时超链接字体效果变化内容用排版，对li定义了高度和行高效果图如下：最后加入版权信息，用让字体横向移动代码和效果图如下：最终效果图如下：5、结果分析与实验体会 这是第一次网页设计的实验，虽然只是用CSS基础知识设计，但是设计过程中还是遇到一些小问题，比如超链接的显示效果问题，一开始用图片作为背景，但是显示效果不佳，最后改用纯色。文字的排版一开始出现字的行与行之间有重叠，后改变行高得以解决，总之，这次实验并不是很难，但是通过这次实验，我的基础知识掌握的更加牢固，动手操作能力也有所提高，我一定会在以后的学习中更加努力，提升自我！