#制作简易商品详情页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品详情</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: 800px;
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;
}
.head1 h5{
float: left;
}
h6{
float: right;
}
.tip{
width: 100%px;
height: 300px;
}
.tips1,.tips2 ul li{
float: left;
}
.row,.col-md-6{
float: left;
}
</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>
<br><br><br><br>
<br>
<br>
<div class=head1>
<h5 style="font-size: 16px;font-weight: 400">R11s</h5>
</div>
<h6> 概览 图库 技术规格</h6>
<br><br>
<hr>
<div class=tip>
<div class="row container-fluid" >
<div class="col-md-6"><img src="./picture/201712260112275a41e503ceb6b.jpg" class="img-responsive" alt="Responsive image">
</div>
</div>
<div class=tips1>
<ul class=tips2>
<li style="text-align: center ;font-weight:bold">R11s 高配版 黑色</li>
<li style="text-align: center">6GB 运存 + 128GB 内存</li>
<li style="text-align: center ;font-weight:bold">￥3599.00</li>
<li style="text-align: center">R系列专享 花呗分期 3、6 期免息</li>
<li style="text-align: center">颜色：香槟色 黑色</li>
<li style="text-align: center">网络：全网通</li>
<li style="text-align: center">配置：4G+64G 6G+128G</li>
<li style="text-align: center">服务:延保半年 ¥79 延保一年 ¥129 屏碎保一年 ¥129</li>
<li style="text-align: center">赠品：新年礼盒</li>
<li style="text-align: center">选择数量：1</li>
</ul>
</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
7013
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
