<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!-- 页面标题 -->
<title>小米商城</title>
<!-- 使用外部样式表 -->
<link href="css/index.css" type="text/css" rel="stylesheet" />
<!-- Bootstrap4 前端框架的搭建与安装-->
<!-- 为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<!-- 导航及顶部样式 -->
<div id="index-top-background">
<!--运用<nav>标签引入导航栏 ，并加入类命名器，命名为navbar navbar-expand-sm bg-dark navbar-dark fixed-top，已达到使用Bootstrap4框架来使导航栏固定在顶部的目的。-->
<nav id="index-top-box" class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<div id="index-top-list">
<!-- 使用超链接标签<a>设置导航 -->
<a href="" class="index-top-list-word">小米商城</a>
<span>|</span>
<a href="" class="index-top-list-word">MIUI</a>
<span>|</span>
<a href="" class="index-top-list-word">IoT</a>
<span>|</span>
<a href="" class="index-top-list-word">云服务</a>
<span>|</span>
<a href="" class="index-top-list-word">金融</a>
<span>|</span>
<a href="" class="index-top-list-word">有品</a>
<span>|</span>
<a href="" class="index-top-list-word">小爱平台</a>
<span>|</span>
<a href="" class="index-top-list-word">企业团购</a>
<span>|</span>
<a href="" class="index-top-list-word">资质证照</a>
<span>|</span>
<a href="" class="index-top-list-word">协议规则</a>
<span>|</span>
<a href="" class="index-top-list-word">下载app</a>
<span>|</span>
<a href="" class="index-top-list-word">Select Region</a>
</div>
<div id="index-top-cart">
<!-- 使用超链接<a href="cart.html">，链接至购物车页面 -->
<a id="index-top-cart-box" href="cart.html">购物车</a>
</div>
<div id="index-top-info">
<!-- 使用超链接<a href="login.html" >，链接至登录页面 -->
<a href="login.html" class="index-top-list-word">登录</a>
<span>|</span>
<!-- 使用超链接，没有链接至任何页面 -->
<a href="" class="index-top-list-word">注册</a>
<span>|</span>
<a href="" class="index-top-list-word">消息通知</a>
</div>
</nav>
</div>
<div id="index-search">
<div id="index-search-box">
<div style="width: 18%;height: 100px;float: left;">
<!-- 使用标签<img src="pic/1/0000.jpg">插入图片 -->
<img src="pic/1/0000.jpg" width="60px" height="60px" style="padding-top: 18px">
</div>
<div style="width:650px;height: 50px;float: left;padding-top: 40px;font-size: 16px">
<!-- 使用超链接标签<a>设置导航 -->
<a href="" class="index-text">小米手机</a>
<a href="" class="index-text">RedMi 红米</a>
<a href="" class="index-text">电视</a>
<a href="" class="index-text">笔记本</a>
<a href="" class="index-text">家电</a>
<a href="" class="index-text">路由器</a>
<a href="" class="index-text">智能硬件</a>
<a href="" class="index-text">服务</a>
<a href="" class="index-text">社区</a>
</div>
<div style="float: right;width: 296px;margin-top: 25px">
<!-- 使用标签<form><input type="text" value="小米9">设置表单作为搜索框，并将小米9作为默认值 -->
<form style="position: relative;height: 50px;width: 296px;margin: 0;line-height: 21px;">
<input type="text" value="小米9" id="box-search" >
<!-- 使用超链接标签<a> -->
<a href="" id="box-submit" style="text-decoration:none;">搜索</a>
</form>
</div>
</div>
</div>
<!-- 首页正文 -->
<div id="index-list">
<div style="width: 18%;height: 486px;background: #5c5c5c;padding-top: 14px;color: white;float: left">
<div class="index-list-word">
<!-- 使用<ul><li>标签无序列表来设置商品列表 -->
<ul>
<li><a href="" style="height: 100%; width: 100%;color: white;text-decoration: none;float: left;">
手机
<!-- 使用<span><li>标签设置出箭头>的效果，<i>标签显示斜体文本效果 -->
<span style="float: right;margin-right: 30%"><i class="fa fa-chevron-right fa-lg" style="padding-top: 40%"> > </i></span>
</a></li>
<li><a href="" style="height: 100%; width: 100%;color: white;text-decoration: none;float: left;">
电视
<span style="float: right;margin-right: 30%"><i class="fa fa-chevron-right fa-lg" style="padding-top: 40%"> > </i></span>
</a></li>
<li><a href="" style="height: 100%; width: 100%;color: white;text-decoration: none;float: left;">
笔记本
<span style="float: right;margin-right: 30%"><i class="fa fa-chevron-right fa-lg" style="padding-top: 40%"> > </i></span>
</a></li>
<li><a href="" style="height: 100%; width: 100%;color: white;text-decoration: none;float: left;">
家电
<span style="float: right;margin-right: 30%"><i class="fa fa-chevron-right fa-lg" style="padding-top: 40%"> > </i></span>
</a></li>
<li><a href="" style="height: 100%; width: 100%;color: white;text-decoration: none;float: left;">
出行
<span style="float: right;margin-right: 30%"><i class="fa fa-chevron-right fa-lg" style="padding-top: 40%"> > </i></span>
</a></li>
<li><a href="" style="height: 100%; width: 100%;color: white;text-decoration: none;float: left;">
路由器
<span style="float: right;margin-right: 30%"><i class="fa fa-chevron-right fa-lg" style="padding-top: 40%"> > </i></span>
</a></li>
<li><a href="" style="height: 100%; width: 100%;color: white;text-decoration: none;float: left;">
电源
<span style="float: right;margin-right: 30%"><i class="fa fa-chevron-right fa-lg" style="padding-top: 40%"> > </i></span>
</a></li>
<li><a href="" style="height: 100%; width: 100%;color: white;text-decoration: none;float: left;">
健康
<span style="float: right;margin-right: 30%"><i class="fa fa-chevron-right fa-l
高仿小米商城网页整套源代码.zip （42个子文件） 
高仿小米商城网页整套源代码 
cart.html 10KB css 
pay.css 758B dingbu.css 1KB style.css 6KB index.css 4KB login.html 10KB detail.html 9KB index.html 19KB pay.html 4KB pic 1 
1-2-1.jpg 139KB 1-7.jpg 28KB
1-4-1.png 418KB 002.jpg 83KB 0000.jpg 12KB pay_2.png 3KB 1-4-3.jpg 337KB 10-3.jpg 20KB pay_3.png 17KB 1-2-2.png 1.15MB 1-4.png 38KB 001_2.jpg 139KB 1-1-3.jpg 365KB 1-1-2.jpg 243KB 1-2.jpg 29KB 1-3.jpg 25KB 1-6.jpg 25KB 3.jpg 69KB 0002.jpg 12KB 0001.jpg 12KB 1-1-1.jpg 140KB 1-8.jpg 27KB login_3.png 3KB pay_4.jpg 41KB 1-5.png 11KB xm96g128g.jpg 6KB 1.jpg 86KB 1-1.jpg 25KB pay_1.png 34KB 1-4-2.jpg 411KB tip.jpg 68KB 2.jpg 31KB 1-2-3.jpg 578KB
SmartApe
- 粉丝: 3
- 资源: 4
最新资源
- GLIM标准在诊断不同疾病营养不良中的现状.pdf
- 机器学习常用的库和模块以及类和函数用途速查大全V1.0（手工整理，包含769个库和模块，1699个类和函数）
- LOXL1与TGF-β相关分子作用路径的预测.pdf
- NiFe2O4多层空心磁性粒子的制备与电磁性能.pdf
- qiankun's demo
- NLR、GPR及25-(OH)水平与阻塞性睡眠呼吸暂停低通气综合征患者颈动脉内膜中层厚度关系的研究进展.pdf
- PEO-ZnO缓冲层对Li LATP界面稳定性的研究.pdf
- Zn掺杂KBiFe2O5的合成及性能研究.pdf
- Sn对ZK60镁合金铸态组织与力学性能的影响.pdf
- X衍射K值法定量相测定碳硫硅钙石含量的研究.pdf
- 钡铁氧体与羰基铁复合材料的吸波性能研究.pdf
- 闭孔泡沫铝研究进展.pdf
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论1