基于HTML+CSS+JavaScript的MIUI10官网网站设计与开发

目录
1毕设题目 1
2毕设目的 1
3选题依据及内容 1
4设计过程 1
4.1 总体设计 1
4.2详细设计 2
4.21 MIUI官方网站 2
4.22小米账号登陆/注册 4
4.23 MIUI 10 6
4.24 MIUI 10 下载页 12
5调试过程 16
6收获及体会 16
7参考文献 17
8附录：源代码。 17
1毕设题目
基于HTML+CSS+JavaScript网站的设计与开发
2毕设目的
通过本课程设计，学生需要掌握web前端开发技术的基本技能和专业能力，培养学生如下技能：
知识目标：复习、巩固Web前端的基础知识，进一步加深对Web前端技术的理解和掌握；
能力目标：理解网站设计的四个阶段：网站的前期准备、网站的结构架设、网站的效果设计和网站的人机交互，综合应用 HTML、CSS、JavaScript等技术来开发网站；
素养目标：课程设计为学生提供了一个既动手又动脑，独立实践的机会，将课本上的理论知识和实际有机的结合起来，锻炼学生的分析解决实际问题的能力。培养学生在项目开发中团队合作精神、创新意识及能力。
3选题依据及内容
我做的是我自己想做的一个MIUI 10的官网。我是参考小米原MIUI 10官网的设计，然后加入了自己的想法做的。这个网页的制作包含了我们所学的浮动，定位，JavaScript等等，还有一些我们未学过的知识。当亲自动手自己做网页的时候并没有自己想想的那么简单也没有那么的难，从一开的无从下手到最后的完成，中间我在网上搜索大量的知识和操作，还在书上资料寻找那些解决问题的办法。通过动手实践，本文转载自http://www.biyezuopin.vip/onews.asp?id=14917觉得我有点喜欢敲代码了，很有成就感，并且对所学的知识进行了巩固，还学了更有意思和难度的方法。
下面就是我所选做的MIUI 10网页主页，MIUI 10介绍子页，登录注册页和下载页这四个页面。
4设计过程
4.1 总体设计
我认为做一个网站首先要明白它的网页设计步骤:
1、确定网站主题
2、分析网站的功能，将网站所有的功能在文档中体现。
3、分析网站的主题，选择符合网站主题的方法。
编写步骤：

1、先用html写出结构。
2、用CSS写出样式。
3、用js写出动态效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MIUI官方网站</title>
<link rel="stylesheet" href="css/index.css" type="text/css"/>
</head>
<body>
<ul class="menu">
<li class="top"><a href="login.html"class="top_link"><span>登录</span></a></li>
<li class="top"><a href="download.html"class="top_link"><span>下载</span></a></li>
<li class="top"><a href="MIUI 10.html"class="top_link"><span>MIUI 10</span></a></li>
<li class="top"><a href="index.html"class="top_link"><span>首页</span></a></li>
</ul>
<div class="b1"><a href="download.html"><img src="img/index/banner.png" width="1920px"/></a></div>
<div class="b2" >
<div class="b3l" ><a href="你点开.txt"><img src="img/index/1.png" />
<h3>MIUI 10稳定版来了</h3>
<p>9月10日起 陆续开放升级</p>
</a></div><div  class="b3" ><a href="你点开.txt"><img src="img/index/1.png" />
<h3>第397周更新公告</h3><p>8.11.29</p>
</a></div>
<div class="b3"  ><a href="你点开.txt"><img src="img/index/2.png" />
<h3>MIUI论坛APP邀您体验</h3><p>全新改版 更好玩、更好用</p>
</a></div>
</div>
<div   class="b5">
<hr/><p  align="center" >第一个网页，他是网页中的主页</p><p align="center">&copy;www.mi.com</p></div>
<audio hidden="true" src="img/download/zippo.mp3" autoplay="autoplay" loop="loop"></audio>
</body>
</html>

基于HTML+CSS+JavaScript的MIUI10官网网站设计与开发相关推荐

HTML5期末大作业：游戏官网网站设计——神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发
HTML5期末大作业:游戏官网网站设计--神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商 ...
HTML+CSS+JS零食官网网站设计——美食零食官网(6页) html网页制作期末美食作业成品_小吃类网页设计期末作业
HTML5期末大作业:零食官网网站设计--美食零食官网(6页) html网页制作期末美食作业成品_小吃类网页设计期文章目录 HTML5期末大作业:零食官网网站设计--美食零食官网(6页) html网 ...
基于HTML+CSS+JavaScript “小味鲜“餐厅网页设计
基于HTML+CSS+JavaScript "小味鲜"餐厅网页设计每博一文案师父说"生活中的负能大多来于圈子里的抱怨",有时候,你不想做别人情绪的垃圾桶. ...
HTML5期末大作业：零食官网网站设计——美食零食官网(6页) html网页制作期末美食作业成品_小吃类网页设计期末作业
HTML5期末大作业:零食官网网站设计--美食零食官网(6页) html网页制作期末美食作业成品_小吃类网页设计期末作业常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. ...
Web大学生网页作业成品——仿腾讯游戏官网网站设计与实现(HTML+CSS+JavaScript)
基于html+css+javascript+jquery+bootstarp响应式网页设计——大理我的家乡旅游景点
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
基于HTML+CSS+JavaScript的在线图书阅读网页设计
目录 1.项目总体设计 2 1.1需求分析 2 1.2网站结构分析 3 1.2.1导航栏 3 1.2.2主体部分 3 1.3网络风格分析 3 1.4网站结构图 3 2.项目详细设计 4 2.1登录页 ...
基于HTML+CSS+JavaScript篮球NBA兴趣交流网页设计
目录 1.项目总体设计 3 1.1需求分析 3 1.2网站结构图 3 2.项目详细设计 4 2.1登录页面设计 4 2.2主页页面设计 5 2.3传奇球队页面设计 6 3.项目总结 7 4.参考文献 ...
简单的学生网页作业源码基于html css javascript仿淘宝购物商城设计毕业论文源码
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...

基于HTML+CSS+JavaScript的MIUI10官网网站设计与开发

基于HTML+CSS+JavaScript的MIUI10官网网站设计与开发相关推荐

最新文章

热门文章