web大作业实验报告
- 格式:doc
- 大小:828.00 KB
- 文档页数:12
web前端期末大作业总结一、前言随着移动互联网的快速发展和普及,前端开发作为一门独立的技术专业受到了广大学生的热衷追捧,因此,作为一名学习了一学期的web前端的学生,我很荣幸能够参加这次的期末大作业,通过这次作业,我不仅锻炼了自己动手实践的能力,还巩固了自己在前端开发上的知识,提升了自己的技术水平。
下面就让我来详细总结一下这次期末大作业的整个过程。
二、需求分析在开始实施这次期末大作业之前,我首先对项目的需求进行了分析,明确了整个项目的目标和功能。
经过调研和了解,我决定以一个在线商城的网站为例子,通过这个项目来实践和巩固自己在前端开发上的知识。
具体的需求如下:1. 首页展示:展示商城的热门商品、推荐商品等。
2. 商品详情页:查看具体商品信息,包括图片、价格、库存等。
3. 购物车:将商品加入购物车并计算总价。
4. 用户登录和注册功能。
5. 订单支付功能。
三、技术选型在确定了需求之后,我就开始进行技术选型了。
考虑到项目的复杂性和需要的功能,我选择使用以下技术:1. HTML5:用于构建网页的结构和内容。
2. CSS3:用于实现网页的样式和布局。
3. JavaScript:用于实现网页的交互和动态效果。
4. jQuery:用于简化JavaScript代码的编写。
5. Bootstrap:用于加速网页的开发,提供了丰富的组件和样式。
四、开发过程1. 首页设计和实现在设计和实现首页的时候,我注重了网站的整体风格和UI设计,使得用户在进入网站后就能够感受到网站的专业性和友好性。
通过HTML5和CSS3的特性,我实现了首页的各个模块和组件,包括轮播图、商品展示和推荐信息等。
2. 商品详情页设计和实现在设计和实现商品详情页的时候,我注重了页面的布局和结构,保证用户能够清晰地看到商品的详细信息。
通过使用jQuery和Bootstrap,我实现了商品图片的轮播功能、选择商品数量和规格的功能等。
3. 购物车设计和实现在设计和实现购物车的时候,我注重了用户的购物体验和功能的完整性。
web实验报告Web 实验报告一、实验背景随着信息技术的飞速发展,Web 应用在各个领域的作用日益显著。
为了深入了解 Web 技术的工作原理和性能特点,进行了本次 Web 实验。
二、实验目的1、熟悉 Web 开发的基本流程和技术。
2、掌握 HTML、CSS 和 JavaScript 等关键技术的应用。
3、了解 Web 服务器的配置和运行机制。
4、探究 Web 应用的性能优化方法。
三、实验环境1、操作系统:Windows 102、开发工具:Visual Studio Code3、浏览器:Google Chrome4、 Web 服务器:Apache四、实验内容1、 HTML 页面设计使用 HTML 标签构建网页结构,包括标题、段落、列表、图像等元素。
注意 HTML 标签的语义化,以提高网页的可读性和可维护性。
2、 CSS 样式美化运用 CSS 选择器为 HTML 元素设置样式,如字体、颜色、背景、布局等。
采用外部 CSS 文件来实现样式的分离,提高代码的可重用性。
3、 JavaScript 交互实现通过JavaScript 实现网页的动态效果,如按钮点击事件、表单验证、页面滚动效果等。
学习 JavaScript 的基本语法和常用函数,提高编程能力。
4、 Web 服务器配置安装和配置 Apache 服务器,设置虚拟主机和目录权限。
了解服务器的运行日志和错误处理机制。
五、实验步骤1、 HTML 页面设计首先,创建一个新的 HTML 文件,命名为“indexhtml”。
在文件中,使用`<html>`标签作为根标签,`<head>`标签中设置页面的标题和元信息,`<body>`标签中构建页面的内容。
例如,创建一个简单的网页,包含一个标题“我的 Web 实验”,一个段落“这是一个简单的网页示例”,以及一张图片“imagejpg”。
2、 CSS 样式美化创建一个新的 CSS 文件,命名为“stylescss”。
Web编程基础大作业报告学院:计算机学院姓名:学号:主要分以下几个版块:1.主页版块2.登录版块3.注册板块4.个人介绍板块5.分享思维模块6.发现思维模块7.我的思维模块8.搜索模块9.帮助模块摘要:Web引申为“环球网”,而且,在不同的领域,有不同的含义。
对于普通的用户来说,web仅仅只是一种环境——互联网的使用环境、氛围、内容等;而对于网站制作、设计者来说,它是一系列技术的复合总称(包括网站的前台布局、后台程序、美工、数据库领域等等的技术概括性的总称)。
下面是我对web简单的一个应用,利用dreamwave工具,和photoshop软件设计了一个具有个人风格的个人网站,首先我先从网站设计的方向和目的、网站设计中涉及的知识点、网站设计的整个流程出发,然后通过自己设计的这个个人网站作品来说明并演示一个完整的网站制作过程。
本论文详细的介绍了整个网站设计的全过程。
虽然还有一些不足之处,但页面整体比较美观大方,具有个人风格,效果良好。
接下来的步骤是为所要访问的网页,向在那个IP地址工作的服务器发送一个HTTP请求。
在通常情况下,HTML文本、图片和构成该网页的一切其他文件很快会被逐一请求并发送回用户。
网络浏览器接下来的工作是把HTML、CSS和其他接受到的文件所描述的内容,加上图像、链接和其他必须的资源,显示给用户。
这些就构成了你所看到的“网页”。
大多数的网页自身包含有超链接指向其他相关网页,可能还有下载、源文献、定义和其他网络资源。
像这样通过超链接,把有用的相关资源组织在一起的集合,就形成了一个所谓的信息的“网”。
网站规划思想当今社会,靠什么成功?很多成功人士都说过这样一句话:“成功来自百分之八十的人际关系和百分之二十的自身天分和努力。
”据此可以发现,扩大人际关系网是十分重要的一项活动,因此就需要一条联系两方的桥梁,这条桥梁是满载信息的大流量的通道,在这信息时代,于是网络成为了这当之无愧的桥梁。
我设计这个网站的思路就来源于此。
目录一.系统功能说明...................................................................................... 错误!未定义书签。
1.1系统简介 ............................................................................................. 错误!未定义书签。
1.2系统主要功能 .................................................................................... 错误!未定义书签。
1.3系统开发环境 (1)二.系统设计 (1)2.1 系统用例图 (1)2.11读者用例图 (1)2.12作者用例图 (2)2.13 功能模块图 (3)2.14 MVC设计 (4)2.2 界面设计 (6)2.3 数据库设计 (6)2.4主要功能模块 (7)三.关键技术与应用 (7)3.1 HTML5 (7)3.2 JQuery (7)3.3 SpringDAO (9)3.4 Spring MVC (9)3.5 系统实现过程中遇到的错误及其解决方法 (10)四.总结与体会 (10)五.5.1对于系统中采用的新技术的理解与思考 (11)5.2对于系统开发过程的总结与思考 (13)1 系统功能说明1.1 系统简介随着计算机的普遍 ,小说阅读器的流行,网络的发展必将是成为一个趋势,本系统主要是为了阅读小说的方便,将小说集中在一个系统中,不同的权限有不同的功能,阅读书籍。
1.2 系统主要功能阅读小说程序开始后会陆续接受到客户端的请求,当首次请求都直接进入主页,而 不同用户的权限则有后续的登录子系统来确定,主页是所有可以连接到服务器独有 的客户端功能,不区分权限,主页设计有按分类查询,关键字查询以及推荐小说功 能,要查看对应的小说只需要点击相应的链接就进入阅读界面,若需要其他的功能, 则需要对应的权限。
实验报告课程名称:开发技术学院:信息科学与工程学院专业:计算机科学与技术姓名:学号:年月日山东科技大学教务处制实验报告实验报告{;;;;}{;;}<>五、实验体会通过实验掌握了使用创建网站、项目的方法步骤。
可以大大缩减页面代码,提高页面浏览速度;结构清晰,对搜索引擎更加友好,缩短了改版时间,具有强大的自体控制和排版能力。
样式表的冲突的解决方法:(原则:就近原则)1.行级> 内部> 外部2.> 类选择器> 标签选择器3.外部样式表中俄选择器> 内部样式表的标签选择器实验报告组别姓名同组实验者实验项目名称实验日期第周周四、节实验报告实验报告五、实验体会通过本次实验,我知道了控件控件的添加以及使用方法。
实验报告实验报告实验报告五、实验体会嵌套模板可以利用中的窗体母版页来将每个页面中相同的部分进行封装,在创建相同结构的网页时,便可以直接嵌套这个窗体母版页,避免了代码的重复,提高了代码的复用性;另外,如果要修改一个栏目甚至整个网站的风格,则只需修改母版页以及母版页中引入的<>等文件,提高了代码的可维护性,充分体现了的思想。
实验报告组别姓名同组实验者实验项目名称(一)实验日期第周周六、节"\";();();;;"(*) '" "''" "'";(, );(()());();(> ){("");}{"用户名密码输入错误";}}}五、实验体会在和数据库交互,必须连接类。
连接帮助指明数据库服务器、数据库名字、用户名、密码,和连接数据库所需要的其它参数。
对象会被对象使用,这样就能够知道是在哪个数据源上面执行命令。
实验报告组别姓名同组实验者实验项目名称(二)实验日期第周周六、节(, );();"注册成功!";();("");}}();}五、实验体会成功与数据建立连接后,就可以用对象来执行查询、修改、插入、删除等命令;对象常用的方法有()方法、()方法和()方法;插入数据可用()方法来执行插入命令。
web实验报告结论
《Web实验报告结论》
在进行了一系列的Web实验后,我们得出了一些重要的结论。
通过这些实验,我们能够更好地理解Web技术的应用和发展趋势,为未来的Web开发工作提
供了宝贵的参考和指导。
首先,我们发现在Web实验中,响应速度和性能优化是至关重要的。
通过对网站加载速度和响应时间的测试,我们发现了一些影响性能的因素,比如服务器
的带宽、网页的大小和复杂度等。
因此,在进行Web开发时,我们需要注重性能优化,以提高用户体验和满足用户需求。
其次,我们也发现了Web安全性的重要性。
在进行实验时,我们发现了一些常见的Web安全漏洞,比如跨站脚本攻击(XSS)和SQL注入等。
因此,在开发Web应用程序时,我们需要加强安全性措施,比如输入验证、数据加密等,以
保护用户的隐私和数据安全。
此外,我们还发现了Web技术的不断创新和发展。
通过实验,我们了解到了一些新的Web技术和框架,比如响应式设计、单页面应用程序(SPA)等。
这些
新技术为Web开发带来了更多的可能性和挑战,我们需要不断学习和更新知识,以跟上Web技术的发展趋势。
综上所述,通过这些Web实验,我们得出了一些重要的结论:性能优化、安全性和技术创新是Web开发中需要重点关注的方面。
我们将会在未来的工作中,继续努力,不断提升自己的技术水平,为Web应用程序的发展做出更大的贡献。
宁波大红鹰学院信息工程学院网站设计说明书网页名称: VG裸钻网站主页设计专业名称:计算机科学与技术班级名称:计科2班姓名:分享学号: **********完成时间: 2011-6-15网站设计说明书一、网站规划设计说明1、结构设计页面结构相对来说比较简单,采用上中(左、右)下的结构。
上面放了banner,banner的下面是导航条,中间的左边是商品的分类和介绍主要分为了四块,从上到下依次排列公司的最新产品的信息:戒指、吊坠、配链、耳钉等主要产品的相关介绍;右边分为五块:也是上到下依次排列,第一个盒子设了顾客可以自己搜索自己想要的产品;第二到第五个盒子分别放了新款产品,新品推荐,热销产品,特价商品的精美图片。
最下面是footer,设置关于该网页的相关搜索以及版权信息。
2、内容规划(该网站的首页一般是一个静态的页面)⏹页面头部:页面头部包含VG裸钻的LOGO设计以及它最近的一些关于产品的消息;⏹栏目导航:设置了鼠标经过时文字的效果单击可以进入其它各内容页面;⏹具体内容:这是一家钻石的网站首页的设计,本页的具体内容包括公司的最新产品的信息的分类介绍分为:戒指、吊坠、配链、耳钉等主要产品,并且提供了一些相关照片,能让浏览者快速查询找到自己想要找到的信息以及之前的所有产品的信息。
⏹版权声明:版权声明写在页脚,设置关于该网页的相关搜索以及版权信息图表1页脚3、LOGO设计这个网站的LOGO是该品牌的LOGO,我是以图片的形式将其切片。
该LOGO 主要利用了白色,是两个舞动的字母VG体现了产品的华丽和柔美,生动和逼真的设计图样,体现了其产品的精美,为产品加分吸引更多的顾客。
4、技术方案该网页主要用到了css+div的网页布局方式,主要是用Dreamweaver来完成网页的代码的编写和测试,LOGO的设计是采用Photoshop软件的技术,用Fireworks来完成一些图片的切片工作,用IE和Firefox对网页的效果进行测试,最后用Photoshop制作网页的效果图。
Web实验报告课题:网页设计与制作专业:通信工程班级:学号:一.实验任务:设计制作一个《网页设计与制作》精品课程网站二.实验要求:(1)站点目录:要求层次分明,不能将内容都放在站点根目录下;不要使用中文;为每种类型文件都建立一个独立的目录。
(例如images文件夹用于存放图象,目录的层次不能没有,但必须尽量少,以便于管理。
)(2)填写网站设计报告:必须认真填写网站设计报告中的每一项,完成网站结构的设计说明,包括以下各项内容:1) 网站主题:必须围绕一个确定主题创建网站,否则成绩以不及格计。
2) 站点名称:必须为自己的站点命名,名称要紧扣站点主题,并反映在每个网页上。
3) 站点根文件夹:以个人学号及姓名命名。
4)文件与文件夹:网站内使用的图片放在images文件夹中,主页以index.htm命名,其它文件夹自已命名,要以有意义的英文字母来命名,不要使用中文,网页文件也要使用有意义的英文来命名。
5) 站点结构:分类存放网站中的资源,一律以树型目录结构表示并说明文件夹的用途。
6) 站点地图:以结构图方式给出网页的名称和各页面间的超级链接。
7) CSS、行为:说明制作、使用了几个CSS样式,说明CSS样式的名称,为什么内容添加、制作了什么行为。
2. 网站内容要求(3人一组)(1)网站至少要有8个页面,可以使用表格、框架等来进行统一布局。
(2)网站的站标(Logo)使用自已制作的图像,网站名称自已命名,要跟网站的主题一致。
(3)按提供的课件等资料添加链接或下载功能。
(4)每个网页有自己的适当的标题、导航条。
注意:网页标题是指显示在浏览器标题栏上的文字,而不是网页中的段落标题。
每个网页都能够返回上一级页面或首页。
(5)网站中要使用CSS,要使用行为制作动态效果,超链接效果正确无误,要有锚点链接,要有背景音乐,要能够提供文件下载,要有flash动画。
可添加视频文件等。
三.实验内容:该网站设计共使用了9个HTML页面。
web 实验报告Web实验报告一、引言Web实验是计算机科学和信息技术领域中一项重要的实践活动。
通过设计和开发Web应用程序,我们可以深入了解Web技术的原理和应用,提升自己的编程能力和创新思维。
本文将介绍我在Web实验中的经历和收获。
二、实验目标本次Web实验的目标是设计一个在线购物网站。
通过这个实验,我们可以学习和掌握Web开发的基本技术,包括前端开发、后端开发和数据库管理等方面的知识。
同时,我们还能锻炼自己的团队合作能力和解决问题的能力。
三、实验过程1. 需求分析在开始实验之前,我们首先进行了需求分析。
通过与用户的交流和讨论,我们明确了网站的功能和特点。
我们确定了用户注册、商品浏览、购物车管理、订单管理等基本功能,并根据需求进行了详细的功能设计。
2. 前端开发在前端开发过程中,我们使用了HTML、CSS和JavaScript等技术。
我们设计了网站的整体布局和样式,并实现了用户注册、商品展示和购物车等功能的前端界面。
通过这个过程,我们学会了如何使用前端技术创建用户友好的界面,并提高了自己的页面设计能力。
3. 后端开发在后端开发过程中,我们使用了Python和Django等技术。
我们实现了用户注册、商品管理和订单管理等功能的后端逻辑,并与前端进行了数据交互。
通过这个过程,我们学会了如何使用后端技术处理用户请求和管理数据,提高了自己的编程能力和逻辑思维能力。
4. 数据库管理在数据库管理方面,我们使用了MySQL作为我们的数据库系统。
我们设计了数据库的结构和表,并实现了数据的增删改查等操作。
通过这个过程,我们学会了如何使用数据库管理系统存储和管理数据,提高了自己的数据库设计和管理能力。
五、实验总结通过这次Web实验,我不仅学到了很多关于Web开发的知识和技术,还提高了自己的团队合作能力和解决问题的能力。
在实验过程中,我遇到了很多困难和挑战,但通过和同学们的讨论和合作,我成功地解决了这些问题,并完成了实验任务。
web前端实训报告(精选7篇)一、什么是实训报告实训报告是指包含实训目的、实训环境、实训原理、实训过程、实训结果、实训总结等方面内容的书面汇报材料,类似于理科课程的实验报告。
实训报告主要用于加深学员对知识和技能的理解和认识。
实训,即“实习(践)”加“培训”,源自于IT业的管理实践和技术实践;引入到“营销管理”和“商务管理”专业实训,是对现有理论、事实的检验。
二、web前端实训报告(精选7篇)在生活中,报告的使用频率呈上升趋势,不同种类的报告具有不同的用途。
你还在对写报告感到一筹莫展吗?以下是小编精心整理的web前端实训报告(精选7篇),仅供参考,大家一起来看看吧。
web前端实训报告1一、实习目的通过对Java语言、JavaWeb、Oracle数据库应用设计及SQL语言的复习和锻炼,并且通过使用MyEclipse开发平台设计库存管理系统项目,以达到充分熟悉开发平台及其应用设计。
同时掌握并实践软件项目设计规范及其开发流程:需求分析、概要设计、详细设计、代码编写、系统测试及软件手册编写,以便提前适应软件公司开发流程、环境和工作要求二、实习内容1、公司管理规则,程序员素质,程序员编码规范;2、需求开发与管理;3、面向对象分析与设计,面向对象编程的特性;4、javaSE、javaWeb5、数据库设计、SQL应用6、软件需求分析与设计7、项目实战三、实习总结通过这一期的实训,虽然倍感折磨,但是收获却很大的,学习中我不但有了学习成果的喜悦,而且自己也日渐成熟,有种说不出的喜悦。
当我们正式准备学习实训java编程技术时,让我倍感兴奋,虽然以前大学学的是.Net方向,但毕竟Java是自己以后想主攻的技术,所以自然也就非常的亢奋。
感觉肩上责任之重大,那一刻起,我就决心带领我们小组,奋战我们的实训路。
当然开始学习后也并非是想象中那样顺利,开始的学习让我异常感到学习任务的艰巨,因为学习中我们遇到了很多以前未曾遇到的难点,有时难免冥思苦想也无济于事,通过我们小组的积极努力协作,同时请教老师和其他同学,我们顺利的化解了一道道的障碍。
宁波大红鹰学院信息工程学院网站设计说明书网页名称: VG裸钻网站主页设计专业名称:计算机科学与技术班级名称:计科2班姓名:分享学号: 07完成时间: 2011-6-15网站设计说明书一、网站规划设计说明1、结构设计页面结构相对来说比较简单,采用上中(左、右)下的结构。
上面放了banner,banner的下面是导航条,中间的左边是商品的分类和介绍主要分为了四块,从上到下依次排列公司的最新产品的信息:戒指、吊坠、配链、耳钉等主要产品的相关介绍;右边分为五块:也是上到下依次排列,第一个盒子设了顾客可以自己搜索自己想要的产品;第二到第五个盒子分别放了新款产品,新品推荐,热销产品,特价商品的精美图片。
最下面是footer,设置关于该网页的相关搜索以及版权信息。
2、内容规划(该网站的首页一般是一个静态的页面)页面头部:页面头部包含VG裸钻的LOGO设计以及它最近的一些关于产品的消息;栏目导航:设置了鼠标经过时文字的效果单击可以进入其它各内容页面;具体内容:这是一家钻石的网站首页的设计,本页的具体内容包括公司的最新产品的信息的分类介绍分为:戒指、吊坠、配链、耳钉等主要产品,并且提供了一些相关照片,能让浏览者快速查询找到自己想要找到的信息以及之前的所有产品的信息。
版权声明:版权声明写在页脚,设置关于该网页的相关搜索以及版权信息图表 1页脚3、LOGO设计这个网站的LOGO是该品牌的LOGO,我是以图片的形式将其切片。
该LOGO 主要利用了白色,是两个舞动的字母VG体现了产品的华丽和柔美,生动和逼真的设计图样,体现了其产品的精美,为产品加分吸引更多的顾客。
4、技术方案该网页主要用到了css+div的网页布局方式,主要是用Dreamweaver来完成网页的代码的编写和测试,LOGO的设计是采用Photoshop软件的技术,用Fireworks来完成一些图片的切片工作,用IE和Firefox对网页的效果进行测试,最后用Photoshop制作网页的效果图。
在编写代码的过程中还用到了JavaScript的语言。
二、网站色彩说明1、网站主色调该网站的主色彩是绿色和淡蓝色,,网页文字为淡蓝色,导航色为淡绿色导航文字为白色如下图所示:图表 2 网站主色调绿色是一种非常具有亲和力的颜色,它代表的是自然、生命、活力与健康,是使用比较广泛的颜色之一。
蓝色和白色的运用使得整个网页显得很舒服和平和,同时背景色显得产品的图片更加的鲜艳、漂亮。
2、网页链接色表格 1 网页文字表格 2导航文字颜色三、HTML页面结构图图表 3 整个网页结构四、页面DIV结构代码<div id="container"><div id="globallink"></div><div id="parameter"><div id="fenlei"></div><div id="lstatistics"> </div><div id="lhotblog"> </div><div id="lrecent"></div><div id="lapply"></div></div><div id="mainsupport"><div id="logoin"></div><div id="demo"><div id="indemo"><div id="demo1"></div><div id="demo2"></div></div></div><div id="recommend"></div><div id="new"></div><div id="tips"></div></div><div id="footer"></div></div>五、CSS代码及注释1. JS代码<script><!--var speed=10;var tab=("demo");var tab1=("demo1");var tab2=("demo2");=;function Marquee(){if MyMar=setInterval(Marquee,speed);=function() {clearInterval(MyMar)};=function() {MyMar=setInterval(Marquee,speed)}; --></script>2. css代码及代码</div><style type="text/css">*{ padding:0px; margin:0px;}body{background-color:#ebf7ff;font-size:12px;margin: 0px;padding:0px;text-align:center;}#container{ /* 宽度固定且居中的版式 */ position:relative;margin:1px auto 0px auto;width:850px;text-align:left;}#globallink{width:800px;height:200px;margin:0px;background-image:url(img/; /* banner图片 */background-repeat:no-repeat;font-size:18px;padding-bottom:25px;}#globallink ul{list-style-type:none;position:absolute; /* 绝对定位 */display:inline;width:800px;top:200px;padding:0px; margin:0px;background-color:#00FFFF;}#globallink li{float:left; /* 左浮动 */text-align:center;padding-top:10px;}#globallink ul li#one{width:100px;}#globallink ul li#two{width:150px;}#globallink a:link, #globallink a:visited{color:#FFFFFF;text-decoration:none;}#globallink a:hover{color:#000000;text-decoration:none;}#parameter{position:relative;margin:10px 0px 0 0px;float:left;font-size:12px;width:200px;padding-right:10px;color:#FF99CC;}#parameter div{border:2px solid #00FFFF;}#parameter br{clear:both;display:none;}#parameter h3 span{display:none;}#parameter h3{height:30px; width:90px;padding:0px; margin:0px;}#parameter a:link{color:#2a788e;text-decoration:none;}#parameter a:visited{color:#FF99CC;text-decoration:none;}#parameter a:hover{color:#FF99CC;text-decoration:none;}#lstatistics span a,#lhotblog span a, #lrecent span a, #lapply span a{ float:left;text-align:left;padding-top:5px;padding-right:5px;margin-bottom:5px;}#fenlei{ height:25px;left:1px;top:2px; }#fenlei h3{background:url(img/ no-repeat; /* 用背景图片代替标题 */ position:absolute;left:1px;top:2px; }#lstatistics h3{background:url(img/ no-repeat;}#lhotblog h3{background:url(img/ no-repeat;}#lrecent h3{background:url(img/ no-repeat;}#lapply h3{background:url(img/ no-repeat;}#lstatistics, #lhotblog, #lrecent, #lapply{position:relative;clear:both;}#lstatistics ul, #lhotblog ul, #lrecent ul, #lapply ul{list-style-type:none; /* 统一不显示项目符号 */ padding:10px 0px 0px 0px;margin:0px;}#lstatistics li{border-bottom:1px dashed #CCCCCC;text-align:left;padding-left:30px;font-size:14px;line-height:25px;background:url(img/ no-repeat 7px 4px;}#lhotblog li{border-bottom:1px dashed #CCCCCC;text-align:left;padding-left:30px;font-size:14px;line-height:25px;background:url(img/ no-repeat 7px 4px;} /* 背景小图片作为项目符号 */ #lrecent li, #lapply li{border-bottom:1px dashed #CCCCCC;text-align:left;padding-left:30px;font-size:14px;line-height:25px;background:url(img/ no-repeat 7px 6px;}#mainsupport{width:590px;float:left;position:relative;font-size:12px;margin:0px;}#mainsupport div{border:1px solid #00FFFF;}#mainsupport h3 span{display:none;}#mainsupport h3{ width:230px;height:31px;}#mainsupport li a:link{color:#2a788e;font-size:12px;text-decoration:none;}#mainsupport li a:visited{font-size:12px;text-decoration:none;}#mainsupport li a:hover{color:#FF99CC;font-size:12px;text-decoration:none;} form{padding:0px;margin:0px;}input{margin:0px;}#logoin{clear:both;margin-bottom:2px;position:absolute;left:0px;top:260px;height:30px;width:588px;background-color:#d1ebff;top:10px;}#logoin ul#per{margin:0px;padding-left:0px;padding-top:3px;list-style-type:none;text-align:left;}#logoin ul#per li{float:left;line-height:23px;padding-left:15px;padding-top:3px;margin:0px;}#logoin #per input{background-color:#FFFFFF;border:1px solid #226c81;color:#226c81;font-size:12px;height:15px;padding:0px;}#logoin #per1 ,#logoin #per2 { background-color:#FFFFFF;border:1px solid #226c81;font-size:12px;height:14px;padding:0px;width:110px;}#logoin {display:none;clear:both;}#recommend br,#new br,#tips br{display:block;clear:both;margin:0px;padding:0px;}#recommend ul,#new ul,#tips ul{list-style:none;margin::0px;}#recommend ul li,#new ul li,#tips ul li{padding-left:20px;text-align:center;float:left;width:170px;}#recommend ul li img,#new ul li img,#tips ul li img{border:4px solid #ccc;margin:5px 0px 3px 0px;padding:0px;}#recommend ul li a:link,#recommend ul li a:visited,#new ul li a:link,#new ul li a:visited,#tips ul li a:link,#tips ul li a:visited{color:666666;text-decoration:none;}#recommend ul li a:hover,#new ul li a:hover,,#tips ul li a:hover{color:#000000;text-decoration:underline;}#demo1 h3{height:32px; width:590px;padding:0px; margin:0px;}#mainsupport #recommend h3{background:url(img/ no-repeat;}#mainsupport #new h3{background:url(img/ no-repeat;}#mainsupport #tips h3{background:url(img/ no-repeat;}#recommend, #new,#tips{position:relative;}#footer{width:800px;clear:both; /* 不受浮动影响 */font-size:12px;text-align:center;color:#226c81;padding-bottom:20px;margin:0px;padding-top:20px;background-color:#ebf7ff;}#footer p{margin:0px;padding-top:10px;background-color:#ebf7ff;}#footer a:link{color:#006480;font-size:12px;text-decoration:none;}#footer a:visited{color:#006480;font-size:12px;text-decoration:none;}#footer a:hover{color:#000000;font-size:12px;text-decoration:none;}#demo {background: #FFF;overflow:hidden;border: 1px dashed #CCC;width: 590px;}#demo img {border: 3px solid #F2F2F2;}#indemo {border: 1px dashed #CCC;float: left;width: 800%;}#demo1 {float: left;}#demo2 {float: left;}六、页面测试结果(要求:页面在FF及以上任一版本下测试结果,贴图完成) 1、下测试结果2、FF下测试结果七、心得体会(要求:必须要有内容,可以是学习总结,可以是体会,可以是技术知识总结,也可以是经验总结等,不少于500字)第一次做蓝色经典的时候老师带着我们一起做,给了我们网页文字材料和切好的图片并教我们如何处理盒子与盒子之间的位置,带着我们做css。