网页设计_期末报告
网页设计期末实训总结报告
一、引言随着互联网的飞速发展，网页设计已成为一种热门的职业技能。
为了提升自己的网页设计能力，我参加了本学期的网页设计期末实训。
通过这次实训，我对网页设计有了更深入的了解，掌握了更多的设计技巧，同时也发现了自身的不足。
以下是我在实训过程中的总结与反思。
二、实训目标与内容1. 实训目标通过本次实训，我期望达到以下目标：（1）掌握网页设计的基本流程和规范；（2）熟悉常用的网页设计软件，如Photoshop、Dreamweaver等；（3）提高网页设计审美能力，培养良好的设计思维；（4）提升网页前端开发技能，实现网页功能与美观的统一。
2. 实训内容（1）网页设计理论：了解网页设计的基本概念、原则、发展趋势等；（2）网页设计软件：学习Photoshop、Dreamweaver等软件的使用方法；（3）网页布局与排版：掌握网页布局技巧，提高网页视觉效果；（4）网页设计实战：完成个人网页设计与开发，实现实训目标。
三、实训过程与收获1. 理论学习在实训初期，我重点学习了网页设计的相关理论知识。
通过阅读教材、上网查找资料等方式，我对网页设计有了更全面的认识。
同时，我还关注了网页设计领域的最新动态，以便在实训过程中紧跟时代步伐。
2. 软件学习实训过程中，我学习了Photoshop、Dreamweaver等软件的使用。
通过反复练习，我掌握了软件的基本操作，能够熟练运用这些工具进行网页设计。
3. 实战演练在实战环节，我按照实训要求，完成了个人网页的设计与开发。
在构思网页主题、收集素材、设计布局、编写代码等过程中，我遇到了许多问题，但通过查阅资料、请教老师和同学，我逐渐克服了困难。
4. 收获与反思（1）提高网页设计能力：通过本次实训，我掌握了网页设计的基本流程和规范，学会了运用设计软件进行网页设计，提高了自己的审美能力和设计思维。
（2）增强团队协作意识：在实训过程中，我与同学们相互交流、共同进步，学会了在团队中发挥自己的优势，为团队的整体发展贡献力量。
网页设计学生期末总结
网页设计学生期末总结一、前言本学期，我在网页设计课程中学到了很多知识和技能。
通过学习，我对网页设计有了更深入的了解，并在实践中提高了自己的设计能力。
在这篇期末总结中，我将回顾我本学期的学习经历和成果，并对自己的学习进行归纳和总结。
二、学习经历和成果1. 学习经历在本学期的网页设计课程中，我学习了网页设计的基本概念、原则和技巧。
我学习了HTML、CSS和JavaScript等前端开发技术，了解了网页设计的整个流程和各个环节。
在课程中，我通过理论学习和实践操作相结合的方式，掌握了网页设计的基本知识和技能。
在课堂上，教师为我们介绍了许多经典的网页设计案例，并对这些案例进行了分析和讨论。
通过学习这些案例，我对于什么样的网页设计能够引起用户的兴趣，以及如何设计一个用户友好的网页有了更深入的认识。
此外，我还学习了网页设计相关的软件和工具的使用，如Adobe Photoshop、Adobe Illustrator、Sublime Text等。
这些工具为我们进行网页设计提供了很大的便利，并且在实践中能够更好地应用课堂上所学的知识。
2. 学习成果在本学期的网页设计课程中，我完成了多个网页设计项目，并且在实践中提高了自己的设计能力。
以下是我完成的一些项目和具体成果：- 项目一：个人简历网页我设计了一个个人简历网页，展示了我的个人信息、教育背景、工作经历等。
通过设计这个网页，我学会了如何设计一个简洁、清晰的网页布局，并且把自己的信息以合适的方式呈现给用户。
- 项目二：产品展示网页在这个项目中，我设计了一个产品展示网页，展示了一款手表的特点和功能。
通过这个项目，我学会了如何设计一个吸引人的产品展示页面，并且使用HTML、CSS和JavaScript等技术为产品添加动态效果，提升用户体验。
- 项目三：响应式网页设计在这个项目中，我学习了如何设计一个响应式网页。
我通过使用媒体查询技术和流式布局，使得网页能够适应不同的屏幕大小和设备类型，并且保持良好的用户体验。
网页设计与制作期末设计报告
网页设计与制作---个人网站设计报告指导老师：盛加林学号：20082809姓名：杜才伟班级：信管0802一．概述随着网络技术的迅速发展，网络应用越来越趋于平凡化，无论是企业还是其他组织机构或者是个人，都希望利用计算机网络技术开发对自己有价值的东西。
关于个人网站，现在越来越多的人通过个人网站记录自己的故事，与朋友分享生活的点滴，同时还可以通过个人网站广交朋友。
本次的个人网站设计是网页设计与制作的期末检测，同时也是对自己学习的检验。
本次设计运用平台是windows，运用的工具是Macromedia Dreamweaver 8，主要语言是html语言和javascript，样式设计采用的是css样式。
在个人网站的设计中，我采用了通常iframe网页框架，风格源于自己浏览其他网站的灵感，网页flash的设计借鉴了网上优秀flash动画，首页还采用了网页音乐播放器控件。
照片的处理用到了photoshop和Macromedia Fireworks 8。
二．设计结构图三．设计主题岁月如梭，年华似水。
默默流逝的青春给我们每个人留下了不同的回忆，我的个人空间的设计主要是记录大学生活。
有学校的剪影，有寝室的合影……每一张记录都是未来的我最美好的回忆。
设计的主要以怀念为主题。
曾经的那些花儿，曾经的那些故事都是生命里美的转弯。
四．模块介绍（一）、首页介绍首页是个人网站的入口，大概的设计框架是头是一个部分、头以下分为左右两个部分。
头部如下图：导航条：导航条主要是“我们的故事”、“相册”、“关于我”三个模块的超链接点击三个连接即可跳转到不同页面。
头部以下部分：这部分的设计主要有图片处理、文字从下往上滚动、音乐播放器、时钟的设计、flash设计(二)、我们的故事我们的故事主要是文字描述，整体样式如下：这个部分主要是记录一些故事，每一段故事中都会存在一些悲伤的插曲，背景漂浮的flash 动画加上背景音乐，还有略带伤感的文字，整体呈现淡淡的伤感而又不失积极向上。
网页设计期末作业报告
网页设计期末作业报告一学期的网页设计课结束了，回顾这次期末作业的完成过程，主要分为以下几个阶段。
【确定主题】这次的作业没有对主题和内容进行限制，因此我选择了一部自己感兴趣的动漫作为这次网页设计期末作业的主题。
选择这样一个主题不仅能提高我在制作过程中的兴致，也更容易在网络上搜索到相关的图片与文字资源。
【构思布局】由于我对曾经做过的数码商城印象深刻，因此我决定参考那张网页的布局，最后我基于其header、banner和menu的格式将网站的头部先做了出来。
经过对现有素材的观察与思考，我将网站的色调确定为黑色调。
至于首页的主体部分，我决定使用左右各一个div的方式，将其分割，末端使用与menu相同的样式作为页脚。
【难点回顾】在制作banner的时候我遇到了第一个难点，就是logo经过绘图压缩之后颜色与我所找的背景图片不合，以及搜索按钮的“剑”的底色是白色，因此用了许多时间PS抠图，然而文字部分的细节没有处理干净，但是整体的色调还算和谐。
第二个难点是我想要让主体部分的图片呈现选项条的效果，百度了许多方法，最后使用css样式的一种方法，结果图片在hover状态会上移，尝试了许多次没有解决这个问题，为了网页的整体美观只能遗憾地放弃了这个功能。
第三个难点则是图片的排列混乱，最后将两个图片放在同一ul里解决了这个问题。
【总结感想】限于时间和能力，这个网页还很不完善，大部分链接为“摆设”，对于一个真正的网站来说，还需要实现搜索、留言等功能，但是我也从这次网页制作学到了平时很难学到的东西。
这学期的课程有很多时候是由老师带领着我们制作网页，而且有一个明确的目标，但是自己制作网页时，“目标是什么”这个问题往往会先将我难住，以及平时可能觉得挺熟悉的东西实现起来也并不是很顺手。
经过这一学期的学习，尽管最终的作品有许多不尽人意之处，但我确实地感觉到了这门课程的学习是有价值的，希望能在以后的学习和工作中与这次所学相逢！部分网页预览图。
网页期末总结报告
网页期末总结报告一、引言在过去的学期里，我在网页设计与制作课程中学到了很多知识和技能。
通过实践、学习和反思，我对网页设计的过程和原理有了更深入的了解，也掌握了一定的设计和制作技巧。
本文将对我在这门课程中的学习、实践和收获进行总结和反思。
二、学习内容与方法在这门课程中，我们学习了网页设计的基本原理和技巧。
首先，我们学习了HTML和CSS的基础知识，包括标签的语义和用法、盒模型、选择器和样式等。
然后，我们学习了响应式设计的原理和实现方法，包括媒体查询和弹性布局。
最后，我们学习了JavaScript的基础知识，包括变量、函数、条件语句、循环和DOM操作等。
在课程中，老师讲授了相关知识，并通过案例演示和实践操作进行了讲解。
我在学习过程中采取了以下方法来巩固和提升自己的学习效果。
首先，我仔细听讲，做好笔记并及时复习，确保对老师讲解的内容有所理解和记忆。
其次，我积极参与课堂讨论和实践练习，提出问题和解决问题，加深了对知识的理解和应用。
最后，我进行了大量的练习和实践，通过模仿和改进他人的作品，提升了自己的设计和制作能力。
三、实践作业与项目在这门课程中，我们进行了多次实践作业和项目，通过设计和制作网页来巩固、应用和扩展所学的知识和技能。
以下是我完成的一些实践作业和项目：1. 个人简历网页这是我在课程中的第一个实践作业，通过这个作业，我巩固了HTML和CSS的基础知识，学会了如何设计和制作一个简洁、美观且具有良好用户体验的网页。
我利用HTML标签和CSS样式实现了网页的结构、布局和样式，并通过嵌套和盒模型控制了网页元素的位置和样式，最终制作出了一个符合个人简历要求的网页。
2. 响应式网页在学习了响应式设计的原理和方法后，我们进行了一个响应式网页的实践项目。
通过这个项目，我学会了如何使用媒体查询和弹性布局创建一个适应不同屏幕尺寸和设备的网页。
我通过媒体查询设置了不同的CSS样式，使得网页在不同屏幕尺寸下能够自适应地调整布局和样式。
优秀网页制作期末总结
优秀网页制作期末总结一、引言本学期，我选修了网页制作课程。
通过这门课程的学习，我深入了解了网页设计的基本原理和技术，熟练掌握了常用的网页制作工具和软件，提升了自己的网页设计和制作能力。
下面我将对本学期所学内容进行总结和反思。
二、学习内容在本学期的网页制作课程中，我学习了以下内容：1. HTML和CSS基础知识：学习了HTML标签的使用方法、网页结构的创建和布局，以及CSS样式的定义和应用。
通过实践项目，我对HTML和CSS的基本语法和规则有了更深入的理解和掌握。
2. 响应式网页设计：学习了如何使用媒体查询和流式布局技术，使网页能够在不同的设备和屏幕尺寸下适应并呈现最佳效果。
我了解了响应式网页设计的重要性和基本原理。
3. JavaScript基础知识：学习了JavaScript语言的基本语法和常用的DOM操作。
通过实践项目，我学会了如何使用JavaScript来实现网页的动态效果和交互功能。
4. 图片和多媒体元素的添加：学习了如何在网页中添加和优化图片、视频和音频等多媒体元素。
我了解了如何选择合适的图片格式、压缩图片大小，以及如何通过视频和音频元素来提升网页的用户体验。
5. 网页性能优化：学习了如何通过合理的网页结构、优化图片和脚本等方式来提高网页的加载速度和性能。
我掌握了一些网页性能优化的基本技巧和工具。
三、学习成果在本学期的学习中，我取得了以下成果：1. 完成了多个实践项目：我通过实践项目来巩固和应用所学的知识。
其中，我设计并制作了个人信息网页、产品展示网页和响应式企业网站等。
通过这些项目，我学会了如何将理论应用到实践中，并且不断提升自己的设计和制作能力。
2. 提高了网页设计和布局能力：通过学习HTML和CSS，我对网页的结构和布局有了更深入的理解和掌握。
我学会了如何使用盒模型、定位与浮动等技术来实现各种网页效果。
3. 掌握了JavaScript的基本应用：虽然JavaScript的学习过程中遇到了一些困难，但通过仔细学习和不断实践，我终于能够使用JavaScript来实现网页的各种动态效果和交互功能。
网页设计期末报告
网页设计期末报告网页设计期末报告经过一个学期的学习和实践，我对网页设计有了更深入的理解和掌握。
在这个期末报告中，我将总结我在网页设计方面的学习和经验，并介绍我设计的一个网页的具体过程和效果。
首先，我学习了网页设计的基本原理和技巧。
我了解了网页的结构和布局，学会了使用HTML和CSS来进行网页的设计和排版。
我还学习了响应式设计的原理和方法，以及一些网页设计的最佳实践。
在学习的过程中，我通过观察和分析各种优秀的网页设计，提高了自己的审美能力和设计能力。
在实践中，我设计了一个个人博客的网页。
首先，我对个人博客的需求进行了分析和调研，确定了设计的目标和主题。
然后，我开始进行网页的结构设计和布局设计。
我使用了HTML来定义网页的结构，并利用CSS来进行网页的排版和样式设计。
我注重网页的整体性和一致性，使得网页的各个部分有机地相互联系，并使用合适的字体、颜色和图片来增强网页的视觉效果。
在设计的过程中，我还注意了网页的用户体验。
我通过进行用户调研和界面设计，确保网页的导航清晰、操作简单、内容丰富。
我还添加了一些交互元素，如按钮、链接和表单，以增加用户的参与和反馈。
通过不断的测试和改进，我提高了网页的用户可用性和易用性。
最后，我评估了我的网页设计的效果。
我邀请了一些用户进行测试和反馈，收集了他们对网页设计的意见和建议。
根据他们的反馈，我进行了一些改进和调整，提高了网页设计的质量和用户满意度。
我还利用网页分析工具来进行数据分析和流量统计，了解用户的浏览习惯和偏好，为网页的优化提供依据。
通过这个网页设计的实践，我对网页设计的理论和实践有了更深入的了解和认识。
我不仅提高了自己的设计能力和技巧，还学会了团队合作和项目管理。
我相信在将来的工作和学习中，这些经验和技能将会对我有很大的帮助。
在结束的时候，我希望能够继续学习和探索网页设计的更多知识和技术，不断提高自己的设计水平和创造力。
我相信通过不断地学习和实践，我会成为一个优秀的网页设计师，为用户创造更好的网页体验。
html网页设计期末总结
html网页设计期末总结一、引言本次HTML网页设计期末课程为期十周，主要是学习并实践了HTML（Hypertext Markup Language）的基本知识和技能，通过实际的项目设计和开发，加深了对HTML的理解和应用。
在这十周的学习中，我收获了很多，在此总结一下我的学习心得和体会。
二、理论知识学习在这门课程中，我们首先学习了HTML的基础知识，包括HTML标签、元素、属性等的基本使用方法。
通过学习这些基础知识，我了解了HTML的结构和语法规则，能够正确地编写HTML代码。
同时，我们还学习了HTML5的一些新特性，例如语义化标签、音频视频标签等。
这些新特性使得HTML的应用更加丰富多样。
除了HTML的基础知识外，我们还学习了CSS（Cascading Style Sheets）的基本知识。
CSS 是用来控制网页样式的语言，通过学习CSS，我们可以给网页添加各种样式效果，如背景颜色、字体大小、边框样式等。
在学习CSS的过程中，我们学习了选择器、属性和值的使用方法，掌握了CSS样式表的编写和应用。
三、实践项目设计和开发在课程的后期，我们进行了实践项目的设计和开发。
这个项目是一个个人网页的设计和开发，通过这个项目，我能够将之前学到的HTML和CSS知识应用到实际中，加深对这些知识的理解和掌握。
在项目设计的过程中，我首先进行了需求分析，确定了网页的主题和功能。
然后，我设计了网页的整体结构和布局，选择了适合的颜色和字体。
接下来，我编写了HTML代码，包括各种标签和元素的使用，并添加了适当的属性和数值。
在编写HTML的同时，我使用CSS进行样式设计，为网页添加了多种样式效果，使其更加美观和易读。
最后，我进行了测试和调试，确保网页能够在不同的浏览器和设备上正确显示。
整个项目的设计和开发过程让我对HTML和CSS的应用有了更深入的了解。
通过实际练习，我巩固了之前学到的理论知识，提高了自己的实际操作能力。
同时，我也遇到了一些问题和挑战，在解决问题的过程中，我不断学习和积累经验，提高了自己的解决问题的能力。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2014-2015学年上学期《网页设计》课程期末大作业说明1.题目：*****网站设计与实现（根据学期初自已的选题确定）其中应包含以下内容：(1)网站设计概述⏹需要掌握的基本技术及它们的作用⏹平台的搭建和开发工具的选择⏹你的设计目标：解释你设计的主题和目标(2)典型网站设计分析及学习⏹以期中作业为基础，分析经典网站的设计⏹强调两点：文档标记的标准化与格式化，布局方式⏹从中你学到了什么？文件的组织结构、图片的大小、命名等，请自己思考展开(3)设计与实现⏹完成你自己的设计⏹整体布局思路：流式布局或固定布局？布局采用什么技术？⏹包含适当的代码及截图⏹代码请保持良好的格式⏹页面中的支撑文本可以任取样本文字(4)总结⏹从这门课你学到了什么？⏹还有什么需要在今后的学习中加以拓展？⏹WEB上的一些新的发展趋势，如HTML5你如何看？2.请提交：(1)设计报告（A4纸打印）⏹word文档⏹格式和基本内容要求（见附件1）(2)电子文件（以下文件压缩打包，以“学号_姓名”方式命名）⏹HTML文档：index.html⏹CSS文件：final.css⏹图片文件夹img：⏹设计报告的电子版：学号_姓名.doc3.提交时间和方式：(1)完成时间表：⏹2015年1月8日：提交最后完成的版本(2)地点：⏹上课地点4.附件：报告格式《网页设计》期末课程设计报告题目：灵异世界网站姓名：许蕾学号：12990255日期：2014年12月30日摘要请解释在这门课程的学习过程中，你学到了哪些知识？以及如何运用这些知识，来进行设计与实现的。
随着大三上学期正式的开始，抱着懵懂的心态，选择了网页设计与制作这门课程，曾记得第一节的课的时候，老师让每一位同学提一个问题，上完第一节课似乎我应该大概明白我们这学期学习网站关于哪方面的知识，接下来，在听完老师讲课的基础上，自己学习w3Cschool在线学习网站上关于html标记语言和css样式方面的教程。
对此感觉这学期更加明白了网站标记与设计方面的理解，也增添了我对于网站学习的热情。
本学期学习到的知识有：1.简单的html标记；例如<p></p>; <h1></h1>; <pre></pre>;<frameset></frameset>;等等方面的标签，利用这些标签基本上可以实现了一些网页上的基本功能，对于他们分别的属性也有所了了解，在设计你网页的时候，应用的更加得心应手。
2.布局方式上从原有的知识结构中只能用表格来规划整个网页的思想中解脱出来，了解了关于div标签的浮动布局，“层”的应用，使整个网页布局显得不那么呆板，而是更加的灵活。
因此受益匪浅啊。
3.css样式基于对于css样式的初步了解，使我在网页设计上减少了很多不必要时间的浪费，而且很多功能实现起来比以前的方式更加的方便与灵活。
但是关于css样式只是处于基本的了解层面，更多的知识，我想我以后会在仔细的钻研。
你最初的目标是设计一个***类型的网站，以此为目标，你做了哪些工作？最终是否完成了既定目标？我最初的目标是设计一个关于灵异世界方面的网站，以此为目标，我首先展开了对于灵异世界方面知识的收集，刚开始的时候是想按照自己的想法来设计的，后来觉得应该先有模仿，再有创新。
因此接下来开始收集各种关于灵异世界网站，研究他们采用的布局和样式，在此期间，遇到了很多的问题，由于对网页代码，以及动态网站的了解是一片空白，因此在研究的时候真是白爪挠心，非常的痛苦，后来恍然大悟，学术这个东西是需要时间来慢慢研究的，不能急于求成，因此对此暂且放弃。
开始着重关注css样式和页面设计这方面的东西，根据老师的推荐——禅意花园，在这个很好的学习css样式的网站中遨游，最终做出了自己还是比较满意的网站了吧。
目录1. 网站设计概述 4 页2. 典型网站设计分析与学习5页3. 设计与实现 6 页4. 总结11 页1. 网站设计概述在大一的时候，我们已经初步接触网页设计，在那个时候只是单纯的介绍了一下关于html语言一些知识，知识能够将网页的大体布局格式，各种各样的标签和表格，基本都可以表示出来，后来通过学习一些简单的代码，基本上可以简单的实现一下走马灯等效果，而这一切，全都是静态网页的设计，而且并不是很美观，这个学期大致对于网页的设计又有些了解，例如将页面的美化，这就让我们受益匪浅，使我们设计网页设计的时候得心应手，锦上添花。
关于网站设计，我觉得我暂时还没有太多的发言权，但是可以简单的说一下我对于网站设计的一些看法。
网站设计的首要问题就是网页的整体的布局，从刚开始的table（就是所谓的表格布局），到现如今层，浮动布局，css样式的美化，使我们的布局更加多种多样，实现的效果更加的丰富多彩。
下面我阐述一下，我在翻阅《dreamweaver》时的一些关于网页设计的见解。
在具体的制作一个网页时我了解到一个优秀的网页设计应该具备一些基本原则。
首先，要确定网页设计的内容，一个优秀的网站要有一个明确的主题。
整个网站围绕这个主题，也就是你在网页设计之前要明确你这个网站有什么目的，用什么来做，所有的页面都是围绕着这个内容来制作，有了明确的内容对排版有很重要的作用；其次要了解你网站所在行业的客户，及你的网页属于哪个类别。
用户是一个网站成败的关键，如果用户花很多时间进入你的网站很有可能用户会立即关掉你的网站，或者你网站操作很不方便用户也会，马上离开，这种网站是很失败的设计，只会让用户失望的离去。
在完成以上的基本内容之后网页的基本框架便成形了。
下面要开始的便是网页的美化工作。
内容是整个网页的核心。
在网页设计之前必须明确网页的内容安排。
优秀的网页设计是要建立在平凡的基础上的，然后再具体的规划一个网页时，可以用树状结构先把每个页面的内容大纲列出来，尤其要制作一个大的网站（有很多页面的）时候，特别需要把这个架构回话好，也要考虑到以后可能的扩充性，免得做好以后又要一改再改整个网站的架构，很浪费时间和财力。
大纲列出来后，还必须考虑每个页面之间的链接关系，是星形，树形，或者是网形链接。
这也是判别一个网站优劣的重要标志。
链接混乱，层次不清的站点会造成浏览困难，影响内容的发挥。
框架定下来了，然后开始一步步有条理，有次序地做来，就胸有成竹得多，也会为主页将来发展打下良好的基础。
下一步，就以动手制作具体的内容了，题材选定，接下来就开始往主页里面填内容。
这样网站的搭建就会慢慢实现回来。
2. 典型网站设计分析与学习对你选择的一个或多个网站进行逆向分析及学习，以期中作业为基础。
从中你学到了什么？从中我学习到了css样式怎么样设计，怎么样布局。
参考这个网站我做出了自己的网站。
3. 设计与实现你的设计与实现：通过代码、截图、文字等多种方式加以表述。
这是我的css样式：/*Credit: #*/body {margin: 0px;padding: 0px;color: #a2979e;font-family: Georgia, "Times New Roman", Times, serif;font-size: 12px;line-height: 1.5em;background-color: #0f020b;background-image: url(images/templatemo_body.psd);background-repeat: no-repeat;background-position: top}a, a:link, a:visited { color: #ff58ff; text-decoration: none; }a:hover { text-decoration: underline; }p { margin: 0 0 15px 0; padding: 0; }img { border: none; }h1, h2, h3, h4, h5, h6 { color: #fff; }h1 { font-size: 30px; font-weight: normal; margin: 0 0 20px 0; padding: 5px 0; }h2 { font-size: 28px; font-weight: normal; padding-bottom: 20px; margin: 0 0 30px 0; font-weight: normal; background: url(images/templatemo_divider.png) bottom repeat-x }h3 { font-size: 24px; margin: 0 0 30px 0; padding: 0; padding: 0; font-weight: normal; }h4 { font-size: 16px; margin: 0 0 30px 0; padding: 0; }h5 { font-size: 12px; margin: 0 0 10px 0; padding: 0; }.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }.cleaner_h10 { clear: both; width:100%; height: 10px; }.cleaner_h20 { clear: both; width:100%; height: 20px; }.cleaner_h30 { clear: both; width:100%; height: 30px; }.cleaner_h40 { clear: both; width:100%; height: 40px; }.cleaner_h50 { clear: both; width:100%; height: 50px; }.cleaner_h60 { clear: both; width:100%; height: 60px; }.float_l { float: left; }.float_r { float: right; }.image_wrapper { display: inline-block; border: 1px solid #2f2824; padding: 9px; margin-bottom: 10px; background: #000000 }.image_fl { float: left; margin: 3px 20px 0 0 }.image_fr { float: right; margin: 3px 0 0 20px }blockquote { font-style: italic; margin: 0 0 0 10px;}cite { font-weight: bold; color:#fff; }cite a, cite a:link, cite a:visited { font-weight: normal; color:#fff; }cite span { font-weight: 400; color: #ccc; }em { color: #fff; }.tmo_list { margin: 10px 0 10px 10px; padding: 0; list-style: none; }.tmo_list li { background: transparent url(images/templatemo_list.png) no-repeat; margin:0 0 20px; padding: 0 0 0 25px; line-height: 1em; } .tmo_list li a { color: #ff58ff; }.tmo_list li a:hover { color: #fff; }.post_box { clear: both; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px dotted #999999 }.post_header { border-top: 3px solid #999; border-bottom: 1px solid #ccc; padding: 5px; margin-bottom: 20px }.post_box h2 { font-size: 22px; margin-bottom: 15px; background: none; padding-bottom: 5px }.post_box h2 a { color: #fff }.post_box p.post_meta { margin-bottom: 0 }.post_box img { float: left; margin-right: 20px }#contact_form { padding: 0; width: 340px; }#contact_form form { margin: 0px; padding: 0px; }#contact_form form .input_field { width: 240px; padding: 2px 5px; color: #fff; background: #070105; border: 1px solid #660044; }#contact_form form label { display: block; width: 100px; margin-right: 10px; font-size: 14px; }#contact_form form textarea { width: 328px; height: 80px; color: #fff; padding: 5px; background: #070105; border: 1px solid #660044; }.submit_btn { padding: 5px 10px; color: #fff; background: #330022; border: 1px solid #660044; }#slider {position: relative;width: 100%;}#templatemo_wrapper {width: 800px;margin: 0 auto;}#templatemo_social {width: 800px;height: 50px;}#templatemo_main {clear: both;width: 800px;padding: 30px 0;height: 580px;}#templatemo_sidebar {float: left;width: 320px;}#templatemo_content {float: right;width: 480px;}#header h1 { display: block; width: 315px; height: 166px; margin: 0 auto 80px; padding: 0 }#header h1 a { float: left; margin-top: 25px; width: 315px; height: 166px; background: url(../images/templatemo_logo.png); text-indent: -10000px; }#menu {clear: both;float: right;}#templatemo_footer {clear: both;float: right;width: 360px;margin: 20px 40px;padding: 20px;text-align: left;background: #070105;border: 1px solid #26071d;}color: #fff;}.scroll {width: 480px;height: 580px;overflow: auto;/* overflow-x: hidden; */position: relative;clear: left;}.scrollContainer div.panel { width: 400px;height: 500px;padding: 40px;overflow: hidden;}.scrollContainer div.pane2 { width: 400px;height: 200px;padding: 40px;overflow: hidden;}ul.navigation {list-style: none;margin: 0;padding: 0;}ul.navigation li {margin: 0;padding: 0;}ul.navigation a {display: block;float: right;padding: 8px 15px;margin-bottom: 5px;font-weight: 400;text-decoration: none;color: #fff;text-align: right;}ul.navigation a:hover, ul.navigation a.selected {background: #0f020b;}ul.navigation a:focus {outline: none;}我的网站是采用左右框架实现的，网站最后实现的结果为:4. 总结通过一系列的学习，我初步认识了网页设计的过程。