15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > HTML5期末大作业:网页设计——小米商城官网首页(1页) HTML+CSS+JavaScript web期末作

HTML5期末大作业:网页设计——小米商城官网首页(1页) HTML+CSS+JavaScript web期末作

时间:2023-09-28 02:18:01 | 来源:网站运营

时间:2023-09-28 02:18:01 来源:网站运营

HTML5期末大作业:网页设计——小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品:

HTML5期末大作业:网页设计——小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
作者主页-更多源码

HTML期末大作业文章专栏

作品介绍

1.网页作品简介 :HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局。

2.网页作品编辑:作品下载后可使用任意HTML编辑软件(如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页)。

3.网页作品技术:Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等,视频、 音频元素 、Flash,同时设计了logo(源文件),基本期末作业所需的知识点全覆盖。

@TOC

一、作品展示







二、文件目录







三、代码实现

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/xiaomi.css"/> <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> <script src="js/jquery.animate-colors-min.js"></script></head><body> <div class="head_box"> <div id="head_wrap"> <div id="head_nav"> <a class="head_nav_a">大米网</a> <span>|</span> <a class="head_nav_a">MIUI</a> <span>|</span> <a class="head_nav_a">米聊</a> <span>|</span> <a class="head_nav_a">游戏</a> <span>|</span> <a class="head_nav_a">多看阅读</a> <span>|</span> <a class="head_nav_a">云服务</a> <span>|</span> <a class="head_nav_a">大米移动版</a> <span>|</span> <a class="head_nav_a">问题反馈</a> <span>|</span> <a class="head_nav_a" id="Select_Region_but">Select Region</a> </div> <div id="head_right"> <div id="head_landing"> <a class="head_nav_a">登陆</a> <span>|</span> <a class="head_nav_a">注册</a> </div> <div id="head_car"> <a class="head_car_text">购物车(0)</a> <div id="car_content" style="height: 0px;width:0px ;background-color: #edffc6;z-index: 999"> <a class="car_text"></a> </div> </div> </div> </div> </div> <div id="main_head_box"> <div id="menu_wrap"> <div id="menu_logo"> <img src="img/xiaomi_logo.png"> </div> <div id="menu_nav"> <ul> <li class="menu_li" control="xiaomiphone">大米手机</li> <li class="menu_li" control="hongmiphone">红米</li> <li class="menu_li" control="pingban">平板</li> <li class="menu_li" control="tv">电视&nbsp;&nbsp;盒子</li> <li class="menu_li" control="luyou">路由器</li> <li class="menu_li" control="yingjian">智能硬件</li> <li><a>服务</a></li> <li><a>社区</a></li> </ul> </div> <div id="find_wrap"> <div id="find_bar"> <input type="text" id="find_input"> </div> <div id="find_but">GO</div> </div> </div> </div> <div id="menu_content_bg" style="height: 0px;"> <div id="menu_content_wrap"> <ul style="top: 0px;"> <li id="xiaomiphone"> <div class="menu_content"> <img src="img/mi4!160x110.jpg"> <p class="menu_content_tit">大米手机4</p> <p class="menu_content_price">1499元起</p> </div> <span class="menu_content_line"></span> <div class="menu_content"> <img src="img/minote!160x110.jpg"> <p class="menu_content_tit">大米NOTE标准版</p> <p class="menu_content_price">1999元起</p> </div> <span class="menu_content_line"></span> <div class="menu_content"> <img src="img/minotepro!160x110.jpg"> <p class="menu_content_tit">大米NOTE顶配版</p> <p class="menu_content_price">2999元起</p> </div> </li> <li id="hongmiphone"> <div class="menu_content"> <img src="img/hongmi2a!160x110.jpg"> <p class="menu_content_tit">红米手机2A</p> <p class="menu_content_price">499元</p> </div> <span class="menu_content_line"></span> <div class="menu_content"> <img src="img/hongmi2!160x110.jpg"> <p class="menu_content_tit">红米手机2</p> <p class="menu_content_price">599元</p> </div> <span class="menu_content_line"></span> <div class="menu_content"> <img src="img/note!160x110.jpg"> <p class="menu_content_tit">红米NOTE</p> <p class="menu_content_price">699元</p> </div> <span class="menu_content_line"></span> <div class="menu_content"> <img src="img/note2!160x110.jpg"> <p class="menu_content_tit">红米NOTE2</p> <p class="menu_content_price">799元</p> </div> </li> <li id="pingban"> <div class="menu_content"> <img src="img/mipad16!160x110.jpg"> <p class="menu_content_tit">大米平板16G</p> <p class="menu_content_price">1299元</p> </div> <span class="menu_content_line"></span> <div class="menu_content"> <img src="img/mipad64!160x110.jpg"> <p class="menu_content_tit">大米平板64G</p> <p class="menu_content_price">1499元起</p> </div> </li> <li id="tv"> <div class="menu_content"> <img src="img/mitv40!160x110.jpg"> <p class="menu_content_tit">大米电视2&nbsp;40英寸</p> <p class="menu_content_price">1999元</p> </div> <span class="menu_content_line"></span> <div class="menu_content"> <img src="img/mitv48!160x110.jpg"> <p class="menu_content_tit">大米电视2S&nbsp;48英寸</p> <p class="menu_content_price">2999元起</p> </div> <span class="menu_content_line"></span> <div class="menu_content"> <img src="img/mitv49!160x110.jpg"> <p class="menu_content_tit">大米电视2&nbsp;49英寸</p> <p class="menu_content_price">3399元起</p> </div> <span class="menu_content_line"></span> <div class="menu_content"> <img src="img/mitv55!160x110.jpg"> <p class="menu_content_tit">大米电视2&nbsp;55英寸</p> <p class="menu_content_price">4499元起</p> </div> <span class="menu_content_line"></span> <div class="menu_content"> <img src="img/hezimini!160x110.jpg"> <p class="menu_content_tit">大米盒子MINI版</p> <p class="menu_content_price">199元</p> </div> <span class="menu_content_line"></span> <div class="menu_content"> <img src="img/hezis!160x110.jpg"> <p class="menu_content_tit">大米盒子增强版</p> <p class="menu_content_price">299元</p> </div> </li> <li id="luyou"> <div class="menu_content"> <img src="img/miwifi!160x110.jpg"> <p class="menu_content_tit">全新大米路由器</p> <p class="menu_content_price">699元起</p> </div> <span class="menu_content_line"></span> <div class="menu_content"> <img src="img/miwifimini!160x110.jpg"> <p class="menu_content_tit">大米路由器&nbsp;MINI</p> <p class="menu_content_price">129元</p> </div> <span class="menu_content_line"></span> <div class="menu_content"> <img src="img/miwifilite!160x110.jpg"> <p class="menu_content_tit">大米路由器&nbsp;青春版</p> <p class="menu_content_price">79元</p> </div> <span class="menu_content_line"></span> <div class="menu_content"> <img src="img/wifiExtension!160x110.jpg"> <p class="menu_content_tit">大米WIFI放大器</p> <p class="menu_content_price">39元</p> </div> </li> <li id="yingjian"> <div class="menu_content"> <img src="http://c1.mifile.cn/f/i/15/goods/nav/scale!160x110.jpg"> <p class="menu_content_tit">体重称</p> <p class="menu_content_price">99元</p> </div> <span class="menu_content_line"></span> <div class="menu_content"> <img src="img/xiaoyi!160x110.jpg"> <p class="menu_content_tit">摄像头</p> <p class="menu_content_price">129元起</p> </div> <span class="menu_content_line"></span> <div class="menu_content"> <img src="img/yicamera!160x110.jpg"> <p class="menu_content_tit">运动相机</p> <p class="menu_content_price">399元起</p> </div> <span class="menu_content_line"></span> <div class="menu_content"> <img src="img/ihealth!160x110.jpg"> <p class="menu_content_tit">血压计</p> <p class="menu_content_price">199元</p> </div> <span class="menu_content_line"></span> <div class="menu_content"> <img src="img/chazuo!160x110.jpg"> <p class="menu_content_tit">智能插座</p> <p class="menu_content_price">59元</p> </div> <span class="menu_content_line"></span> <div class="menu_content"> <img src="img/smart!160x110.jpg"> <p class="menu_content_tit">查看全部 <br>智能硬件</p> </div> </li> </ul> </div> </div> <div id="big_banner_wrap"> <ul id="banner_menu_wrap"> <li class="active"img> <a>手机&nbsp;平板</a> <a class="banner_menu_i">&gt;</a> <div class="banner_menu_content" style="width: 600px; top: -20px;"> <ul class="banner_menu_content_ul"> <li> <a><img src="img/minote.jpg"></a><a>大米NOTE</a><span>选购</span></li> <li> <a><img src="img/mi4.jpg"></a><a>大米手机4</a><span>选购</span></li> <li> <a><img src="img/hongmi2.jpg"></a><a>红米手机2</a><span>选购</span></li> <li> <a><img src="img/hongmi2a.jpg"></a><a>红米手机2A</a><span>选购</span></li> <li> <a><img src="img/note2.jpg"></a><a>红米NOTE2</a><span>选购</span></li> <li> <a><img src="img/note2.jpg"></a><a>红米NOTE&nbsp;4G双卡</a><span>选购</span></li> </ul> <ul class="banner_menu_content_ul"> <li> <a><img src="img/mipad.jpg"></a><a>大米平板</a><span>选购</span></li> <li> <a><img src="img/telcom.jpg"></a><a>电信版</a></li> <li> <a><img src="img/heyue.jpg"></a><a>合约机</a></li> <li> <a><img src="img/zhongxin.jpg"></a><a>中信特权</a></li> <li> <a><img src="img/compare.jpg"></a><a>对比手机</a></li> </ul> </div> </li> <li> <a>电视&nbsp;盒子</a> <a class="banner_menu_i">&gt;</a> <div class="banner_menu_content" style="width: 600px; top: -62px;"> <ul class="banner_menu_content_ul"> <li> <a><img src="img/tv40.jpg"></a><a>大米电视40英寸</a></li> <li> <a><img src="img/tv48.jpg"></a><a>大米电视48英寸</a></li> <li> <a><img src="img/tv49.jpg"></a><a>大米电视49英寸</a></li> <li> <a><img src="img/hezis.jpg"></a><a>大米电视55英寸</a></li> <li> <a><img src="img/hezis.jpg"></a><a>大米盒子</a></li> <li> <a><img src="img/hezis.jpg"></a><a>大米盒子MINI</a></li> </ul> <ul class="banner_menu_content_ul"> <li> <a><img src="img/dianshipeijian.jpg"></a><a>大米电视配件</a><span>选购</span></li> </ul> </div> </li> <li> <a>路由器&nbsp;智能配件</a> <a class="banner_menu_i">&gt;</a> <div class="banner_menu_content" style="width: 900px; top: -104px;"> <ul class="banner_menu_content_ul"> <li> <a><img src="img/miwifi.jpg"></a><a>大米路由器</a></li> <li> <a><img src="img/miwifilite.jpg"></a><a>大米路由器&nbsp;青春版</a></li> <li> <a><img src="img/air.jpg"></a><a>净化器</a></li> <li> <a><img src="img/xiaoyi.jpg"></a><a>摄像机</a></li> <li> <a><img src="img/scale.jpg"></a><a>体重称</a></li> <li> <a><img src="img/scale.jpg"></a><a>智能插头</a></li> </ul> <ul class="banner_menu_content_ul"> <li> <a><img src="img/miwifimini.jpg"></a><a>大米路由器MINI</a></li> <li> <a><img src="img/wifiExtension.jpg"></a><a>大米WIFI放大器</a></li> <li> <a><img src="img/yicamera.jpg"></a><a>运动相机</a></li> <li> <a><img src="img/water.jpg"></a><a>净水器</a></li> <li> <a><img src="img/ihealth.jpg"></a><a>血压计</a></li> <li> <a><img src="img/ihealth.jpg"></a><a>床头灯</a></li> </ul> <ul class="banner_menu_content_ul"> <li> <a><img src="img/zhinengtaozhuang.jpg"></a><a>智能家庭套装</a></li> <li> <a><img src="img/shouhuan.jpg"></a><a>大米手环</a></li> <dd>预约亲临到店服务</dd> </dl> <dl> <dt>关注我们</dt> <dd>新浪微博</dd> <dd>大米部落</dd> <dd>官方微信</dd> </dl> </div> <div class="foot_bottom_r"> <a>400-100-5678</a> <a>周一至周日 8:00-18:00</a> <a>(仅收市话费)</a> <span> 24小时在线客服</span> </div> </div> </div> <div class="foot_note_box"> <div class="foot_note_wrap"> <div class="foot_note_con"> <span class="foot_logo"><img src="img/mi-logo.png" width="38px" height="38px"></span> <span class="foot_note_txt"> <a>大米网</a><h>|</h><a>MIUI</a><h>|</h><a>米聊</a><h>|</h><a>多看书城</a><h>|</h><a>大米路由器</a><h>|</h><a>大米后院</a><h>|</h><a>大米天猫店</a><h>|</h><a>大米淘宝直营店</a><h>|</h><a>大米网盟</a><h>|</h><a>问题反馈</a><h>|</h><a>Select Region</a> <a> 5555555号</a> </span> </div> </div> </div> </div><script type="text/javascript" src="js/xiaomi.js"></script></body></html>






四、学习资料

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程) 适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站





五、完整源码

作者主页-更多源码

HTML期末大作业文章专栏

~ 关注我,点赞博文~ 每天带你涨知识!

相关问题可以相互学习,可关注↓公Z号 获取更多源码 !

【百度网盘-源码下载地址】

链接:https://pan.baidu.com/s/1T5XeFJ7WE2ASbylHE2sRMA 提取码:8888


六、更多源码

HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他* 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!



关键词:设计,作业,小米,商城

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭