<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 适配移动端 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入Bootstrap CSS（CDN方式） -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<title>黑马财富</title>
<style>
/* 顶部通栏样式 */
.top-bar {
background-color: #f8f9fa;
padding: 8px 0;
font-size: 14px;
}
/* 导航栏样式（Bootstrap默认样式基础上微调） */
.navbar-nav .nav-link {
color: #333;
margin: 0 10px;
}
/* 轮播图容器 */
.carousel-item img {
max-height: 400px;
object-fit: cover;
}
/* 产品信息模块卡片 */
.product-card {
border: 1px solid #eee;
border-radius: 8px;
padding: 20px;
margin: 10px 0;
transition: all 0.3s ease;
}
.product-card:hover {
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/* 新闻模块列表 */
.news-list li {
margin: 10px 0;
list-style: none;
background: url('images/list-icon.png') no-repeat left center;
padding-left: 20px;
}
/* 合作伙伴Logo容器 */
.partner-logos {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.partner-logos img {
max-height: 50px;
opacity: 0.8;
transition: opacity 0.3s ease;
}
.partner-logos img:hover {
opacity: 1;
}
/* 响应式适配：小屏幕调整间距 */
@media (max-width: 768px) {
.product-card {
padding: 15px;
}
}
</style>
</head>
<body>
<!-- 顶部通栏模块 -->
<div class="top-bar">
<div class="container d-flex justify-content-between align-items-center">
<div>
<span>手机黑马财富</span> |
<span>联系电话：400-xxxx-xxxx</span> |
<span>服务时间：9:00-21:00</span>
</div>
<div>
<a href="#" class="me-3">常见问题</a>
<a href="#">注册/登录</a>
</div>
</div>
</div>
<!-- 导航栏模块（Bootstrap Navbar） -->
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container">
<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>
<!-- 轮播图模块（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>
<!-- 产品信息模块 -->
<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">
<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">
<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">
<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>
<!-- 预约交易模块 -->
<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>什么是预约投标？立即预约 ></p>
</div>
<div class="col-md-6">
<!-- 可扩展表单，此处简化演示 -->
<button class="btn btn-primary btn-lg">我要预约</button>
</div>
</div>
</div>
</section>
<!-- 新闻模块 -->
<section class="py-5">
<div class="container">
<h2 class="text-center mb-4">全部新闻</h2>
<ul class="news-list">
<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>
<!-- 合作伙伴模块 -->
<section class="py-5 bg-light">
<div class="container">
<h2 class="text-center mb-4">合作伙伴</h2>
<div class="partner-logos">
<img src="images/partner1.png" alt="合作伙伴1">
<img src="images/partner2.png" alt="合作伙伴2">
<img src="images/partner3.png" alt="合作伙伴3">
<img src="images/partner4.png" alt="合作伙伴4">
<img src="images/partner5.png" alt="合作伙伴5">
</div>
</div>
</section>
<!-- 底部模块（可扩展版权、备案等信息） -->
<footer class="py-3 bg-dark text-white text-center">
<p class="mb-0">© 2024 黑马财富 版权所有</p>
</footer>
<!-- 引入Bootstrap JS（CDN方式，实现交互如导航栏折叠、轮播图） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
index.html
index.html