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

本是古典何须时尚 2024-04-06 12:55 51阅读 0赞

目录  
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">©www.mi.com</p></div>
    <audio hidden="true" src="img/download/zippo.mp3" autoplay="autoplay" loop="loop"></audio>
    </body>
    </html>

![在这里插入图片描述][f918239f7a334d3f9eb754ae16ba0ab2.png_pic_center]  
![在这里插入图片描述][ab2ff6140da347b192d30ae5637d0ec0.png_pic_center]  
![在这里插入图片描述][8534ff6c34d74bc4a4afa70e01e42c03.png_pic_center]  
![在这里插入图片描述][4a7423bb6ad7412db0d6c81967fc3275.png_pic_center]  
![在这里插入图片描述][09431c527c8c46e7b7eb7f0ddd7808e7.png_pic_center]  
![在这里插入图片描述][c22239df909546bd9a477e2b59b2e259.png_pic_center]  
![在这里插入图片描述][710e4dfcd631466e86014e4d93bd9499.png_pic_center]  
![在这里插入图片描述][3820cc31ab2d4cccaad5fafdf05ac84d.png_pic_center]  
![在这里插入图片描述][0aefe236608f494899d320cc1c3db1f1.png_pic_center]  
![在这里插入图片描述][0e3ece231d854bc5be7e8fb356165d60.png_pic_center]  
![在这里插入图片描述][d5a6105abb374158a5115f4d5e1ced54.png_pic_center]  
![在这里插入图片描述][d49ccc9d4bdd402495f908871e7c1be8.png_pic_center]  
![在这里插入图片描述][63d63f328c9041adb8ae4738238aa835.png_pic_center]  
![在这里插入图片描述][deca3f4bd4cb4bb0b002515cbc6743a9.png_pic_center]  
![在这里插入图片描述][05c73124be194a529bf9646b14914ecd.png_pic_center]  
![在这里插入图片描述][c6041acb4f4a4a40930350cef98e87ab.png_pic_center]  
![在这里插入图片描述][7ead7306adce49cd98823138dae23dae.png_pic_center]  
![在这里插入图片描述][8dad0d8d4ac544c9b8753e18320d6c1e.png_pic_center]  
![在这里插入图片描述][b135fd8c82444a9ea1ccbdf277fc9e90.png_pic_center]  
![在这里插入图片描述][62a9af81312944daa07e6fdba4d8ca05.png_pic_center]  
![在这里插入图片描述][dd2c0c6ed47b48eab49085716d6c878d.png_pic_center]  
![在这里插入图片描述][358d5ebfe7e440f99d24cb3a741565bb.png_pic_center]  
![在这里插入图片描述][e5fc32554be74c25801528afd7bb7b13.png_pic_center]  
![在这里插入图片描述][067b457bda8142ff93e48ab117aed144.png_pic_center]

[f918239f7a334d3f9eb754ae16ba0ab2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/2fa62afce92f4f3faaf6613969b9fdae.png
[ab2ff6140da347b192d30ae5637d0ec0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/c97be8ae4b144f9fbda080f9b3c2a641.png
[8534ff6c34d74bc4a4afa70e01e42c03.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/b49d1ce8f0c64d6786803b41da236686.png
[4a7423bb6ad7412db0d6c81967fc3275.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/37fcd792baaf4d2cad9b41cc8cd4e710.png
[09431c527c8c46e7b7eb7f0ddd7808e7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/7d7f21cb1d6d45f4ab6eede3ce87ec7e.png
[c22239df909546bd9a477e2b59b2e259.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/abe16db82c3d456281c8efbbfe47c6dd.png
[710e4dfcd631466e86014e4d93bd9499.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/fc9d82271ac647739ce903ad04738874.png
[3820cc31ab2d4cccaad5fafdf05ac84d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/fe06cac1991f46f4a5ef43aa32ced2d7.png
[0aefe236608f494899d320cc1c3db1f1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/60989d674fd7477aba95e101fc9e57f6.png
[0e3ece231d854bc5be7e8fb356165d60.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/218bdb6ce1af4400a668d644d6119a98.png
[d5a6105abb374158a5115f4d5e1ced54.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/59e6780ba5cb4eabb6cf5441b4ee4a9e.png
[d49ccc9d4bdd402495f908871e7c1be8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/c38149b26ff04e9c9996ac7254655ce1.png
[63d63f328c9041adb8ae4738238aa835.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/5c2ead364cc14cbca570ca4d66f76a68.png
[deca3f4bd4cb4bb0b002515cbc6743a9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/0f3eac61aa664a37bc5352c237348c35.png
[05c73124be194a529bf9646b14914ecd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/0776bd4246d54949b326bcd0dc53850c.png
[c6041acb4f4a4a40930350cef98e87ab.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/75ab5f11e4604005b4523c73b4f98be5.png
[7ead7306adce49cd98823138dae23dae.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/3ffa74dd55c64fed90f626859e2cbeb4.png
[8dad0d8d4ac544c9b8753e18320d6c1e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/b6c1c3e5454b4b03808dcbf29399296d.png
[b135fd8c82444a9ea1ccbdf277fc9e90.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/a03edd155335436ea7d020c70600a7fb.png
[62a9af81312944daa07e6fdba4d8ca05.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/16d02df1879449adbfa983dd515e4132.png
[dd2c0c6ed47b48eab49085716d6c878d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/e018741265754c458d5e76a420a898b6.png
[358d5ebfe7e440f99d24cb3a741565bb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/1937f5e2d8e743d4877094957bce7ee6.png
[e5fc32554be74c25801528afd7bb7b13.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/d3979ed5a5e840dca465ec7c29784d2c.png
[067b457bda8142ff93e48ab117aed144.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/516eded092cb4df0b8355ac2c5f9ddbe.png