代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 页面的宽度与设备屏幕的宽度一致, 初始缩放比例 1:1 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>详细页</title>
<link rel="stylesheet" type="text/css" href="bootstrap4/css/bootstrap.min.css"/>
<!-- <link rel="stylesheet" type="text/css" href="css/index.css"/> -->
<link rel="stylesheet" type="text/css" href="css/detail.css"/>
<link rel="stylesheet" type="text/css" href="css/detail_index.css"/>
<!-- jQuery所以必须放在前边) -->
<script src="js/jquery.min.js"></script>
<script src="bootstrap4/js/bootstrap.min.js"></script>
<script src="js/detail.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 导航栏部分 -->
<nav class="navbar navbar-expand-lg navbar-light bg-white border border-top-0">
<a class="navbar-brand" href="#"><img src="img/huawei_logo.png" class=".img-fluid" alt="" style="width: 65%; margin-left: 10px"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">主页<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="car.html">个人及家庭用品</a>
</li>
<li class="nav-item">
<a class="nav-link" href="list.html">商用产品及方案</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
服务支持
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="comment.html">个人及家庭业务</a>
<a class="dropdown-item" href="#">企业业务</a>
<a class="dropdown-item" href="#">华为云</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">故障维修</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="detail.html">关于华为<span class="sr-only">(current)</span></a>
</li>
<!-- <li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li> -->
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="搜索huawei" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0 color" type="submit">搜索</button>
</form>
</div>
</nav>
<!--js1. 电梯导航开始 -->
<div class="elevator">
<ul>
<li><a href="#section1">全部产品</a></li>
<li><a href="#section2">甄选推荐</a></li>
<li><a href="#section3">购买产品</a></li>
<li><a href="#section4">用户评价</a></li>
</ul>
</div>
<div class="section" id="section1">
<p class="text-center font-weight-bold" style="font-size: 30px;">全部产品</p>
<!-- 组件1.列表组开始 -->
<div class="list container">
<div class="row">
<div class=" col-md-12 col-lg-2">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">手机</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">穿戴</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">电脑</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">平板</a>
<a class="list-group-item list-group-item-action" id="list-headsets-list" data-toggle="list" href="#list-headsets" role="tab" aria-controls="headsets">耳机音箱</a>
</div>
</div>
<div class=" col-md-12 col-lg-10">
<!-- 组件2.横向列表组嵌套开始 -->
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
<ul class="list-group list-group-horizontal-sm flex-fill">
<li class="list-group-item">
<img src="img/mate系列.webp">
<p class="text-center">mate系列</p>
</li>
<li class="list-group-item">
<img src="img/p系列.webp">
<p class="text-center">p系列</p>
</li>
<li class="list-group-item">
<img src="img/Pocket系列.webp">
<p class="text-center">Pocket系列</p>
</li>
</ul>
</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
<ul class="list-group list-group-horizontal-sm flex-fill">
<li class="list-group-item">
<img src="img/ULTIMATE系列.webp">
<p class="text-center">ULTIMATE系列</p>
</li>
<li class="list-group-item">
<img src="img/watch%20GT系列.webp">
<p class="text-center">WATCH GT系列</p>
</li>
<li class="list-group-item">
<img src="img/watch系列.webp">
<p class="text-center">WATCH系列</p>
</li>
</ul>
</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
<ul class="list-group list-group-horizontal-sm flex-fill">
<li class="list-group-item">
<img src="img/MateBook%20D%20系列.webp">
<p class="text-center">MateBook D 系列</p>
</li>
<li class="list-group-item">
<img src="img/MateBook%20E%20系列.webp">
<p class="text-center">MateBook E 系列</p>
</li>
<li class="list-group-item">
<img src="img/MateBook%20X%20系列.webp">
<p class="text-center">MateBook X 系列</p>
</li>
</ul>
</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">
<ul class="list-group list-group-horizontal-sm flex-fill">
<li class="list-group-item">
<img src="img/matepad%20pro.webp">
<p class="text-center">MatePad Pro系列</p>
</li>
<li class="list-group-item">
<img src="img/matepad%20air.webp">
<p class="text-center">MatePad Air系列</p>
</li>
<li class="list-group-item">
<img src="img/matepad%20系列.webp">
<p class="text-center">MatePad系列</p>
</li>
</ul>
</div>
<div class="tab-pane fade" id="list-headsets" role="tabpanel" aria-labelledby="list-headsets-list">
<ul class="list-group list-group-horizontal-sm flex-fill">
<li class="list-group-item">
<img src="img/1.webp">
<p class="text-center">真无线耳机</p>
</li>
<li class="list-group-item">
<img src="img/2.webp">
<p class="text-center">智能眼镜</p>
</li>
<li class="list-group-item">
<img src="img/3.webp">
<p class="text-center">颈戴式耳机</p>
</li>
</ul>
</div>
</div>
</div>
<!-- 组件2.横向列表组嵌套结束 -->
</div>
</div>
<!-- 组件1.列表组结束 -->
</div>
<div class="section" id="section2">
<p class="text-center font-weight-bold" style="font-size: 30px;">甄选推荐</p>
<!-- 组件3.卡片开始 -->
<div class="container">
<div class="row">
<div class="card-deck">
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="card text-center">
<img class="card-img-top" src="img/tuijian4.webp" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">HUAWEI P60 Pro</h5>
<p class="card-text" style="color: gray;font-size: 13px;">超聚光夜视长焦|双向北斗卫星消息</p>
<p class="card-text" style="font-size: 20px;"> ¥ 6488 </p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="card text-center">
<img class="card-img-top" src="img/tuijian1.webp" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">HUAWEI MateBook 14</h5>
<p class="card-text" style="color: gray;font-size: 13px;">12代酷睿标压处理器</p>
<p class="card-text" style="font-size: 20px;"> ¥ 5299 </p>
<!-- <p><del> ¥ 6799 </del></p> -->
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="card text-center">
<img class="card-img-top" src="img/tuijian2.webp" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">HUAWEI FreeBuds Pro 3</h5>
<p class="card-text" style="color: gray;font-size: 13px;">应用星闪连接核心技术|麒麟芯片</p>
<p class="card-text" style="font-size: 20px;"> ¥ 1499 </p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="card text-center">
<img class="card-img-top" src="img/tuijian3.webp" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">华为路由 BE3 Pro</h5>
<p class="card-text" style="color: gray;font-size: 13px;">Wi-Fi71双Wi-Fi连网|智能游戏加速</p>
<p class="card-text" style="font-size: 20px;"> ¥ 399 </p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 组件3.卡片结束 -->
</div>
<div class="section" id="section3">
<!-- 组件4.自定义列填充开始 -->
<div class="container px-lg-5"><!-- px-lg-5col增加px-lg-5的类，会使col的padding值增大，所以row需要通过增加mx-lg-n5的类去减少同样多的padding去抵消增加的部分，为了防止意外的溢出，container也需要增加px-lg-5的类以增加同样多的padding -->
<div class="row mx-lg-n5">
<div class="col-lg-5 col-sm-12 py-3 px-lg-5 bg-light">
<p class="text-center" style="text-align: center;">HUAWEI MateBook 14s 2022 英特尔Evo 12代酷睿标压 i5 16GB 512GB 14.2英寸90Hz触控屏 深空灰</p>
<img src="img/14s.jpg" style="display: table;text-align: center;" class="w-100">
<p class="card-text" style="font-size: 20px;color: red;text-align: center;"> ¥ 5299 <del style="font-size: 15px;"> ¥ 6799 </del></p>
</div>
<div class="col-lg-7 col-sm-12 py-3 px-lg-5 bg-light">
<!-- 组件5.单选按钮开始 -->
<p class="text-left" style="margin: 5px;">销售类型</p>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> 全款购买
</label>
</div>
<p class="text-left" style="margin: 5px;">版本</p>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> MateBook 14s 12代酷睿
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> MateBook 14s 13代酷睿
</label>
</div>
<p class="text-left" style="margin: 5px;">配置</p>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> I5/16GB/512GB
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> I5/16GB/1TB
</label>
</div>
<p class="text-left" style="margin: 5px;">颜色</p>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> 深空灰
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> 云杉绿
</label>
</div>
<!-- 组件5.单选按钮结束 -->
<p class="text-left" style="margin: 5px;">送至</p>
<!-- 组件6.表单开始 -->
<form>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress" placeholder="地址">
</div>
<form>
<div class="form-row">
<div class="col-7">
<input type="text" class="form-control" placeholder="City">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="State">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Zip">
</div>
</div>
</form>
<!-- 组件6.表单结束 -->
<div class="row" style="margin: 10px;">
<div class="col-lg-5 col-md-12">
<!-- js 2.数量加减开始-->
<ul class="counter">
<li id="minus"><input type="button" onclick="minuser()" value="-"/></li>
<li id="countnum">0</li>
<li id="plus"><input type="button" onclick="adder()" value="+"/></li>
</ul>
<!-- js 2.数量加减结束 -->
</div>
<!-- 组件7.弹出模态框开始 -->
<div class="col-lg-4 col-md-12">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#exampleModal">
加入购物车
<!-- 组件8.徽章开始 -->
<span class="badge badge-light">99+</span>
<!-- 组件8.徽章结束 -->
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="text-align: center;margin: auto;font-size: 20px;">
成功加入购物车
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">再逛逛</button>
<button type="button" class="btn btn-primary">去结算</button>
</div>
</div>
</div>
</div>
</div>
<!-- 组件7.弹出模态框结束 -->
<div class="col-lg-3 col-md-12">
<!-- 组件8.按钮 -->
<button type="button" class="btn btn-primary btn-block">立即购买</button>
<!-- 组件8.按钮 -->
</div>
</div>
</div>
</div>
</div>
<!-- 组件4.自定义列填充结束 -->
</div>
<div class="section" id="section4">
<div class="container">
<div class="row">
<div class="col">
<!-- 组件9.滑动门+胶囊式导航 开始 -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">详情</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">参数</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">用户评价<span class="badge badge-secondary">1</span></a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<img src="img/xiangqing.webp" class="w-100">
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<p class="text-center" style="font-size: 18px;">主要参数</p>
<p class="text-center"> 屏幕色彩: 100% sRGB（典型值）</p>
<p class="text-center"> 运行内存: 16GB </p>
<p class="text-center"> 传播名: HUAWEI MateBook 14s 2022</p>
<p class="text-center"> 电池容量: 60Wh (额定容量）</p>
<p class="text-center"> 屏幕尺寸: 14.2英寸 </p>
<p class="text-center"> 存储容量: 1TB </p>
<p class="text-center"> 分辨率: 2520x1680 </p>
<p class="text-center"> CPU型号: 第12代智能英特尔®酷睿™ i5-12500H 处理器 </p>
<p class="text-center"> CPU核数: 12核 </p>
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<!-- 组件10.Hero大块屏开始 -->
<div class="jumbotron jumbotron-fluid">
<div class="container">
<!-- js 3.用户评论发布开始 -->
<h1 class="display-10" style="text-align: center;">发布评价</h1>
<div class="box">
<textarea class="txt" rows="10" cols="60" style="width: 100%;"></textarea>
<div class="row">
<div class="col">
<button type="button" class="btn btn-secondary btn-block">发布</button>
</div>
</div>
<ul>
<li>外观造型：遥遥领先 信号通话：遥遥领先 拍照情况：遥遥领先 拍照情况：遥遥领先 流畅度：遥遥领先 充电续航：遥遥领先 外观造型：遥遥领先 信号通话：遥遥领先 拍照情况：遥遥领先 流畅度：遥遥领先 充电续航：遥遥领先<a href="#">删除</a></li>
</ul>
</div>
<!-- js 3.用户评论发布结束 -->
</div>
</div>
<!-- 组件10.Hero大块屏结束 -->
</div>
</div>
</div>
<!-- 组件9.滑动门+胶囊式导航结束 -->
</div>
</div>
</div>
<!--js1. 电梯导航结束 -->
<!-- 底部开始 -->
<!-- 手机状态栏 -->
<div class="app_menu">
<ul id="appMenu">
<li>
<a href="index.html" class="active">
<span class="icons">
<img src="img/index.svg" alt="index" class="iactive">
<img src="img/index_active.svg" alt="index">
</span>
<div>主页</div>
</a>
</li>
<li>
<a href="list.html">
<span class="icons">
<img src="img/account.svg" alt="account">
<img src="img/account_active.svg" alt="account" class="iactive">
</span>
<div>账户</div>
</a>
</li>
<li>
<a href="detail.html">
<span class="icons">
<img src="img/huawei_icon2.svg" alt="">
</span>
</a>
</li>
<li>
<a href="car.html">
<span class="icons">
<img src="img/car.svg" alt="car">
<img src="img/car_active.svg" alt="car" class="iactive">
</span>
<div>购物车</div>
</a>
</li>
<li>
<a href="comment.html">
<span class="icons">
<img src="img/comment.svg" alt="car">
<img src="img/comment_active.svg" alt="car" class="iactive">
</span>
<div>评论</div>
</a>
</li>
</ul>
</div>
<footer>
<p class="text-center w-100">© 2023 华为技术有限公司 粤A2-20044005号 粤公网安备44030702002388号
| 联系我们 法律声明 隐私政策 除名查询
</p>
</footer>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手