<!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
评论1