HTML5期末大作业:商城网站设计——小米商城官网首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码


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

1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多?
2.没有合适的模板?等等一系列问题。你想要解决的问题,在这篇博文中基本都能满足你的需求~
3.原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,这是一个不错的网页制作,画面精明,非常适合初学者学习使用。


作品介绍

​​1.网页作品简介​​ :HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局。包含:​​主页、关于我们、登录、注册,​​总共4个页面。

​​2.网页作品编辑​​:此作品为学生期末大作业网页设计题材,代码为简单学生水平 html+css 布局制作,作品下载后可使用任意HTML编辑软件(例如:​​DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++​​ 等任意HTML软件编辑修改网页)。

​​3.网页作品布局​​:网页布局整体为响应式布局、LOGO、导航、主体内容布局。子页面多种布局,兴趣爱好内容使用图片列表布局,成绩页面插入了表格,联系我们使用图片对齐方式设置了左对齐。

​​4.网页作品技术​​:使用DIV+CSS制作网页, 背景图、音乐、视频、flash、鼠标经过及选中导航变色效果、下划线 、等。 表单提交、评论留言,并使用JavaScript制作了表单判断(提交时表单不能为空)。

文章目录

一、作品展示

HTML5期末大作业:商城网站设计——小米商城官网首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码..._cocoa

二、文件目录

HTML5期末大作业:商城网站设计——小米商城官网首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码..._html5_02

三、代码实现

<!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">></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">></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">></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>
<li>
<a><img src="img/smart.jpg"></a><a>全部智能硬件</a></li>
</ul>
</div>
</li>
<li>
<a>移动电源&nbsp;插线板</a>
<a class="banner_menu_i">></a>
<div class="banner_menu_content" style="width: 300px; top: -146px;">
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/dianyuan.jpg "></a><a>大米移动电源</a></li>
<li>
<a><img src="img/powerscript.jpg"></a><a>大米插线板</a></li>
<li>
<a><img src="img/yidongdianyuan.jpg"></a><a>品牌移动电源</a></li>
<li>
<a><img src="img/dianyuanfujian.jpg"></a><a>移动电源附件</a></li>
</ul>
</div>
</li>
<li>
<a>耳机&nbsp;音箱</a>
<a class="banner_menu_i">></a>
<div class="banner_menu_content" style="width: 300px; top: -188px;">
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/headphone.jpg"></a><a>大米头戴式耳机</a></li>
<li>
<a><img src="img/huosai.jpg"></a><a>大米活塞耳机</a></li>
<li>
<a><img src="img/bluetoothheadset.jpg"></a><a>大米蓝牙耳机</a></li>
<li>
<a><img src="img/erji.jpg"></a><a>品牌耳机</a></li>
<li>
<a><img src="img/yinxiang.jpg"></a><a>音箱</a></li>
</ul>
</div>
</li>
<li>
<a>电池&nbsp;存储卡</a>
<a class="banner_menu_i">></a>
<div class="banner_menu_content" style="width: 300px; top: -230px;">
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/dianchi.jpg"></a><a>电池</a></li>
<li>
<a><img src="img/chongdian.jpg"></a><a>充电器</a></li>
<li>
<a><img src="img/xiancai.jpg"></a><a>线材</a></li>
<li>
<a><img src="img/cunchu.jpg"></a><a>存储卡</a></li>
</ul>
</div>
</li>
<li>
<a>保护套&nbsp;后盖</a>
<a class="banner_menu_i">></a>
<div class="banner_menu_content" style="width: 300px; top: -272px;">
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/baohu.jpg"></a><a>保护套/保护壳</a></li>
<li>
<a><img src="img/hougai.jpg"></a><a>后盖</a></li>
</ul>
</div>
</li>
<li>
<a>贴膜&nbsp;其它配件</a>
<a class="banner_menu_i">></a>
<div class="banner_menu_content" style="width: 600px; top: -314px;">
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/tiemo.jpg"></a><a>贴膜</a></li>
<li>
<a><img src="img/zipaigan.jpg"></a><a>自拍杆</a></li>
<li>
<a><img src="img/zipaigan.jpg"></a><a>蓝牙手柄</a></li>
<li>
<a><img src="img/tizhi.jpg"></a><a>贴纸</a></li>
<li>
<a><img src="img/fangchensai.jpg"></a><a>防尘塞</a></li>
<li>
<a><img src="img/fangchensai.jpg"></a><a>手机支架</a></li>
</ul>
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/raoxian.jpg"></a><a>耳机绕线器</a></li>
<li>
<a><img src="img/wifi.jpg"></a><a>随身WIFI</a></li>
</ul>
</div>
</li>
<li>
<a>米兔&nbsp;服装</a>
<a class="banner_menu_i">></a>
<div class="banner_menu_content" style="width: 300px; top: -356px;">
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/mitu.jpg"></a><a>米兔</a></li>
<li>
<a><img src="img/fuzhuang.jpg"></a><a>服装</a></li>
</ul>
</div>
</li>
<li>
<a>背包&nbsp;其它周边</a>
<a class="banner_menu_i">></a>
<div class="banner_menu_content" style="width: 300px; top: -398px;">
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/bag.jpg"></a><a>背包</a></li>
<li>
<a><img src="img/shubiaodian.jpg"></a><a>大米鼠标坠</a></li>
<li>
<a><img src="img/zhoubian.jpg"></a><a>生活周边</a></li>
<li>
<a><img src="img/wan.jpg"></a><a>玩酷产品</a></li>
</ul>
</div>
</li>
</ul>
<div id="big_banner_pic_wrap">
<ul id="big_banner_pic">
<li><img src="img/T1hiDvBvVv1RXrhCrK.jpg"></li>
<li><img src="img/T1jrxjB_VT1RXrhCrK.jpg"></li>
<li><img src="img/T1oTJjBKKT1RXrhCrK.jpg"></li>
<li><img src="img/T1RICjB7DT1RXrhCrK.jpg"></li>
<li><img src="img/T1vWdTBKDv1RXrhCrK.jpg"></li>
</ul>
</div>
<div id="big_banner_change_wrap">
<div id="big_banner_change_prev"> <</div>
<div id="big_banner_change_next">></div>
</div>
</div>
<div id="head_other_wrap">
<div id="head_other">
<ul>
<li>
<div id="div1">
<p>START</p>
<p>开房购买</p>
</div>
</li>
<li>
<div id="div2">
<p>GROUND</p>
<p>企业团购</p>
</div>
</li>
<li>
<div id="div3">
<p>RETROFIT</p>
<p>官方产品</p>
</div>
</li>
<li>
<div id="div4">
<p>CHANNEL</p>
<p>F码通道</p>
</div>
</li>
<li>
<div id="div5">
<p>RECHARGE</p>
<p>话费充值</p>
</div>
</li>
<li>
<div id="div6">
<p>SECURITY</p>
<p>防伪检查</p>
</div>
</li>
</ul>
</div>
<div class="head_other_ad"><img src="img/T184E_BQWT1RXrhCrK.jpg"></div>
<div class="head_other_ad"><img src="img/T1yvd_BQDT1RXrhCrK.jpg"></div>
<div class="head_other_ad"><img src="img/T1mahQBmKT1RXrhCrK.jpg"></div>
</div>
<div id="head_hot_goods_wrap">
<div id="head_hot_goods_title">
<span class="title_span">大米明星单品</span>
<div id="head_hot_goods_change">
<span id="head_hot_goods_prave"><</span>
<span id="head_hot_goods_next">></span>
</div>
</div>
<div id="head_hot_goods_content">
<ul>
<li>
<a><img src="img/T1riKjB7VT1RXrhCrK.jpg"></a>
<a>大米电视2/2S 全系列</a>
<a>40/48/49/55英寸 现货购买</a>
</li>
<li>
<a><img src="img/T19AbjBCDT1RXrhCrK.jpg"></a>
<a>大米平板</a>
<a>全球首款 NVIDIA Tegra K1 平板</a>
</li>
<li>
<a><img src="img/T1meZjBCAT1RXrhCrK.jpg"></a>
<a>大米盒子增强版 1G</a>
<a>首款4K超高清网络机顶盒</a>
</li>
<li>
<a><img src="img/T1tsEgB7DT1RXrhCrK.jpg"></a>
<a>全新大米路由器</a>
<a>顶配路由器,企业级性能</a>
</li>
<li>
<a><img src="img/T10TJjB5hT1RXrhCrK.jpg"></a>
<a>大米头戴式耳机</a>
<a>媲美主流千元级头戴耳机</a>
</li>
<li>
<a><img src="img/T1hLhjB_AT1RXrhCrK.jpg"></a>
<a>大米插线板</a>
<a>3重安全保护,插线板中的艺术品</a>
</li>
<li>
<a><img src="img/T1KDAjBCAT1RXrhCrK.jpg"></a>
<a>大米路由器mini</a>
<a>主流双频AC智能路由器</a>
</li>
<li>
<a><img src="img/T16eEjBKhT1RXrhCrK.jpg"></a>
<a>大米移动电源10000mAh</a>
<a>高密度进口电芯,仅名片大小</a>
</li>
<li>
<a><img src="img/T1JnWjBCCT1RXrhCrK.jpg"></a>
<a>大米蓝牙耳机</a>
<a>2015德国IF大奖,高清通话音质</a>
</li>
<li>
<a><img src="img/T1BsbjBvLT1RXrhCrK.jpg"></a>
<a>大米活塞耳机</a>
<a>2015红点奖,独家音质优化专利</a>
</li>
</ul>
</div>
</div>
<div id="main_show_box">
<div id="floor_1">
<div id="floor_head">
<span class="title_span">智能硬件</span>
</div>
</div>
<div class="floor_goods_wrap">
<ul>
<li class="floor_goods_wrap_li">
<a><img src="img/T1IhLjBC_T1RXrhCrK.jpg"></a>
</li>
<li class="floor_goods_wrap_li">
<a class="floor_goods_img"><img src="img/T1odEjB5bT1RXrhCrK.jpg"></a>
<a class="floor_goods_tit">大米智能家庭套装</a>
<a class="floor_goods_txt">3分钟快速安装,30多种智能玩法</a>
<a class="floor_goods_price">199元</a>
</li>
<li class="floor_goods_wrap_li">
<a class="floor_goods_img"><img src="img/T1JKxvBXhv1RXrhCrK.jpg"></a>
<a class="floor_goods_tit">大米随身WIFI 8GB U盘版</a>
<a class="floor_goods_txt">随身上网神器,内置8GB U盘</a>
<a class="floor_goods_price">49.9元</a>
</li>
<li class="floor_goods_wrap_li">
<a class="floor_goods_img"><img src="img/T18yZQBCET1RXrhCrK.jpg"></a>
<a class="floor_goods_tit">小蚁智能摄像机</a>
<a class="floor_goods_txt">能看能听能说,手机远程观看</a>
<a class="floor_goods_price">149元</a>
</li>
<li class="floor_goods_wrap_li">
<a class="floor_goods_img"><img src="img/T1YoZQByYT1RXrhCrK.jpg"></a>
<a class="floor_goods_tit">大米体重称</a>
<a class="floor_goods_txt">高精度压力传感器 | 手机管理全家健康</a>
<a class="floor_goods_price">99元</a>
</li>
<li class="floor_goods_wrap_li">
<a class="floor_goods_img"><img src="img/T16nVjBCKT1RXrhCrK.jpg"></a>
<a class="floor_goods_tit">小蚁运动机</a>
<a class="floor_goods_txt">边玩边录边拍,手机随时分享</a>
<a class="floor_goods_price">399元</a>
</li>
<li class="floor_goods_wrap_li">
<a class="floor_goods_img"><img src="img/T18zWQB4WT1RXrhCrK.jpg"></a>
<a class="floor_goods_tit">大米路由器 mini</a>
<a class="floor_goods_txt">主流双频AC智能路由器,性价比之王</a>
<a class="floor_goods_price">129元</a>
</li>
<li class="floor_goods_wrap_li">
<a class="floor_goods_img"><img src="img/T1oixjB5bT1RXrhCrK.jpg"></a>
<a class="floor_goods_tit">大米智能插座</a>
<a class="floor_goods_txt">手机远程遥控开关,带USB接口</a>
<a class="floor_goods_price">59元</a>
</li>
<li class="floor_goods_wrap_li">
<a class="floor_goods_img"><img src="img/T1KzbQBvbT1RXrhCrK.jpg"></a>
<a class="floor_goods_tit">大米水质TDS检测笔</a>
<a class="floor_goods_txt">准确检测家中水质纯度</a>
<a class="floor_goods_price">39元</a>
</li>
<div style="clear:both;"></div>
</ul>
</div>
</div>
<div id="foot_box">
<div id="foot_wrap">
<div class="foot_top">
<ul>
<li>1小时快修服务</li>
<li class="font_top_i">|</li>
<li>7天无理由退货</li>
<li class="font_top_i">|</li>
<li>15天免费换货</li>
<li class="font_top_i">|</li>
<li>满150元包邮</li>
<li class="font_top_i">|</li>
<li>520余家售后网点</li>
</ul>
</div>
<div class="foot_bottom">
<div class="foot_bottom_l">
<dl>
<dt>帮助中心</dt>
<dd>购物指南</dd>
<dd>支付方式</dd>
<dd>配送方式</dd>
</dl>
<dl>
<dt>服务支持</dt>
<dd>售后政策</dd>
<dd>自助服务</dd>
<dd>相关下载</dd>
</dl>
<dl>
<dt>大米之家</dt>
<dd>大米之家</dd>
<dd>服务网点</dd>
<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前端(学习资料)

​​web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)​​

适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站​​

HTML5期末大作业:商城网站设计——小米商城官网首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码..._css_03