基于HTML+CSS+JavaScript网站的设计与开发（仿小米MUI网站）【100011414】

## Web课设报告 # 1 课设题目 基于HTML+CSS+JavaScript网站的设计与开发 # 2 课设目的 通过本课程设计，学生需要掌握web前端开发技术的基本技能和专业能力，培养学生如下技能： 知识目标：复习、巩固Web前端的基础知识，进一步加深对Web前端技术的理解和掌握； 能力目标：理解网站设计的四个阶段：网站的前期准备、网站的结构架设、网站的效果设计和网站的人机交互，综合应用 HTML、CSS、JavaScript等技术来开发网站； 素养目标：课程设计为学生提供了一个既动手又动脑，独立实践的机会，将课本上的理论知识和实际有机的结合起来，锻炼学生的分析 解决实际问题的能力。培养学生在项目开发中团队合作精神、创新意识及能力。 # 3 选题依据及内容 我做的是我自己想做的一个MIUI 10的官网。我是参考小米原MIUI 10官网的设计，然后加入了自己的想法做的。这个网页的制作包含了我们所学的浮动，定位，JavaScript等等，还有一些我们未学过的知识。当亲自动手自己做网页的时候并没有自己想想的那么简单也没有那么的难，从一开的无从下手到最后的完成，中间我在网上搜索大量的知识和操作，还在书上资料寻找那些解决问题的办法。通过动手实践，觉得我有点喜欢敲代码了，很有成就感，并且对所学的知识进行了巩固，还学了更有意思和难度的方法。 下面就是我所选做的MIUI 10网页主页，MIUI 10介绍子页，登录注册页和下载页这四个页面。 # 4 设计过程 ## 4.1 总体设计 我认为做一个网站首先要明白它的网页设计步骤: - 确定网站主题 - 分析网站的功能，将网站所有的功能在文档中体现。 - 分析网站的主题，选择符合网站主题的方法。 编写步骤： - 先用html写出结构。 - 用CSS写出样式。 - 用js写出动态效果。 ## 4.2 详细设计 ### 4.2.1 MIUI官方网站 #### 一，整体分析  #### 二、局部分析  （1）分析效果图 网页的头部为选项,以及主页面和子页面的超链接。可以通 表单来定义，需要在表单外加一层大盒子。 （2）准备图片素材 根据原网页的观察，其背景图片即黑底，所以不需要图片素材，只需要将盒子的背景颜色定义为黑色，各个<li>内的字体颜色#666（偏白）。 （3）搭建结构 在html页面添加结构代码。定义head的两对<div></div>标签，内嵌<ul></ul>和<li></li>来设置单元格，插入导航栏。 （4）控制样式 设置单元格的宽和高。以及内边距padding。文字都设为超链接<a href= “”></a>;在鼠标点到单元格上时，单元格的背景色background-color变红,同时还要清除超链接的格式。  （1）分析效果图 大型MIUI10海报。 （2）准备图片素材 从原网页按照原始比例截取。 （3）搭建结构 在html页面添加结构代码。定义<div>盒子，在里面放入原网页比例大小海报，并为其添加跳转下载页的超链接。 （4）控制样式 设置盒子及海报图居中，位置居中。  (1）分析效果图 主页的三个分栏页，分别跳转到不同的页面。 （2）准备图片素材 从原网页内链接下载。 （3）搭建结构 在html页面添加结构代码。先定义一个最大的盒子，里面有三个小盒子，通过左浮动使得小盒子并排排列。每个盒子里面放入相应图片和内容，并为其加超链接，使其跳转至相应内容。 （4）控制样式 设置单元格的宽和高。以及内边距padding。文字都设为超链接<a href=""></a>;在鼠标点到单元格上时，单元格的背景色background-color变深,同时还要清除超链接的格式。  （1）分析效果图 包括原网站网址和个人信息 （2）搭建结构 在html页面添加结构代码。定义一对<div></div>标签，来控制盒子。 （3）准备图片素材 无 （4）控制样式 控制盒子的宽和高，以及内边距padding。以及外边距margin让信息和版权居中 ### 4.2.2 小米账号登陆/注册  （1）分析效果图 网页的头部为选项,以及主页面和子页面的超链接。可以通 表单来定义，需要在表单外加一层大盒子。 （2）准备图片素材 根据原网页的观察，其背景图片即黑底，所以不需要图片素材，只需要将盒子的背景颜色定义为黑色，各个<li>内的字体颜色#666（偏白）。 （3）搭建结构 在html页面添加结构代码。定义head的两对<div></div>标签，内嵌<ul></ul>和<li></li>来设置单元格，插入导航栏。 （4）控制样式 设置单元格的宽和高。以及内边距padding。文字都设为超链接<a href= “”></a>;在鼠标点到单元格上时，单元格的背景色background-color变红,同时还要清除超链接的格式。   1 分析效果图 建一个一个大盒子插曲背景图片。大盒子嵌套一个小盒子，然后小盒子里面有多个盒子，并以表格形式编写登陆界面样式。插入小图标和超链接。 2 准备图片素材 准备小图标图片及大背景图片 3 搭建结构 在html页面添加结构代码。定义head的两对<div></div>标签，内嵌<ul></ul>和<li></li>来设置单元格，插入按钮。 4 控制样式 设置单元格的宽和高。以及内边距padding。文字都设为超链接<a href=“”></a>;在鼠标点到单元格上时，单元格的背景色background-color变白色字体色变黑色,同时还要清除超链接的格式。用type和value来手机号登录和注册。 用js语言控制当鼠标从输入栏移走时若无输入，网页弹出相应提醒（见上面效果图）。 ### 4.23 MIUI 10 #### 一，整体分析  #### 二，局部分析  1 分析效果图 网页的头部为选项,以及主页面和子页面的超链接。可以通 表单来定义，需要在表单外加一层大盒子。 2 准备图片素材 根据原网页的观察，其背景图片即黑底，所以不需要图片素材，只需要将盒子的背景颜色定义为黑色，各个<li>内的字体颜色#666（偏白）。 3 搭建结构 在html页面添加结构代码。定义head的两对<div></div>标签，内嵌<ul></ul>和<li></li>来设置单元格，插入导航栏。 4 控制样式 设置单元格的宽和高。以及内边距padding。文字都设为超链接<a href= “”></a>;在鼠标点到单元格上时，单元格的背景色background-color变红,同时还要清除超链接的格式。  1 分析效果图 网页的宣传海报，其超链接指向MIUI 10的宣传视频。 2 准备图片素材 按照原网页比例截取，视频从原网页下载。