<!doctype html>
<html lang="zh-CN">
<head>
<!-- 必须的 meta 标签 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 的 CSS 文件 -->
<link href="./css/bootstrap.min.css" rel="stylesheet"">
<title>京东超市</title>
</head>
<body>
<nav class=" navbar navbar-expand-lg navbar-light " style=" background-color: #e3f2fd;">
<div class="container-fluid">
<a class="navbar-brand" href="demo.html">京东超市</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">我的订单</a>
</li>
<li class="nav-item">
<a class="nav-link" href="document.html">我的京东</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="download.html" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
网站导航
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<form class="d-flex" role="search">
<input class="me-2" type="search" placeholder="搜索您的商品" aria-label="search">
<button class="btn btn-outline-success" type="submit">搜索</button>
</form>
</ul>
<a href="" class=" stye-black">你好,请登录</a> <a href="" class=" style-red">免费注册</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 ">
<div class="accordion" id="accordionPanelsStayOpenExample">
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="false"
aria-controls="panelsStayOpen-collapseOne">
食品饮料
</button>
</h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse "
aria-labelledby="panelsStayOpen-headingOne">
<div class="accordion-body">
<strong>进口食品</strong>休闲零食/饼干/蛋糕/橄榄油/坚果/蜜饯/糖果/巧克力进口牛奶方便食品饮料冲调<br>
<strong>茗茶</strong>铁观音/乌龙茶/龙井/普洱/红茶/绿茶/白茶/黑茶/养生茶/花果茶/花草茶<br>
<strong>饮料/水</strong>饮用水/碳酸水/中草药饮料/功能类运动类/茶饮/蛋白质类/果蔬类/果味类<br>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
aria-controls="panelsStayOpen-collapseTwo">
粮油副食
</button>
</h2>
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse"
aria-labelledby="panelsStayOpen-headingTwo">
<div class="accordion-body">
<strong>食用油</strong>花生油/调和油/玉米油/葵花籽油/大豆油/菜籽油<br>
<strong>方便速食</strong>方便面/方便米饭/火腿肠/罐头/八宝粥/速食汤粥<br>
<strong>健康杂粮</strong>小米/红小豆/黄豆/薏仁米/绿豆/黑米/糯米/黑芝麻<br>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false"
aria-controls="panelsStayOpen-collapseThree">
个人护理
</button>
</h2>
<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse"
aria-labelledby="panelsStayOpen-headingThree">
<div class="accordion-body">
<strong>进口食品</strong>休闲零食饼干蛋糕橄榄油坚果蜜饯糖果/巧克力进口牛奶方便食品饮料冲调<br>
<strong>茗茶</strong>铁观音乌龙茶龙井普洱红茶绿茶白茶黑茶养生茶花果茶花草茶<br>
<strong>饮料/水</strong>饮用水碳酸水中草药饮料功能类运动类茶饮蛋白质类果蔬类果味类<br>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseFour" aria-expanded="false"
aria-controls="panelsStayOpen-collapseFour">
护肤美妆
</button>
</h2>
<div id="panelsStayOpen-collapseFour" class="accordion-collapse collapse"
aria-labelledby="panelsStayOpen-headingFour">
<div class="accordion-body">
<strong>进口食品</strong>休闲零食饼干蛋糕橄榄油坚果蜜饯糖果/巧克力进口牛奶方便食品饮料冲调<br>
<strong>茗茶</strong>铁观音乌龙茶龙井普洱红茶绿茶白茶黑茶养生茶花果茶花草茶<br>
<strong>饮料/水</strong>饮用水碳酸水中草药饮料功能类运动类茶饮蛋白质类果蔬类果味类<br>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingFive">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseFive" aria-expanded="false"
aria-controls="panelsStayOpen-collapseFive">
家居清洁
</button>
</h2>
<div id="panelsStayOpen-collapseFive" class="accordion-collapse collapse"
aria-labelledby="panelsStayOpen-headingFive">
<div class="accordion-body">
<strong>进口食品</strong>休闲零食饼干蛋糕橄榄油坚果蜜饯糖果/巧克力进口牛奶方便食品饮料冲调<br>
<strong>茗茶</strong>铁观音乌龙茶龙井普洱红茶绿茶白茶黑茶养生茶花果茶花草茶<br>
<strong>饮料/水</strong>饮用水碳酸水中草药饮料功能类运动类茶饮蛋白质类果蔬类果味类<br>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingSix">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseSix" aria-expanded="false"
aria-controls="panelsStayOpen-collapseSix">
母婴用品
</button>
</h2>
<div id="panelsStayOpen-collapseSix" class="accordion-collapse collapse"
aria-labelledby="panelsStayOpen-headingSix">
<div class="accordion-body">
<strong>进口食品</strong>休闲零食饼干蛋糕橄榄油坚果蜜饯糖果/巧克力进口牛奶方便食品饮料冲调<br>
<strong>茗茶</strong>铁观音乌龙茶龙井普洱红茶绿茶白茶黑茶养生茶花果茶花草茶<br>
<strong>饮料/水</strong>饮用水碳酸水中草药饮料功能类运动类茶饮蛋白质类果蔬类果味类<br>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingSeven">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseSeven" aria-expanded="false"
aria-controls="panelsStayOpen-collapseSeven">
中外名酒
</button>
</h2>
<div id="panelsStayOpen-collapseSeven" class="accordion-collapse collapse"
aria-labelledby="panelsStayOpen-headingSeven">
<div class="accordion-body">
<strong>进口食品</strong>休闲零食饼干蛋糕橄榄油坚果蜜饯糖果/巧克力进口牛奶方便食品饮料冲调<br>
<strong>茗茶</strong>铁观音乌龙茶龙井普洱红茶绿茶白茶黑茶养生茶花果茶花草茶<br>
<strong>饮料/水</strong>饮用水碳酸水中草药饮料功能类运动类茶饮蛋白质类果蔬类果味类<br>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingEight">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseEight" aria-expanded="false"
aria-controls="panelsStayOpen-collapseEight">
京东生鲜
</button>
</h2>
<div id="panelsStayOpen-collapseEight" class="accordion-collapse collapse"
aria-labelledby="panelsStayOpen-headingEight">
<div class="accordion-body">
<strong>进口食品</strong>休闲零食饼干蛋糕橄榄油坚果蜜饯糖果/巧克力进口牛奶方便食品饮料冲调<br>
<strong>茗茶</strong>铁观音乌龙茶龙井普洱红茶绿茶白茶黑茶养生茶花果茶花草茶<br>
<strong>饮料/水</strong>饮用水碳酸水中草药饮料功能类运动类茶饮蛋白质类果蔬类果味类<br>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingNine">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseNine" aria-expanded="false"
aria-controls="panelsStayOpen-collapseNine">
居家生活
</button>
</h2>
<div id="panelsStayOpen-collapseNine" class="accordion-collapse collapse"
aria-labelledby="panelsStayOpen-headingNine">
<div class="accordion-body">
<strong>进口食品</strong>休闲零食饼干蛋糕橄榄油坚果蜜饯糖果/巧克力进口牛奶方便食品饮料冲调<br>
<strong>茗茶</strong>铁观音乌龙茶龙井普洱红茶绿茶白茶黑茶养生茶花果茶花草茶<br>
<strong>饮料/水</strong>饮用水碳酸水中草药饮料功能类运动类茶饮蛋白质类果蔬类果味类<br>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-7">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"
aria-label="Slide 4"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4"
aria-label="Slide 5"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/111.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/222.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/333.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/444.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/555.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div class="col-md-3 ">
<div class="panel panel-default">
<div class="panel-heading">
<div class="list-group">
<a href="#" class="list-group-item ">
品类齐全,轻松购物
</a>
<a href="#" class="list-group-item">多仓直发,极速配送</a>
<a href="#" class="list-group-item">正品行货,精致服务</a>
<a href="#" class="list-group-item">天天低价,畅选无忧</a>
<a href="#" class="list-group-item">京东旗下网站: 京东钱包| 京东云</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 选项 1:包含 Popper 的 Bootstrap 集成包 -->
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
boorstrap v5轮播图
最新推荐文章于 2025-05-19 01:03:55 发布