CSS基础知识实验报告

淮海工学院计算工程学院实验报告书课程名：Web应用开发技术题目：实验一班级：软件152班学号：2015107166姓名：王磊评语：成绩：指导教师：批阅时间：年月日《Web应用开发技术》实验报告-1-1、实验目的与要求目的：通过本章学习，能够理解CSS的基本概念，掌握CSS的语法，熟悉常用的CSS属性的含义。核心要点：CSS的概念基本语法常用字体属性要求：1）独立完成程序设计、编码与调试2）编写实验报告2、实验内容或题目用CSS的基础知识设计网页3、实验源程序源程序：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=utf-8/title无标题文档/titlestyletype=text/css!--#head{width:860px;height:720px;background-image:url(bg.jpg);background-repeat:no-repeat;background-position:centercenter;border:1pxsolid#0FF;margin:auto;}#headh1{《Web应用开发技术》实验报告-2-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应用开发技术》实验报告-3-letter-spacing:2px;}a:active{color:#60F;letter-spacing:3px;font-style:normal;font-size:18px;}#headtabletrthmarquee{font-size:24px;color:#03F;}/style/headbodybackground=background.jpgdivid=headalign=centertablewidth=864height=711border=0align=lefttrthheight=227colspan=2align=leftvalign=middlescope=rowh1著名网站介绍/h1/th/trtrthwidth=123height=118align=leftvalign=middlescope=rowahref=百度/a/thtdwidth=686ullip百度span（Nasdaq：BIDU）/span/p/lili全球最大的中文搜索引擎、最大的中文网站/li/ul/td/trtrthheight=124align=leftvalign=middlescope=rowahref=新浪/a/thtdul《Web应用开发技术》实验报告-4-lip新浪span（NASDAQ：SINA）/span/p/lili是一家以服务大中华地区与海外华人为己任的网络公司/lili覆盖全球华人社区的全球最大中文门户网站。/li/ul/td/trtrthheight=120align=leftvalign=middlescope=rowahref=腾讯/a/thtdullip腾讯计算机系统有限公司span（TENCENT）/span/p/lili成立于1998年11月，由马化腾、张志东等五位创始人共同创立/lili是中国最大的互联网综合服务提供商之一/li/ul/td/trtrthheight=110colspan=2align=rightvalign=middlescope=rowmarquee版权所有——王耘（软件132班）/marquee/th/tr/table/div/body/html4、实验步骤与截图1.先设计CSS样式#head、#headh1、span、li、p、a，并设计超链接的link，visited，hover，active的五个样式，代码如下：《Web应用开发技术》实验报告-5-背景代码和效果图如下：标题代码和效果如下：《Web应用开发技术》实验报告-6-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应用开发技术》实验报告-7-内容用li排版，对li定义了高度和行高效果图如下：最后加入版权信息，用marquee让字体横向移动代码和效果图如下：最终效果图如下：5、结果分析与实验体会这是第一次网页设计的实验，虽然只是用CSS基础知识设计，但是设计过程中还是遇到一些小问题，比如超链接的显示效果问题，一开始用图片作为背景，但是显示效果不佳，最后改用纯色。文字的排版一开始出现字的行与行之间有重叠，后改变行高得以解决，总之，这次实验并不是很难，但是通过这次实验，我的基础知识掌握的更加牢固，动手操作能力也有所提高，我一定会在以后的学习中更加努力，提升自我！