<!DOCTYPE html>
<html>
<head>
<title>商品详情</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/index.css" />
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style>
body {
position: relative;
}
.pbiaoqian p{
background-color: #F1B0B7;
}
</style>
<body data-spy="scroll" data-target=".navbar" data-offset="50" style="background: #D3D9DF;">
<nav class="navbar navbar-dark fixed-top"id="navbar-example2">
<a class="navbar-brand"href="index.html"><
</a>
<ul class="nav nav-pills ">
<li class="nav-item">
<a class="nav-link " href="#section1">宝贝预览</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">商品介绍</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section41">物流信息</a>
</li>
</ul>
</nav>
<div id="section1" class="container-fluid bg-light" style="padding-top:70px;padding-bottom:70px">
<!--轮播图开始-->
<div id="demo" class="carousel slide" data-ride="carousel" data-interval = "0">
<!-- 指示符 -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="img-fluid" src="image/3N85(Q%5MCDJ99YNDKX6B1R.jpg" alt="Chania">
</div>
<div class="carousel-item">
<img class="img-fluid" src="image/0IR@17A`EOW_@8}9Y}$3X1Z.jpg" alt="Chania">
</div>
<div class="carousel-item">
<img class="img-fluid" src="image/6E1`KX]~9X7@EOEHAIBII`8.jpg" alt="Chania">
</div>
</div>
</div>
<!--轮播结束-->
<div id="section2" class="container-fluid bg-light" style="padding-top:70px;padding-bottom:70px" style="background:#FEFEFE;">
<h3>商品介绍</h3>
<h4 style="color: #BD2130;">￥65.4</h4>
<div class="row">
<div class="col pbiaoqian">
<p style="size: 12px;color: #C82333;">满48送赠品</p>
</div>
<div class="col pbiaoqian">
<p style="size: 12px;color: #C82333;">满48送包邮</p>
</div>
<div class="col pbiaoqian">
<p style="size: 12px;color: #C82333;">购买的积分</p>
</div>
<h5>故宫六百年 阎崇年 讲述故宫600年故事解读
宫墙之地的是非揭秘人性和规律中的……
</h5>
<div class="d-flex mb-3">
<div class="p-2 flex-fill">
<img class="img-fluid" src="image/yuyuy.png"alt="chania" style="width: 20px; height: 20px;"/>推 荐
</div>
<div class="p-2 flex-fill ">
<img class="img-fluid" src="image/帮我选.png"alt="chania" style="width: 20px; height: 20px;"/>帮我选
</div>
<div class="p-2 flex-fill ">
<img class="img-fluid" src="image/分 享.png"alt="chania" style="width: 20px; height: 20px;"/>分 享
</div>
</div>
</div>
<div id="section41" class="container-fluid bg-light" style="padding-top:70px;padding-bottom:70px">
<h1>物流信息</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>
</html>