（27）-- 用Bootstrap写的OPPO官网商城
糜雪峰
#用Bootstrap写的OPPO官网商城首页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
body,ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
body{
height: 3000px;
padding-top:20px;
}
.item1,.item2,.item3,.item4{
width: 186px;
height: 140px;
float: left;
}
.item5{
width: 200px;
height: 140px;
float: right;
}
.item6{
width: 40%px;
height: 25px;
float: left;
}
.item7{
width: 20%px;
height: 25px;
float: right;
}
</style>
<link rel="stylesheet" href="./public/css/bootstrap.min.css">
<script src="./public/js/jQuery.1.12.4.js"></script>
<script src="./public/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="row">
<div class="col-md-3"> <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">OPPO</a>
</div></div>
<div class="col-md-6"><!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<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>
<li><a href="#">ColorOS</a></li>
<li><a href="#">云服务</a></li>
</ul>
</div></div>
<div class="col-md-3"><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">用户菜单<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">购物车</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">我的订单</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">个人中心</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">登录</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse --></div>
</div>
</nav>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
<li data-target="#carousel-example-generic" data-slide-to="5"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./picture/201801031101085a4c4a80dc4f7.jpg" alt="...">
<div class="carousel-caption">
OPPO
</div>
</div>
<div class="item">
<img src="./picture/201712041012115a255e4b9b521.jpg" alt="...">
<div class="carousel-caption">
R11
</div>
</div>
<div class="item">
<img src="./picture/201712041012275a255d6b27233.jpg" alt="...">
<div class="carousel-caption">
2000wpx
</div>
</div>
<div class="item">
<img src="./picture/201712041012285a255c404c6dd.jpg" alt="...">
<div class="carousel-caption">
camera
</div>
</div>
<div class="item">
<img src="./picture/201712041012475a255eabd065f.jpg" alt="...">
<div class="carousel-caption">
big screen
</div>
</div>
<div class="item">
<img src="./picture/201712041012545a255d0eced53.jpg" alt="...">
<div class="carousel-caption">
R11s
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="row container-fluid" >
<div class="col-xs-12 col-md-6" style="text-align: center ;"><img src="./picture/201712260112275a41e503ceb6b.jpg" class="img-responsive" alt="Responsive image">
R11s 高配版 6GB 运存+128GB 内存 ¥3599
</div>
<div class="col-xs-12 col-md-6" style="text-align: center;"><img src="./picture/201712140712305a325bea559f1.jpg" class="img-responsive" alt="Responsive image">
A73 更清晰的全面屏手机 ¥1699
</div>
</div>
<div class="row" >
<div class="col-xs-12 col-md-6" style="text-align: center;"><img src="./picture/201712261012535a41b81df157f.jpg" class="img-responsive" alt="Responsive image">
A83 大屏大内存手机 ¥1399
</div>
<div class="col-xs-12 col-md-6" style="text-align: center;"><img src="./picture/201712041012145a2560a67a0af.jpg" class="img-responsive" alt="Responsive image">
A57 前置 1600 万美颜自拍 ¥1299
</div>
</div>
<div class="row" >
<div class="col-xs-12 col-md-6" style="text-align: center;"><img src="./picture/201712220212575a3ca1f1ee628.jpg" class="img-responsive" alt="Responsive image">
A79 充电更快的全面屏手机 ¥2099
</div>
<div class="col-xs-12 col-md-6" style="text-align: center;"><img src="./picture/201712051212495a257e151dd45.jpg" class="img-responsive" alt="Responsive image">
A77 3GB + 32GB ¥1599
</div>
</div>
<br><br>
<div class="row container-fluid" >
<div class="col-md-4" style="text-align: center" ><img src="./picture/201801171101035a5ebf3f50542.png" class="img-responsive" alt="Responsive image">
入耳式耳机 MH133 ¥39
</div>
<div class="col-md-4" style="text-align: center"><img src="./picture/201801220101575a657d656f4a4.png" class="img-responsive" alt="Responsive image">
VOOC 车载闪充 V103 ¥149
</div>
<div class="col-md-4" style="text-align: center"><img src="./picture/201801220201205a65804cf153a.png" class="img-responsive" alt="Responsive image">
自拍杆 樱花粉 ¥39
</div>
</div>
<div class="row container-fluid" >
<!-- <div class="col-md-4" style="text-align: center"><img src="./picture/201712041012485a2561b818176.png" alt="..." >
闪充电源适配器 AK779 ¥79
</div> -->
<div class="col-md-4" style="text-align: center"><img src="./picture/201712041012545a2561be58fe2.png" class="img-responsive" alt="Responsive image">
电源适配器 ¥19
</div>
<div class="col-md-4" style="text-align: center"><img src="./picture/201712041012005a2561c456f3d.png" class="img-responsive" alt="Responsive image">
闪充 USB 数据线 ¥29
</div>
<div class="col-md-4" style="text-align: center"><img src="./picture/201712041012335a2561a9a1636.png" class="img-responsive" alt="Responsive image">
自拍杆晴空蓝 ¥39
</div>
</div>
<!-- <div class="col-md-3" style="text-align: center"><img src="./picture/201712041012055a2561c90428d.png" alt="..." >
充电器
</div> -->
<!-- <div class="col-md-6" style="text-align: center"><img src="./picture/201712041012145a2561964ae78.jpg" alt="...">
入耳式耳机 MH130 ¥59
</div> -->
<!-- <div class="col-md-3" style="text-align: center"><img src="./picture/201801160801265a5de95ac69b5.png
" alt="..." >
小充电器 VC54JBCH ¥79
</div> -->
<br><br><br><br><br>
<div class="row container-fluid hidden-xs" >
<div class="col-md-2" style="text-align: center"><img src="./picture/oc-qecode-alipay.png
" alt="..." >
1 年全国联保
</div>
<div class="col-md-2" style="text-align: center"><img src="./picture/oc-qecode-alipay.png
" alt="..." >
7 天退货保障
</div>
<div class="col-md-2" style="text-align: center"><img src="./picture/oc-qecode-alipay.png
" alt="..." >30天换货保障
</div>
<div class="col-md-2" style="text-align: center"><img src="./picture/oc-qecode-alipay.png
" alt="..." >
全场包邮
</div>
<div class="col-md-2" style="text-align: center"><img src="./picture/oc-qecode-alipay.png
" alt="..." >555家售后</div>
<div class="col-md-2" style="text-align: center"><img src="./picture/oc-qecode-alipay.png
" alt="..." >
正品保障
</div>
</div>
</div>
<br><br><br>
<hr ></hr>
<div class="item1 hidden-xs">
<div class="item1_top" >
<h4 align="center">推荐机型</h4>
</div>
<div class="item1_bottom">
<ul align="center">
<li>R11s</li>
<li>A73</li>
<li>A57</li>
<li>A79</li>
</ul>
</div>
</div>
<div class="item2 hidden-xs">
<div class="item2_top" >
<h4 align="center">服务</h4>
</div>
<div class="item2_bottom">
<ul align="center">
<li>服务网点查询</li>
<li>零配件价格查询</li>
<li>官方授权网店</li>
<li>预置软件公示</li>
</ul>
</div>
</div>
<div class="item3 hidden-xs">
<div class="item3_top" >
<h4 align="center">关于我们</h4>
</div>
<div class="item3_bottom">
<ul align="center">
<li>关于 OPPO</li>
<li>加入我们</li>
</ul>
</div>
</div>
<div class="item4 hidden-xs">
<div class="item4_top" >
<h4 align="center">商务合作</h4>
</div>
<div class="item4_bottom">
<ul align="center">
<li>开放平台</li>
<li>采购相关</li>
</ul>
</div>
</div>
<div class="item5 hidden-xs">
<div class="item5_top" >
<h4 align="center">在线客服</h4>
</div>
<div class="item5_bottom">
<ul align="center">
<li><h3>4001-666-888</h3></li>
<li><h5>24 小时全国热线</h5></li>
</ul>
</div>
</div>
<br><br><br><br><br><br>
<hr ></hr>
<div class="item6 ">
<h6 >© 2005 - 2018 OPPO 版权所有 粤ICP备14056724号-2
</h6>
</div>
<div class="item7 ">
<h6 >关注我们：
oppp官方微博
oppp官方微信
Global
</h6>
</div>
</body>
</html>
兄弟连学python
Python学习交流、资源共享群：563626388 QQ
类似资料：