<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<!-- 移动端适配 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 引入Bootstrap（CDN方式，也可本地下载放入libs） -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet"/>
<!-- 自定义样式 -->
<link rel="stylesheet" href="css/style.css" />
<title>黑马财富</title>
</head>
<body>
<!-- 1. 顶部通栏模块 -->
<div class="top-bar">
<div class="container d-flex justify-content-between align-items-center">
<div class="top-info">
<span>手机黑马财富</span> |
<span>联系电话：400-1234-5678</span> |
<span>服务时间：9:00-21:00</span>
</div>
<div class="top-links">
<a href="#" class="me-3">常见问题</a>
<a href="#">注册/登录</a>
</div>
</div>
</div>
<!-- 2. 导航栏模块（Bootstrap Navbar） -->
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container">
<!-- Logo -->
<a class="navbar-brand" href="#">
<img src="images/logo.png" alt="黑马财富Logo" height="40" />
</a>
<!-- 移动端折叠按钮 -->
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarContent"
aria-controls="navbarContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<!-- 导航菜单 -->
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" href="#">我要投资</a></li>
<li class="nav-item"><a class="nav-link" href="#">我要借贷</a></li>
<li class="nav-item"><a class="nav-link" href="#">平台介绍</a></li>
<li class="nav-item"><a class="nav-link" href="#">新手专区</a></li>
<li class="nav-item"><a class="nav-link" href="#">个人中心</a></li>
</ul>
</div>
</div>
</nav>
<!-- 3. 轮播图模块（Bootstrap Carousel） -->
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
<!-- 轮播点 -->
<div class="carousel-indicators">
<button
type="button"
data-bs-target="#carouselExample"
data-bs-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button
type="button"
data-bs-target="#carouselExample"
data-bs-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-bs-target="#carouselExample"
data-bs-slide-to="2"
aria-label="Slide 3"
></button>
</div>
<!-- 轮播项 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/banner1.jpg" class="d-block w-100" alt="Banner1" />
</div>
<div class="carousel-item">
<img src="images/banner2.jpg" class="d-block w-100" alt="Banner2" />
</div>
<div class="carousel-item">
<img src="images/banner3.jpg" class="d-block w-100" alt="Banner3" />
</div>
</div>
<!-- 左右切换按钮 -->
<button
class="carousel-control-prev"
type="button"
data-bs-target="#carouselExample"
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="#carouselExample"
data-bs-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- 4. 产品信息模块 -->
<section class="py-5">
<div class="container">
<h2 class="text-center mb-4">产品信息</h2>
<div class="row">
<div class="col-md-4">
<div class="product-card">
<img src="images/product1.png" alt="产品1" class="mb-3" />
<h5>新手体验标1002期</h5>
<p>剩余金额：0.50万</p>
<p>已投人数：22人</p>
<p>期限：10天</p>
<p class="h6 text-success">8% 年利率</p>
</div>
</div>
<div class="col-md-4">
<div class="product-card">
<img src="images/product2.png" alt="产品2" class="mb-3" />
<h5>新手体验标1003期</h5>
<p>剩余金额：0.80万</p>
<p>已投人数：18人</p>
<p>期限：10天</p>
<p class="h6 text-success">8% 年利率</p>
</div>
</div>
<div class="col-md-4">
<div class="product-card">
<img src="images/product3.png" alt="产品3" class="mb-3" />
<h5>稳健理财计划</h5>
<p>剩余金额：2.00万</p>
<p>已投人数：50人</p>
<p>期限：30天</p>
<p class="h6 text-success">7.5% 年利率</p>
</div>
</div>
</div>
</div>
</section>
<!-- 5. 预约交易模块 -->
<section class="py-5 bg-light">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<h3>预约交易</h3>
<p>当前有 273 人在排队，累计预约成功 7571 次</p>
<p>什么是预约投标？<a href="#" class="text-primary">立即预约 ></a></p>
</div>
<div class="col-md-6 text-md-end">
<button class="btn btn-primary btn-lg">我要预约</button>
</div>
</div>
</div>
</section>
<!-- 6. 新闻模块 -->
<section class="py-5">
<div class="container">
<h2 class="text-center mb-4">全部新闻</h2>
<ul class="news-list list-unstyled">
<li>【股票】ST瑞德6月9日打开涨停</li>
<li>【股票】景阳冈6月9日加速下跌</li>
<li>【股票】拓维信息6月9日快速回调</li>
<li>【股票】线上线下6月9日快速反弹</li>
<li>【股票】金运激光6月9日打开涨停</li>
<li>【股票】斯莱克6月9日快速反弹</li>
<li>【股票】润和软件6月9日打开涨停</li>
</ul>
</div>
</section>
<!-- 7. 合作伙伴模块 -->
<section class="py-5 bg-light">
<div class="container">
<h2 class="text-center mb-4">合作伙伴</h2>
<div class="d-flex flex-wrap justify-content-center gap-4">
<img src="images/partner1.png" alt="合作伙伴1" height="50" />
<img src="images/partner2.png" alt="合作伙伴2" height="50" />
<img src="images/partner3.png" alt="合作伙伴3" height="50" />
<img src="images/partner4.png" alt="合作伙伴4" height="50" />
<img src="images/partner5.png" alt="合作伙伴5" height="50" />
</div>
</div>
</section>
<!-- 8. 底部模块 -->
<footer class="py-3 bg-dark text-white text-center">
<p class="mb-0">© 2024 黑马财富 版权所有</p>
</footer>
<!-- 引入Bootstrap JS（交互依赖） -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
></script>
</body>
</html>
index.html
style.css
index.html