HTM作业-华为手机商城，共5个页面！
部分网页代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>index</title>
<!--导入css连接-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--导入js连接-->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body style="background-color: #F6F6F6;">
<!--顶部导航栏-->
<nav id="top" class="collapse navbar-collapse">
<div class="container">
<div class="row">
<div class="col-xs-6">
<ul class="top-link" style="float: left;">
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">华为官网</a>
</li>
<li>
<a href="#">荣耀官网</a>
</li>
<li>
<a href="#">花粉俱乐部</a>
</li>
<li>
<a href="#">企业购</a>
</li>
<li>
<a href="category.html">更多精彩</a>
</li>
</ul>
</div>
<div class="col-xs-6">
<ul class="top-link">
<li>
<a href="#">华为商城</a>
</li>
<li>
<a href="#">花粉俱乐部</a>
</li>
<li>
<a href="#">EMUI</a>
</li>
<li>
<a href="#">登录</a>
</li>
<li>
<a href="#">注册</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<!--下拉导航-->
<nav id="menu" class="navbar" style="margin-bottom: 0px;">
<div class="container">
<!--压缩之后下拉展示-->
<div class="navbar-header"><span id="heading" class="visible-xs">展示</span>
<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
</div>
<input type="text" id="inputEmail3" placeholder="搜索" style="float: right; display: block; margin: auto 0;" >
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>
<a href="index.html">首页</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">产品</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">关于荣耀</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">新闻评测</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">视频</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">活动</a>
</li>
<li class="dropdown">
<a href="category.html">商品展示</a>
</li>
</ul>
</div>
</div>
</nav>
<!--轮播图片-->
<div id="page-content" class="home-page" style="margin-top:0;">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators hidden-xs">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/lb1.jpg" alt="First slide">
<div class="header-text hidden-xs">
<div class="col-md-12 text-center">
</div>
</div>
</div>
<div class="item">
<img src="img/lb2.jpg" alt="Second slide">
<div class="header-text hidden-xs">
<div class="col-md-12 text-center">
</div>
</div>
</div>
<div class="item">
<img src="img/lb3.jpg" alt="Third slide">
<div class="header-text hidden-xs">
<div class="col-md-12 text-center">
</div>
</div>
</div>
</div>
<!--上一张，下一张-->
<a class="carousel-control-prev" href="#carousel-example-generic" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carousel-example-generic" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
<!--中间图片显示-->
<div class="row" style="margin-left: 0px;margin-right: 0px;">
<div class="banner">
<a href="product.html"><img src="img/show.gif" /></a>
</div>
</div>
<!--相关推荐-->
<div class="row">
<div class="col-lg-12">
<div class="heading">
<h2>相关推荐</h2></div>
<div class="products">
<!--第一个-->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="product" style="background-color: white;padding: 10px 0px 30px 10px;">
<div class="buttons">
<span style="font-size: 25px;color: black;">荣耀20</span><br>
<span>定格奇幻之美</span>
</div>
<div class="image">
<a href="product.html">
<img src="img/phone1.jpg" />
</a>
</div>
<div class="buttons" style="margin-top: 30px;">
<a href="product.html"><img src="img/buy.gif" /></a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="product" style="background-color: white;padding: 10px 0px 30px 0px;">
<div class="buttons">
<span style="font-size: 25px;color: black;">荣耀9X</span><br>
<span>快由“芯”生 超能旗舰</span>
</div>
<div class="image">
<a href="product.html">
<img src="img/phone2.jpg" />
</a>
</div>
<div class="buttons" style="margin-top: 30px;">
<a href="product.html"><img src="img/buy.gif" /></a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="product" style="background-color: white;padding: 10px 0px 30px 0px;">
<div class="buttons">
<span style="font-size: 25px;color: black;">荣耀V30</span><br>
<span>5G标杆 不止于快</span>
</div>
<div class="image">
<a href="product.html">
<img src="img/phone3.jpg" />
</a>
</div>
<div class="buttons" style="margin-top: 30px;">
<a href="product.html"><img src="img/buy.gif" /></a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="product" style="background-color: white;padding: 10px 0px 30px 0px;">
<div class="buttons">
<span style="font-size: 25px;color: black;">荣耀20青春版</span><br>
<span>AMOLED屏幕指纹 解锁你的美</span>
</div>
<div class="image">
<a href="product.html">
<img src="img/phone4.jpg" />
</a>
</div>
<div class="buttons" style="margin-top: 30px;">
<a href="product.html"><img src="img/buy.gif" /></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-left: 0px;margin-right: 0px;">
<div class="banner">
<img src="img/show2.gif" />
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="heading">
<h2>最新消息</h2></div>
<div class="products">
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
<div class="product" style="background-color: white;">
<div class="image">
<a href="product.html">
<img src="img/phone5.png" />
</a>
</div>
<div class="buttons">
<a href="#" style="background-color: white;">5G标杆不止于快 全系5G双模手机荣耀V30</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
<div class="product" style="background-color: white;">
<div class="image">
<a href="product.html"><img src="img/phone6.png" /></a>
</div>
<div class="buttons">
<a href="#" style="background-color: white;">荣耀MagicBook京东平台销量破万台，表现强势！</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-12">
<div class="product" style="background-color: white;">
<div class="image">
<a href="product.html"><img src="img/phone7.png" /></a>
</div>
<div class="buttons">
<a href="#" style="background-color: white;">荣耀20 斩获2000-3000元价位单品销量冠军！</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--下面的大牌图片-->
<div class="row">
<div class="banner mx-0">
<div class="col-sm-6">
<img src="img/show3.gif" />
</div>
<div class="col-sm-6">
<img src="img/show4.gif" />
</div>
</div>
</div>
</div>
</div>
<!--脚步-->
<footer>
<div class="container">
<div class="wrap-footer">
<div class="row">
<!--<div class="col-md-3 col-footer footer-1">
</div>
-->
<div class="col-md-3 col-footer footer-1">
<div class="heading">
<h4>关于荣耀</h4></div>
<ul>
<li>
<a href="#">荣耀锐影像</a>
</li>
<li>
<a href="#">荣耀大事记</a>
</li>
<li>
<a href="#">荣耀人物</a>
</li>
<li>
<a href="#">品牌问题</a>
</li>
<li>
<a href="#">新闻中心</a>
</li>
</ul>
</div>
<div class="col-md-3 col-footer footer-2">
<div class="heading">
<h4>产品</h4></div>
<ul>
<li>
<a href="#">手机</a>
</li>
<li>
<a href="#">荣耀智慧屏</a>
</li>
<li>
<a href="#">笔记本&平板</a>
</li>
<li>
<a href="#">穿戴设备</a>
</li>
<li>
<a href="#">智能家庭</a>
</li>
<li>
<a href="#">配件</a>
</li>
</ul>
</div>
<div class="col-md-3 col-footer footer-3">
<div class="heading">
<h4>快速链接</h4></div>
<ul>
<li>
<a href="#">物料下载</a>
</li>
<li>
<a href="#">移动端官网</a>
</li>
<li>
<a href="#">华为商城</a>
</li>
<li>
<a href="#">华为开发者联盟</a>
</li>
<li>
<a href="#">华为云</a>
</li>
</ul>
</div>
<div class="col-md-3 col-footer footer-4">
<div class="heading">
<h4>联系我们</h4></div>
<ul>
<li><span class="glyphicon glyphicon-home"></span>California, United States 3000009</li>
<li><span class="glyphicon glyphicon-earphone"></span>950800</li>
<li><span class="glyphicon glyphicon-envelope"></span>infor@yoursite.com</li>
</ul>
</div>
</div>
</div>
</div>
<div class="copyright">
<div class="container">
<div class="row">
<span>法律声明 | 隐私声明 | 免责条款 | 关于cookies</span><br />
<span>Copyright © 2011-2019 华为终端有限公司 版权所有 保留一切权利 | 苏公网安备 32011402010006号 粤ICP备19015064号</span>
</div>
</div>
</div>
</footer>
</body>
</html>部分网页截图