下载文档原格式
《网页设计与制作》课程教学工作总结时间真是过得飞快，转眼间《网页设计与制作》这门课就要结束了。
在这段时间里，团队里大家齐心协力，经历了不少挑战，也收获了很多。
回想起来，这段教学过程既有值得庆祝的成绩，也有需要我们反思的地方。
下面就来聊聊这段时间的总结吧。
工作概述在课程设计上，我们特别注重互动和趣味性，力求让每个学生都能积极参与。
课程开始时，我们制定了详细的教学计划，也设定了阶段性目标，以确保学生们能逐步提高自己的能力。
主要成就在教学过程中，取得了一些显著的成绩。
经过我们的努力，学生们的网页设计水平有了明显的提升。
来看看一些具体的案例和数据吧：1. 项目展示：在学期末，学生们参加了“网页设计大赛”，展示了他们的作品。
大赛共有30个项目参赛，涵盖个人博客、企业官网、在线商店等多种类型。
根据评审的反馈，70%的作品获得了“优秀”评价，显示出学生们在设计思路和技术应用上的成长。
2. 课程反馈：通过期中和期末的问卷调查，95%的学生对课程内容表示满意，认为课程既丰富又实用。
尤其是在项目实操环节，大家普遍反映能更好地理解理论知识，并在实践中得到锻炼。
3. 团队合作：我们鼓励学生们以小组的形式进行项目合作，观察发现，大部分小组在合作中展现出了良好的沟通能力和分工意识。
这种合作模式不仅提升了学生的社交能力，也增强了他们的责任感和集体荣誉感。
经验与教训虽然取得了一些成绩，但在教学过程中也遇到了一些问题，这些问题需要我们认真分析和反思。
1. 时间管理：有些学生在项目截止日期前感到很大压力，最终导致作品质量下降。
这说明我们在项目进度的安排上需要更加细致，或许可以考虑将项目拆分成多个小阶段，让学生能更好地分配时间。
2. 技术难度：对于基础较弱的学生来说，课程内容的技术难度可能有点高。
虽然我们提供了额外的辅导时间，但依然有一些同学在理解某些概念时遇到困难。
这提醒我们在课程设计时，要考虑到不同水平学生的需求，适当调整教学节奏。
网设计与制作实训报告完整版网页设计与制作实训报告一、实训目的与背景网页设计与制作是现代社会中非常重要的技能之一，通过本次实训，我旨在培养自己的网页设计与制作能力，提高自己的实际操作能力，并将所学知识与技能应用于实际工作中。
二、实训过程与方法1. 确定实训内容与目标：为了更好地完成实训，我事先确定了实训的内容及所需达到的目标。
实训的内容包括学习HTML、CSS、JavaScript等网页设计与制作相关知识，并能够通过实际操作制作出具有实用性与美观性的网页。
2. 学习与研究：在开始实际操作之前，我首先进行了系统的学习与研究。
通过参考书籍、网络资源、视频教程等方式，我全面了解了HTML、CSS、JavaScript等技术的基本原理与应用方法，并加深了对网页设计与制作的理解。
3.实际操作与练习：在学习与研究阶段结束后，我开始进行实际操作与练习。
我首先从简单的网页设计开始，逐渐增加难度，通过一步步实际操作，不断巩固所学知识，并提高自己的技术水平。
同时，我也积极参与实验室和班级里的网页设计与制作项目，与同学们共同学习，互相交流经验。
4.实际项目案例：在实训的最后阶段，我开始进行实际项目案例的设计与制作。
我选择一个健身房的官方网站作为实际项目，通过网站的设计与制作，展示出我所学技术的实际应用。
在这个过程中，我不断与客户进行沟通与反馈，保证项目的质量与效果。
三、实训成果与收获通过本次实训，我取得了一些实质性的成果。
首先，我掌握了HTML、CSS、JavaScript等网页设计与制作技术，能够熟练运用这些技术进行网页设计与制作。
其次，我通过实际操作，提高了自己的实际操作能力，并在实际项目中展示出良好的设计与制作水平。
最后，我与同学们共同学习，互相交流经验，取得了一定的进步。
在实训中，我也遇到了一些问题与困难。
其中最大的困难是在实际项目中与客户进行沟通与反馈，因为客户对于网页设计与制作可能存在一些不了解或误解。
但通过与客户的不断沟通与解释，我最终成功理解并满足了客户的需求。
《网页设计与制作》课程设计报告书设计题目：工作室或公司网站设计起止日期： 2013.12.23-2013.12.27目录一、关于网站 (3)1、网站的主题 (3)2.网站材料 (4)二、网站的规划设计 (5)1.网站的功能定位 (5)2.站点的内容 (5)3.站点的风格 (5)4.网站功能模块图 (6)三．网站技术解决方案 (6)1、网站的制作工具 (6)2、所用技术 (7)四．网页介绍 (7)1、制作网站的网页 (7)2.第二层展示 (8)3.动漫排行榜展示 (9)4.第三层展示 (10)5.关于短片的插入： (13)五. 关于我们： (14)六．实训总结： (14)一、关于网站1、网站的主题我的网站的主旨在于从各个方面全面的介绍动漫，展示动漫产品以及漫画，包括有动漫排行榜，小短片，另外，网站里还有漫画，以及周边产品。
建立一个展示动漫的平台。
同时，网站里的每一个网页都有统一的风格，每一个网页的主题都是图片加上文字介绍，用以展示自己性格的效果。
最重要的是做出自己的风格，给浏览者好的欣赏感受。
动漫，是动画和漫画的合称与缩写，取这两个词的第一个字合二为一称之为“动漫”。
现可考证，该词语出处为1993年创办的动漫出版同业协进会与1998年创刊的动漫资讯类类月刊《动漫时代（Anime Comic Time）》，后经由漫友杂志传开，因概括性强在大陆地区的使用开始普及起来。
在中国以外，并没有此种说法。
国外习惯性将动画（anime）、漫画（comic）、游戏（game）三者合称作ACG，或加上轻小说（novel）合称为ACGN。
由于漫画本身的发展形成了现代故事漫画的表现形式，将影视艺术融入漫画之中，使得漫画与动画更容易结合，影视艺术独特的地方在于它能通过镜头的推拉摇移和片段剪辑的蒙太奇技巧来表达想法和感受。
漫画正是吸收了影视艺术的这两个特点。
当要讲述的故事越发复杂、人物越发丰富的时候，用传统单线式叙事的方法就越行不通，蒙太奇的介入就成为一种需要了；当漫画家在传统表现手段中无法找到更合适的抒发感情的方法的时候；当读者需要作品有更强的冲击力和表现力的时候，各种镜头的灵活运用就成为一种必需了。
网页设计与制作课程设计随着科技的飞速发展，互联网已经深入人们的工作、生活中。
网站作为网络的基本单元，已经成为各个领域中不可或缺的一部分。
因此，学习网页设计和制作技能是非常有必要的。
本文档将介绍网页设计与制作课程设计。
课程名称网页设计与制作课程概述本课程主要介绍网页设计与制作的基本知识和技能。
学生将学会使用HTML、CSS和JavaScript等技术开发网站。
在课程中，学生将编写、调试并测试网站的代码，了解并掌握如何创造简洁、美观、易于使用的界面。
课程目标1.掌握网页设计的基本知识和技能，包括HTML、CSS和JavaScript等相关技术2.能够设计和制作简单的网站，包括静态页面和动态页面3.能够熟练使用常见的网页开发工具和调试工具4.能够分析和解决网站开发过程中的常见问题课程内容第一周：HTML基础•学习HTML的基本知识和语法规则•了解HTML标签的基本分类和用法•编写HTML文档，包括文本、图像等第二周：CSS基础•学习CSS的基本知识和语法规则•了解CSS样式的基本分类和用法•能够为网页添加样式第三周：JavaScript基础•学习JavaScript的基本知识和语法规则•了解JavaScript变量、函数和循环等基础概念•能够编写简单的JavaScript代码第四周：网页布局与设计•学习网页布局和设计的基本原则•了解网页设计的基本要素，包括颜色、字体、排版等•能够为网站添加简单的布局和设计第五周：响应式网页设计•学习响应式网页设计的基本概念和原理•了解响应式网页设计的常见技术和工具•能够为网站添加响应式布局第六周：实践项目•结合前面所学的知识，实现一个完整的项目•分析并解决在项目实践过程中出现的问题•熟悉网站开发的整个流程，掌握网站制作的基本方法和技巧授课方式本课程采用面授和实践相结合的教学方式。
面授环节将主要讲授相关的理论知识和技术实践，实践环节将针对每个章节的内容，为学生提供相应的练习项目，并在实践过程中进行指导和解答。
网页设计与制作教程第四版课程设计1. 课程简介本课程旨在通过实际的网页设计与制作案例，帮助学生掌握相关的HTML、CSS、JavaScript等技术。
同时，通过对网站性能和用户体验的分析和优化，提高学生对网站设计的认识和理解，从而能够独立完成一个高质量的网站。
2. 完成的任务本课程的任务是要求学生根据所学知识和实践经验，完成一个具有以下功能的网站：1.首页：展示网站的主题和特色，为用户提供一个友好的访问界面。
2.产品分类：通过分类展示不同的产品，方便用户查找目标商品。
3.产品展示：展示商品的详细信息，为用户提供商品的完整信息。
4.购物车：支持用户添加和删除商品，以及修改商品数量。
5.用户注册/登录：支持用户注册并登录后进行购物。
3. 设计思路3.1 网站整体布局在整体布局设计中，需要考虑导航栏、页脚、头部搜索栏等基本元素，尽量避免子网页过多并统一样式和色彩，从而提高用户的使用流畅性和体验。
3.2 首页设计首页作为网站的门面和展示重点，要注重页面的美观与实用性，同时还要提供让用户深入了解企业信息的介绍内容和功能。
3.3 分类模块设计分类模块是最常用的功能之一，需要考虑视觉效果和用户需求的平衡，支持商品的多角度分类查找，以及提供筛选功能。
3.4 产品展示设计产品展示页面是展示商品信息和完成购买的重要页面，需要结构清晰，内容丰富，功能齐全。
其中，页面布局、图片和文字等方面的处理都应该切实满足用户需求。
3.5 购物车设计购物车页面需要结构简单且易于使用，支持用户添加/删除商品和修改商品数量的实时更新。
3.6 用户注册/登录设计用户注册和登录模块是用户进行购物的关键步骤，需要设计清晰明了，方便用户操作。
同时还需要支持密码找回和修改等功能。
4. 实现过程我们可以使用现有的框架和工具来实现这个网站，例如使用Bootstrap或者LayUI框架来构建页面的布局和样式，同时使用PHP语言来编写和连接数据库。
4.1 HTML+CSS实现HTML5和CSS3可以实现丰富的动态效果，同时也支持响应式布局和多设备适配，因此可大大提高网站的用户体验和性能。
学号：2010215210420题目网页设计与制作学院计算机科学与技术学院专业计算机应用班级1004姓名李俊清指导教师丁一2012年6月10日实验一：网页设计html一、实验目的1．掌握常用的HTML语言标记。
2．利用文本编辑器建立HTML文档，制作简单网页。
3．掌握网页制作功能的使用。
二、实验内容1．熟悉制作网页的基本方法。
2．掌握网页文件的基本操作；页面属性的设置；文本的插入和格式设置3．建立一个网站。
三、实验步骤1．在E:盘上建立一个文件夹如myweb作为自己的web站点根目录，在文本编辑器EditPlus 中输入如下的HTML代码程序，保存为以.htm或.html为后缀的文件如index.htm作为自己的第一个页面，并在浏览器中运行。
<html><head><title>我的第一个网页</title></head><body><h1>欢迎访问我的网站。
</h1><h3>欢迎访问我的网站。
</h3><h5>欢迎访问我的网站。
</h5></body></html>2.在标记中分别加入以下属性，看看index.htm有什么变化。
bgcolor=#背景颜色#=rrggbb(16进制的RGB值)或颜色名称background=#背景图像#=image-URL(图片所在路径)text=#非可链接文字的色彩bgproperties=FIXED背景图像不动<html><head><title>我的第一个网页</title></head><body bgcolor="#CCCCFF" text="#993366"><h1 align="center">欢迎访问我的网站。
《网站制作》课程设计系别：信息技术系专业：班级：姓名：学号：指导老师：李枫完成日期：2015年07月9日目录《网站制作》课程设计 (1)目录 (2)一、设计任务与要求 (3)课设目的 (3)课设内容 (3)具体要求 (3)设计环境 (3)二、设计方案 (3)三．实现过程 (3)四、心得体会 (17)五、参考资料 (18)六、附录 (19)1、网站效果图 (19)2、网站中各网页屏幕截图 (19)一、设计任务与要求课设目的1、复习巩固网站设计与制作的基础知识：HTML、CSS和JS，进一步加深对Photoshop制作网页效果图、Dreamweaver布局网页等技术的理解和掌握，培养学生策划和制作商业网站的实践能力。
2、训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、音视频资料、flash动画和网页特效等，提高学生的美工设计能力。
3、课程设计为学生提供了一个既动手又动脑，独立实践的机会，将课本上的理论知识和实际有机的结合起来，锻炼学生的分析解决实际问题的能力。
课设内容针对目前互联网上的网站制作背景和需求，策划、设计与制作一个完整的商业网站。
具体网页的内容自拟，但以下网站主题可供参考、选择：1、图书销售网站2、学校网站3、旅游网站4、摄影网站5、公司宣传网站6、驾校网站7、精品课程网站8、婚庆网站9、团购网站10、政府网站……具体要求1、动手制作网页之前：必须认真做好网站的需求分析，包括市场调查，定位网站目的，策划好网站的主题及功能定位，创意出网站的风格和亮点，确定网页色彩基调。
图1 网站结构图 规划好网站的风格和结构，网站主要内容及板块，各板块的具体内容及功能。
分析出“网站层次结构图”、 “网页版面设计”，以及“网站策划方案”。
2、创建完善的目录结构：站点文件夹采用英文单词命名，站点文件夹中所包含文件夹：images （存放图片文件）flash （存放动画文件）css （存放CSS 样式表文件）js （存放JS 脚本文件）other （存放其它文件）源文件 （存放自己设计的PS 源文件、Flash 源文件）首页命名为index.html ，其余文件全部用英文命名3、制作网页前，收集好所需的文字资料、图像资料、网页特效。
实验报告学号: 0701********专业: 计算机科学与技术班级：07计科2班姓名: 张兆民题目: 网页设计与制作指导教师:郭胜设计时间：2010年12月14日目录一课程设计目的 ............................................二、课程设计题目 (2)三、课程设计要求 (2)四、需求分析 (2)五、源代码及截图 (2)六、参考资料 (25)七、设计总结 (25)实验内容一、课程设计的目的本课程的设计目的是通过实践使同学们对技术有个全面的了解，通过这次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。
结合具体的开发案例，理解并初步掌握运用Visual Studio 2005 开发工具进行网页开发的方法；了解网页设计制作过程。
了解和熟悉网页设计的基础知识和实现技巧。
根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。
二、课程设计题目网页设计与制作——登陆系统三、课程设计要求根据所选择的主题，设计相关的网页，要求用技术做网页。
要求连数据库，实现基本功能。
四、需求分析选定主题，确定题目之后，在做整个网站之前对网站进行需求分析。
首先，做好需求调研。
调研的主要方式是在图书馆里翻阅相关书籍。
调研内容如下：1、网站当前以及日后可能出现的功能需求。
2、对网站的性能（如访问速度）的要求和可靠性的要求。
3、确定网站维护的要求。
4、网站的实际运行环境。
5、网站页面总体风格以及美工效果。
6、主页面和次级页面数量等。
7、内容管理及录入任务的分配。
8、项目完成时间及进度。
然后，调研结束之后对整个网站进行功能描述，并对网站进行总体规划，接着逐步细化。
五、网站源代码（1）登录界面：前台设计代码：Login.aspx<%@Page Language="C#"AutoEventWireup="true"CodeFile="login.aspx.cs"Inherits="login" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title>无标题页</title><script language="javascript"type="text/javascript">// <!CDATA[function TABLE1_onclick() {}// ]]></script></head><body><form id="form1"runat="server"><div><div style="text-align: center"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><table border="1"cellpadding="1"cellspacing="1"style="border-right: #ff0099 thick double; border-top: #ff0099 thick double; border-left: #ff0099 thick double; border-bottom: #ff0099 thick double"id="TABLE1"onclick="return TABLE1_onclick()"><tr><td colspan="3"style="background-image: url(img/0.jpg); background-color: #ffff66; height: 71px;"><br/><span style="color: #0000ff">设计者：张兆民<br/><strong><span style="font-size: 16pt; color: #ff0000;"></span></strong></span><br/><br/><br/><br/><br/> <asp:Label ID="Label1"runat="server"Font-Bold="True" Font-Size="X-Large"ForeColor="Red"Text="输入密码和用户名"></asp:Label> <br/></td></tr><tr><td colspan="3"style="height: 23px"><span style="color: #ffff00"><span style="color: #0000ff"> 用户登陆</span></span> <asp:TextBox ID="txtUser"runat="server"Width="143px"></asp:TextBox></td></tr><tr><td colspan="3"><span style="color: #0000cc">用户密码</span> <asp:TextBox ID="txtPass"runat="server"TextMode="Password"Width="129px"></asp:TextBox></td></tr><tr><td colspan="3"> .<asp:Button ID="Button1"runat="server"Text="注册"OnClick="Button1_Click"ForeColor="Red"/> <asp:Button ID="Button2"runat="server"OnClick="Button2_Click"Text="登陆"ForeColor="Red"/> <asp:Button ID="Button3"runat="server"Text="重置"OnClick="Button3_Click"ForeColor="Red"/></td> </tr><tr><td colspan="3"style="text-align: center; height: 99px; background-color: #ccffff;"><strong><span style="font-size: 32pt; color: #ff0000">员工管理系统</span></strong></td></tr></table><br/><br/></div></div></form></body></html>后台功能代码：Login.aspx.csusing System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class login : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){}protected void Button2_Click(object sender, EventArgs e){string username = txtUser.Text.Trim();string pwd = txtPass.Text.Trim();if (username == "张兆民" && pwd == "123456")Response.Redirect("succeed.aspx?uid="+txtUser.Text+"&txtPass="+txtPass.Text+"&txtUser="+txtU ser.Text);else{Label1.Text = "用户名或者密码有误！请重新输入！";}}protected void Button3_Click(object sender, EventArgs e){txtUser.Text = "";txtPass.Text = "";}protected void Button1_Click(object sender, EventArgs e){Response.Redirect("Default.aspx");}}截图：（2）新用户注册表界面：前台设计代码：Default.aspx<%@Page Language="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title>无标题页</title><script language="javascript"type="text/javascript">// <!CDATA[// ]]></script></head><body style="background-color: #ffffff"><form id="form1"runat="server"><div><div style="text-align: center; border-top-style: double; border-right-style: double; border-left-style: double; border-bottom-style: double;"><br/><br/><br/><br/><table style="border-left-color: #66ff66; border-bottom-color: #66ff66;border-top-style: solid; border-top-color: #66ff66; border-right-style: solid;border-left-style: solid; border-right-color: #66ff66; border-bottom-style: solid; text-align: left;"id="TABLE1"onclick="return TABLE1_onclick()"><tr><td style="width: 191px"></td><td style="width: 468px; text-align: justify;"> <span style="color: #ff00ff"> <br/><strong> 新用户注册表</strong> <br/></span></td></tr><tr><td colspan="2"style="border-left-color: #ffccff; border-bottom-color: #ffccff;border-top-style: double; border-top-color: #ffccff;border-right-style: double;border-left-style: double; height: 28px; text-align: left;border-right-color: #ffccff;border-bottom-style: double"><asp:Label ID="Label2"runat="server"Text="请输入您的用户名"></asp:Label></td></tr><tr><td colspan="2"style="border-left-color: #ffccff; border-bottom-color: #ffccff;border-top-style: double; border-top-color: #ffccff;border-right-style: double;border-left-style: double; height: 64px; text-align: left;border-right-color: #ffccff;border-bottom-style: double"><strong style="border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-color: #ffccff; border-right-color: #ffccff"> *用户名 </strong><asp:TextBox ID="userName"runat="server"style="border-left-color: #ff0066; border-bottom-color: #ff0066; border-top-style: dashed; border-top-color: #ff0066; border-right-style: dashed; border-left-style: dashed; border-right-color: #ff0066;border-bottom-style: dashed"></asp:TextBox><br/></td></tr><tr><td style="border-left-color: #ffccff; border-bottom-color: #ffccff; border-top-style: double; border-top-color: #ffccff; border-right-style: double;border-left-style: double; height: 22px; border-right-color: #ffccff; border-bottom-style: double; text-align: left;"colspan="2"><asp:Label ID="Label3"runat="server"Text="请填写安全密码"></asp:Label></td></tr><tr><td colspan="2"style="border-left-color: #ffccff; border-bottom-color: #ffccff;border-top-style: double; border-top-color: #ffccff;border-right-style: double;border-left-style: double; height: 61px; text-align: left;border-right-color: #ffccff;border-bottom-style: double"><strong style="border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-color: #ffccff; border-right-color: #ffccff"><br/> *登陆密码 </strong><asp:TextBox ID="Pwd"runat="server"style="border-left-color: #ff0066; border-bottom-color: #ff0066; border-top-style: dashed; border-top-color: #ff0066;border-right-style: dashed; border-left-style: dashed; border-right-color: #ff0066;border-bottom-style: dashed"TextMode="Password"></asp:TextBox></td></tr><tr><td colspan="2"style="height: 22px; text-align: justify"><strong style="border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-color: #ffccff; border-right-color: #ffccff"> *性别</strong> <asp:RadioButton ID="male"runat="server"Checked="True"GroupName="male"Text="男"/> <label for=male></label> <asp:RadioButton ID="female"runat="server"GroupName="male"Text="女"/></td></tr><tr><td style="text-align: justify; height: 26px;"colspan="2"><strong style="border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-color: #ffccff; border-right-color: #ffccff"> *真实姓名 </strong><asp:TextBox ID="RealName"runat="server"style="border-left-color:#ff0066; border-bottom-color: #ff0066; border-top-style: dashed; border-top-color: #ff0066; border-right-style: dashed; border-left-style: dashed; border-right-color: #ff0066;border-bottom-style: dashed"></asp:TextBox></td></tr><tr><td style="border-left-color: #ffccff; border-bottom-color: #ffccff; border-top-style: double; border-top-color: #ffccff; border-right-style: double;border-left-style: double; text-align: center; border-right-color: #ffccff; border-bottom-style: double;"colspan="2"rowspan="3"> <br/> 留言板 <br/><br/><asp:TextBox ID="TextBox1"runat="server"Height="80px"Width="250px"></asp:TextBox><br/><br/><asp:CheckBox ID="agree"runat="server"Text="我已经看过并同意（服务条款）"/><br/><br/> <asp:Button ID="Button1"runat="server"OnClick="Button1_Click"Text="提交"/></td></tr><tr></tr><tr></tr><tr><td colspan="2"style="background-color: transparent"><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/></td></tr><tr><td style="width: 191px"></td><td style="width: 468px"></td></tr></table></div></div></form></body></html>后台功能代码：Default.aspx.csusing System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class_Default : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){}protected void male_CheckedChanged(object sender, EventArgs e) {}protected void Button1_Click(object sender, EventArgs e){string sex = "";if (female.Checked){sex = "女";}else{sex = "男";}if (agree.Checked){Response.Redirect("shopperson_Info.aspx?uid="+ userName.Text + "&pwd="+ Pwd.Text + "&sex=" + sex + "&realname=" + RealName.Text);}else{Response.Write("<script language='javascript'>alert('由于您不同意我们的《服务条款》注册失败！'</script>)");}}}截图：（3）注册成功界面：前台设计代码：ShopPerson_Info.aspx<%@Page Language="C#"AutoEventWireup="true"CodeFile="ShopPerson_Info.aspx.cs"Inherits="ShopPerson_Info" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title>无标题页</title></head><body><form id="form1"runat="server"><div style="text-align: center"><br/><br/><br/><br/><br/><table style="border-left-color: #ff0066; border-bottom-color: #ff0066;border-top-style: double; border-top-color: #ff0066; border-right-style: double;border-left-style: double; border-right-color: #ff0066; border-bottom-style: double"> <tr><td colspan="2"style="text-align: left"><br/><br/><span style="font-size: 24pt"> </span><strong><span style="border-left-color: #ffccff; border-bottom-color:#ffccff; color: #ff0066;border-top-style: solid; border-top-color: #ffccff; border-right-style: solid;border-left-style: solid; border-right-color: #ffccff;border-bottom-style: solid"><span style="font-size: 24pt; border-left-color: #ffccff;border-bottom-color: #ffccff;border-top-style: solid; border-top-color: #ffccff;border-right-style: solid;border-left-style: solid; border-right-color: #ffccff;border-bottom-style: solid">恭喜您注册成功！</span><br/><br/><br/><br/></span></strong></td></tr><tr><td style="width: 90px; text-align: left; border-left-color: #ffccff;border-bottom-color: #ffccff; border-top-style: solid; border-top-color: #ffccff;border-right-style: solid; border-left-style: solid; border-right-color: #ffccff;border-bottom-style: solid;"><br/><strong> *用户名<br/></strong></td><td style="width: 374px; border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-style: double; border-top-color: #ffccff; border-right-style: double; border-left-style: double; border-right-color: #ffccff; border-bottom-style: double;"><asp:Label ID="Label1"runat="server"Text="Label"></asp:Label></td> </tr><tr><td style="width: 90px; text-align: left; border-left-color: #ffccff;border-bottom-color: #ffccff; border-top-style: solid; border-top-color: #ffccff;border-right-style: solid; border-left-style: solid; height: 59px; border-right-color: #ffccff; border-bottom-style: solid;"><br/><strong> *登陆密码<br/></strong></td><td style="width: 374px; border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-style: solid; border-top-color: #ffccff; border-right-style: solid; border-left-style: solid; height: 59px; border-right-color: #ffccff; border-bottom-style: solid;"><asp:Label ID="Label2"runat="server"Text="Label"></asp:Label></td> </tr><tr><td style="width: 90px; text-align: left; border-left-color: #ffccff;border-bottom-color: #ffccff; border-top-style: solid; border-top-color: #ffccff;border-right-style: solid; border-left-style: solid; border-right-color: #ffccff;border-bottom-style: solid;"><br/><strong> *性 别<br/></strong></td><td style="width: 374px; border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-style: solid; border-top-color: #ffccff; border-right-style: solid; border-left-style: solid; border-right-color: #ffccff; border-bottom-style: solid;"><asp:Label ID="Label3"runat="server"Text="Label"></asp:Label></td> </tr><tr><td style="width: 90px; height: 21px; text-align: left; border-left-color: #ffccff; border-bottom-color: #ffccff; border-top-style: solid; border-top-color: #ffccff; border-right-style: solid; border-left-style: solid; border-right-color: #ffccff;border-bottom-style: solid;"><br/><strong> *真实姓名<br/></strong></td><td style="width: 374px; height: 21px; border-left-color: #ffccff;border-bottom-color: #ffccff; border-top-style: double; border-top-color: #ffccff;border-right-style: double; border-left-style: double; border-right-color: #ffccff;border-bottom-style: double;"><asp:Label ID="Label4"runat="server"Text="Label"></asp:Label></td> </tr><tr><td colspan="2"rowspan="2"style="border-left-color: #ffccff;border-bottom-color: #ffccff;border-top-style: solid; border-top-color: #ffccff; border-right-style: solid;border-left-style: solid; text-align: center; border-right-color: #ffccff; border-bottom-style: solid"><br/><br/><asp:Button ID="Button1"runat="server"OnClick="Button1_Click"Text="登陆"/> <br/></td></tr><tr></tr></table></div></form></body></html>后台功能代码：ShopPerson_Info.aspx.csusing System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class ShopPerson_Info : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){this.ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('注册成功！')</script>");try{Label1.Text = Request.QueryString["uid"].ToString();Label2.Text = Request.QueryString["pwd"].ToString();Label3.Text = Request.QueryString["sex"].ToString();Label4.Text = Request.QueryString["realname"].ToString();}catch{}}protected void Button1_Click(object sender, EventArgs e){Response.Redirect("login.aspx");}}截图：（4）显示姓名界面：前台设计代码：Sousou.aspx<%@Page Language="C#"AutoEventWireup="true"CodeFile="Sousou.aspx.cs"Inherits="Sousou" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title>无标题页</title></head><body><form id="form1"runat="server"><div style="text-align: center"><br/><br/><br/><br/><br/><br/><br/><br/><table border="1"cellpadding="1"cellspacing="1"style="border-left-color: lime;border-bottom-color: lime; border-top-style: double; border-top-color: lime;border-right-style: double; border-left-style: double; text-align: center; border-right-color: lime;border-bottom-style: double"><tr><td style="width: 283px; height: 139px"></td><td style="width: 265px; height: 139px"><br/><br/><br/><br/><br/> <br/></td><td style="width: 210px; height: 139px"></td></tr><tr><td colspan="3"style="height: 51px; text-align: center">尊敬的用户！恭喜您！登陆成功！</td></tr><tr><td colspan="3"style="height: 18px; text-align: center"></td></tr><tr><td colspan="3"style="height: 26px; text-align: center">姓名：<asp:TextBox ID="TextBox1"runat="server"></asp:TextBox> <asp:Button ID="Search_button"runat="server"Text="搜索"/></td> </tr><tr><td colspan="3"style="height: 99px; text-align: center"> <asp:GridView ID="GridView1"runat="server" AutoGenerateColumns="False"DataSourceID="AccessDataSource2"><Columns><asp:BoundField DataField="name"HeaderText="姓名"SortExpression="name"/></Columns></asp:GridView><asp:AccessDataSource ID="AccessDataSource2"runat="server"DataFile="~/App_Data/ProductShow.mdb"SelectCommand="SELECT [name] FROM [name] ORDER BY [name], [编号] DESC, [编号]"></asp:AccessDataSource></td></tr></table></div></form></body></html>后台功能代码：Sousou.aspx.csusing System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class Sousou : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){}private void DataBindgv(){DBAccess db = new DBAccess();DataSet ds = db.Getds();}protected void Search_button_Click(object sender, EventArgs e){Response.Redirect("Sousou.aspx");string strField = TextBox1.Text.ToString().Trim();string StrSql = "select * from Product_img where name='" + strField + "'";DBAccess db = new DBAccess();DataSet ds = db.Gets(StrSql);}}截图：（5）登录成功界面前台设计代码：Succeed.aspx<%@Page Language="C#"AutoEventWireup="true"CodeFile="succeed.aspx.cs"Inherits="succeed"%> <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"。
《网页设计与制作课程设计》实验报告院系名称：管理学院专业班级：电子商务XXX学生姓名： XXX 学号： XXXXXXX2016年 06 月一、实验目的本实验属于设计性实验，在学习完《网页设计与制作》课程的基础上，通过实验学习网页制作的步骤与方法，使用CSS+DIV制作一个简单的网站，能够对网站有一个清晰的认知和规划。
进一步熟悉和领悟HTML语言、CSS样式表和JAVASCRIPT语言的语法结构。
将理论与实践相结合，加深对本课程的理解。
二、实验步骤1、进行网站整体规划，包括网站主题、栏目以及界面的构思，确定网站结构，形成初步设计思路。
2、设计网站的主页以及栏目，利用CSS+DIV制作网站主页和弹出式导航条菜单，利用JavaScript制作动态效果，并用firework软件对主页进行切图。
3、设计并利用CSS+DIV制作列表页，并用firework软件对列表页进行切图。
4、设计并利用CSS+DIV制作内容页，并用firework软件对内容页进行切图。
5、进行调试和修改已形成最终实验结果。
三、网站设计思路1、参照“唯品会”“折800”等电商网站，确定网站主题为“轻奢电商”。
2、设计网站主页,主页设置首页、美妆、服饰、零食、母婴、关于我们、在售分类等七个一级栏目。
其中美妆、服饰、零食、母婴四个栏目含有二级栏目。
3、首页设置品牌热卖、限量抢购等图片展示，并利用Javascript设置用户名和密码的表单验证，在图片之下设置一个新闻列表提供有关网站的最新消息，右侧设置账户、密码的表单验证，并在网页结尾处写上官方微信和版权信息。
4、由主页导航栏上的的在售分类引出列表页，在列表页中采用新闻列表样式具体展示本企业的全部商品分类并设置超链接。
5、由列表页中美妆|女士护肤|洁面弹出具体的内容页面，主要由图片以及相应的文字介绍组成。
四、网站的核心代码1、主页<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>轻奢电商</title><style type="text/css">body{min-width:1080px;color:#006e89;font-family:微软雅黑;background-image:url(images/轻奢背景.jpg);}#outermost #title{margin: 0 auto;width: 1080px;}#nav{width: 1080px;margin:0 auto}#nav ul li{padding:0 5px;color:#CCC;margin:10px 0 0 0;float:right;list-style: none}#nav ul li a{color:#666;text-decoration: none}#nav ul li a:hover{color:#F00;text-decoration: underline }#outermost{clear:both;width:1080;margin-left:auto;margin-right:auto }#top{font-family: 隶书;font-size: 55px;margin:0}#outermost #title{margin: 0 auto;width: 1080px}#outermost #sddm{margin:0 auto;padding: 0;width: 1080px;z-index: 30;background-color:#030303;height:40px}#sddm li{margin:50;padding:0;list-style: none;float: left;font: bold 20px arial}#sddm li a{display: block;margin: 0 1px 0 0;padding: 4px 10px;width: 120px;background:#030303;color: #FFF;text-decoration: none }#sddm li a:hover{background: #030303 }#sddm div{position: absolute;visibility: hidden;margin: 0 35 0 0;padding: 0 35 0 0;background: #030303;border: 1px solid #030303 }#sddm div a {position: relative;display: block;margin: 0;padding: 5px 10px;width: 120;white-space: nowrap;text-align: left;text-decoration: none;background: #030303;color: #2875DE;font: 20px arial}#sddm div a:hover {background: #030303;color: #FFF}#main{margin:auto;font-size:30px;width:1000px;text-align:center}#content{magin-left:20px;font-size:22px;width:auto;height:200px;float:left}#content1{float:left;}#content2{magin:auto 0 auto auto;font-size:18px;height:200px;float:right}#bottom{magin:auto auto 0 auto;text-align:center;font-size:18px;clear:left}</style><script type="text/javascript"> $(function(){$("#KinSlideshow").KinSlideshow({moveStyle:"down",intervalTime:8,mouseEvent:"mouseover",titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"} });})</script><script type="text/javascript"><!--var timeout = 500;var closetimer= 0;var ddmenuitem = 0;function mopen(id){ mcancelclosetime();ddmenuitem = document.getElementById(id);}function mclose()function mclosetime(){ closetimer = window.setTimeout(mclose,timeout); }function mcancelclosetime(){ if(closetimer){ window.clearTimeout(closetimer); closetimer = null;}}document.onclick = mclose;// --></script><script type="text/javascript"> function a(obj){var zhi=document.getElementById('a'); zhi.innerHTML='';zhi.innerHTML='账号不能为空';return false;exit;}else{zhi.innerHTML='√';return true;}alert("aaa");}<!--验证密码-->function p(obj){var zhi=document.getElementById('p'); zhi.innerHTML='密码不能为空';return false;exit;}else{ zhi.innerHTML='√';return true;}}</script></head><body><div id="outermost"><div><p align="center" id="top"><img src="images/轻奢品牌.jpg" border="0">轻奢电商</p><p align="right"><img src="images/正品保障.jpg" border="0">正品保障<img src="images/7天退换.jpg" border="0">7天退换</p></div><ul id="sddm"><li><a href="#" onmouseover="mopen('m1')"onmouseout="mclosetime()">首页</a></li><li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">美妆</a><div id="m2" onmouseover="mcancelclosetime()" onmouseout= "mclosetime()"><a href="#">女士护肤</a><a href="#">男士护肤</a></div></li><li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">服饰</a><div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"><a href="#">精品女装</a><a href="#">潮流男装</a></div></li><li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">零食</a><div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"><a href="#">国内美食</a><a href="#">进口美食</a><a href="#">酒水专区</a></div></li><li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">母婴</a><div id="m5" onmouseover="mcancelclosetime()" onmouseout= "mclosetime()"><a href="#">婴幼儿专区</a><a href="#">孕妈专区</a><a href="#">玩具/文具/教育</a></div></li><li><a href="#" onmouseover="mopen('m6')" onmouseout="mclosetime()">关于我们</a></li><li><a href="list.htm" onmouseover="mopen('m7')" onmouseout="mclosetime()">在售分类</a></li></ul><div id="main"><p><hr size="1">品牌热卖<hr size="1"><br><div id="KinSlideshow" style=""><a href="/" target="_blank"><img src="images/pic1.jpg" ></a><a href="/" target="_blank"><img src="images/pic2.jpg" ></a></div></p><p><hr size="1">限量抢购<hr size="1"><br><img src="images/限量抢购.jpg" border="0"></p></div><div> <div id="content">轻奢电商——轻奢新主义，只为懂你的人<br><ul><li>轻奢国际尖货，跟踪国际一流品牌，提供超一流服务</li><li>轻奢母婴专享，提供超豪华护理套餐，限时一折抢购</li><li>轻奢化妆品专柜，超乎实体店的感官体验，限时特卖</li><li>轻奢零食主会场，进口零食倾情享受，酒水七折特卖</li></ul></div><div id="content1"><img src="images/登录.jpg" border="0"><div id="content2"><br><br><form method="post" action="" name="myform"> 用户：<input type="text" name="username" size="20" onblur="a(this)"><span id="a" style="color:red;font-size:12px;"></span><br>密码：<input type="password" name="pword" size="20"onblur="p(this)"><span id="p"style="color:red;font-size:12px;"></span></br><p><input type="submit" value="登录"><input name="" type="button" class="userpsubmit" value="注册" id="add" onclick="check_all(document.myform)"> </p></form> </div></div><div id="bottom" style="text-align:center"><hr width="80%"> </div></div></body></html>2、列表页<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>在售分类</title><style type="text/css">body{color:#006e89;font-family:微软雅黑;background-image:url(images/轻奢背景.jpg)}#sddm{padding:0;z-index: 30;background-color:#030303;height:40px;color:#FFF}#sddm li{padding:10px 30px 5px 30px;list-style: none;float: left;width:130px;font: bold 20px arial;color:#FFF}#sddm1{background-color:#006e89}#top{font-family:隶书;font-size:45px;text-align:center}#content{font-size:24px;padding:10px auto auto 20px;magin:auto auto auto 30px} #content ul first{font-size:24px;margin-left:50px}#content ul second{font-size:18px;margin-left:60px}a{font-size:18px;text-decoration:underline;color:#006e89}a:hover{font-size:18px;text-decoration:underline;color:#000}#bottom{magin:auto auto 0 auto;text-align:center;font-size:18px;clear:left}</style></head><body><div><p align="center" id="top"><img src="images/轻奢品牌.jpg" border="0">轻奢电商</p><p align="right"><img src="images/正品保障.jpg" border="0">正品保障<img src="images/7天退换.jpg" border="0">7天退换</p></div><ul id="sddm"><li>首页<li>美妆<li>服饰<li>零食<li>母婴<li>关于我们<li id="sddm1">在售分类</ul><div id="content"><div align="center"><hr width="80%">商品分类<hr width="80%"></div><ul id="first"><li>美妆<div><ul id="second"><li><img src="images/女士护肤.jpg" border="0">女士护肤：<a href="content.htm">洁面</a>|<a href="#">护肤套餐</a>|<a href="#">爽肤</a>|<a href="#">去角质</a>|<a href="#">T区护理</a>|<a href="#">面膜</a>|<a href="#">身体护理</a>|<a href="#">彩妆</a>|<a href="#">隔离防晒</a>|<a href="#">精华</a>|<a href="#">眼膜</a>|<a href="#">香水</a>|<a href="#">啫喱</a>|<a href="#">喷雾</a>|<a href="#">隔离防晒</a><li><img src="images/男士护肤.jpg" border="0">男士护肤：<a href="#">洁面</a>|<a href="#">剃须</a>|<a href="#">面膜</a>|<a href="#">面部护理</a>|<ahref="#">护肤套餐</a>|<a href="#">须后水</a>|<a href="#">眼部护理</a>|<a href="#">身体护理</a>|<a href="#">祛痘</a></ul></div><li>服饰<div><ul id="second"><li><img src="images/精品女装.jpg" border="0">精品女装:<a href="#">针织衫</a>|<a href="#">polo衫</a>|<a href="#">连衣裙</a>|<a href="#">牛仔裤</a>|<a href="#">风衣</a>|<a href="#">短裙</a>|<a href="#">松糕鞋</a>|<a href="#">棉衣</a>|<a href="#">凉鞋</a>|<a href="#">打底衫</a>|<a href="#">夹克</a><li><img src="images/潮流男装.jpg" border="0">潮流男装:<a href="#">T恤</a>|<a href="#">背心</a>|<a href="#">衬衫</a>|<a href="#">西装</a>|<a href="#">皮鞋</a>|<a href="#">泳裤</a>|<a href="#">帽子</a>|<a href="#">睡衣</a>|<a href="#">袖扣</a>|<a href="#">领带</a>|<a href="#">休闲裤</a></ul></div><li>零食<div><ul id="second"><li><img src="images/国内美食.jpg" border="0">国内美食:<a href="#">坚果</a>|<a href="#">肉脯</a>|<a href="#">果脯</a>|<a href="#">饼干</a>|<a href="#">特产</a>|<a href="#">炒货</a>|<a href="#">茗茶</a> <li><img src="images/进口美食.jpg" border="0">进口美食:<a href="#">巧克力</a>|<a href="#">糖果</a>|<a href="#">糕点</a>|<a href="#">咖啡</a>|<a href="#">健康冲饮</a>|<a href="#">咖啡伴侣</a><li><img src="images/酒水专区.jpg" border="0">酒水专区:<a href="#">花茶</a>|<a href="#">洋酒</a>|<a href="#">啤酒</a>|<a href="#">可口可乐</a>|<a href="#">牛奶</a>|<a href="#">葡萄酒</a>|<a href="#">茶叶</a>|<a href="#">鸡尾酒</a>|<a href="#">果汁</a></ul></div><li>母婴<div id="m3"><ul id="second"><li><img src="images/婴幼儿专区.jpg" border="0">婴幼儿专区:<a href="#">奶粉</a>|<a href="#">手推车</a>|<a href="#">学步鞋</a>|<a href="#">纸尿裤</a>|<a href="#">抱毯</a><li><img src="images/孕妈专区.jpg" border="0">孕妈专区:<a href="#">防辐射系列</a>|<a href="#">妈咪包</a>|<a href="#">家居服</a>|<ahref="#">营养品</a><li><img src="images/玩具.jpg" border="0">玩具/文具/教育:<a href="#">公仔</a>|<a href="#">乐器</a>|<a href="#">棋牌</a>|<a href="#">积木</a>|<a href="#">书包</a>|<a href="#">笔类</a>|<a href="#">连环画</a>|<a href="#">练习册</a>|<a href="#">乐高</a></ul></div></ul></div><div id="bottom" style="text-align:center"><hr width="80%"></div></body></html>3、内容页<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>洁面</title><style type="text/css">body{color:#006e89;font-family:微软雅黑;text-align:center;background-image:url(images/轻奢背景.jpg);}#top{font-family:隶书;font-size:45px;text-align:center} #sddm{margin:0 ;padding: 0;z-index: 30;background-color:#030303;height:40px;color:#FFF}#sddm li{padding:10px 30px 5px 30px;list-style: none;font: bold 20px arial;width:130px;color:#FFF}#sddm1{background-color:#006e89;}#content{width:100%}#content1{width:25%;float:left} #content2{width:25%;float:left} #content3{width:25%;float:left} #content4{width:25%;float:left} #bottom{magin:auto auto 0 auto;text-align:center;font-size:18px;</style></head><body><div><p align="center" id="top"><img src="images/轻奢品牌.jpg" border="0">轻奢电商</p><p align="right"><img src="images/正品保障.jpg" border="0">正品保障<img src="images/7天退换.jpg" border="0">7天退换</p></div><ul id="sddm"><li>首页<li>美妆<li>服饰<li>零食<li>母婴<li>关于我们<li id="sddm1">在售分类</ul><p align="left">您的位置>美妆>女士护肤>洁面<hr size="1"></p><div id="content" align="center"><div id="content1"><img src="images/list1.png" border="0"><br>洁面膏<br>尺码：100g<br>洁面膏彻底清除堆积在毛孔里的污垢和角质细胞，用后清爽无比</div><div id="content2"> <img src="images/list2.png" border="0"><br>草本青春洁面慕斯<br>规格：150mL<br>草本青春洁面慕斯150mL，蕴含有丰富的植物油和植物萃取，质地温和绵密，能够温和的清洁皮肤</div><div id="content3"><img src="images/list3.png" border="0"><br>玫瑰衡肤保湿洁面乳<br>尺码：80g<br>玫瑰衡肤保湿洁面乳80g，蕴含丰富的玫瑰果油，可提升肌肤水分含量<br></div> <div id="content4"><img src="images/list4.png" border="0"><br>衡肤泡沫洁面液<br>尺码：200mL<br>衡肤泡沫洁面液，玫瑰、绿茶和药蜀葵和多种植物活性成份可以轻柔的去肌肤表面污垢<br></div></div><div id="bottom" style="text-align:center"><hr></body></html>五、实验总结在本次网站页面设计中，首先要整理清楚构思，根据CSS样式以及DIV块化设计完成代码设计。
