木子空间

# 首页-模板

# 可选1

image-20240719173451669

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演唱会售票网站</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <!-- Custom CSS -->
    <style>
        body {
            background-color: #1a1a1a;
            /* 深色背景，可以是黑色 */
            color: #fff;
            /* 白色文字 */
        }

        /* 导航栏颜色 */
        .navbar {
            background-color: #2c3e50;
            /* 蓝色 */
        }

        /* 演唱会列表卡片颜色 */
        .card {
            background-color: #8e44ad;
            /* 紫色 */
            color: #fff;
            /* 白色文字 */
        }

        /* 按钮颜色 */
        .btn-primary {
            background-color: #e74c3c;
            /* 红色 */
            border-color: #e74c3c;
            /* 红色 */
        }

        /* 链接颜色 */
        .nav-link {
            color: #fff;
            /* 白色文字 */
        }

        /* 特色区域背景 */
        .special-section {
            background-color: #2980b9;
            /* 蓝色 */
            color: #fff;
            /* 白色文字 */
            padding: 40px;
            text-align: center;
            margin-top: 50px;
        }

        /* 特色区域标题 */
        .special-section h2 {
            margin-bottom: 20px;
        }

        /* 特色区域按钮 */
        .special-section .btn {
            margin-top: 20px;
        }

        /* 精选演出卡片 */
        .featured-card {
            background-color: #3498db;
            /* 浅蓝色 */
            color: #fff;
            /* 白色文字 */
            margin-bottom: 20px;
            border: none;
        }

        /* 精选演出卡片标题 */
        .featured-card .card-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        /* 精选演出卡片描述 */
        .featured-card .card-text {
            font-size: 16px;
            margin-bottom: 15px;
        }

        /* 精选演出卡片按钮 */
        .featured-card .btn {
            background-color: #e74c3c;
            /* 红色 */
            border-color: #e74c3c;
            /* 红色 */
            font-size: 16px;
            font-weight: bold;
        }
    </style>
</head>

<body>

    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="#"><img src="logo.png" alt="Logo" style="height: 30px;"></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" 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>
                    <!-- 添加用户名和头像 -->
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <img src="user-avatar.png" alt="User Avatar"
                                style="height: 30px; border-radius: 50%; margin-right: 5px;">
                            用户名
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主页内容 -->
    <div class="container mt-5">
        <div class="row" style="height: 300px;">
            <div class="col-md-6">
                <h2>欢迎来到演唱会售票网站</h2>
                <p>在这里，你可以找到最新最热门的演唱会信息，以及购买演唱会门票。</p>
                <p>无论你喜欢流行音乐、摇滚乐还是爵士乐，我们都有你喜欢的演出。</p>
                <p>赶快加入我们，体验音乐的魅力吧！</p>
                <a href="#" class="btn btn-primary">浏览演唱会列表</a>
            </div>
            <div class="col-md-6" style="height: 300px;">
                <!-- 轮播 -->
                <div id="demo" class="carousel slide" data-bs-ride="carousel">

                    <!-- 指示符 -->
                    <div class="carousel-indicators">
                        <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
                        <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
                        <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
                    </div>

                    <!-- 轮播图片 -->
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="https://lh6.googleusercontent.com/proxy/1Ph-0A3-7jihEHs8MUBzRAGidP0N6an8pVdVbUozRY82x4F703Qve0Evp9UtnsjzVIgU79fDk6q6RZU8x3BE6vFJa-2PxGxCdopeI2nlga5Cs6TstCaYFkpFVg" class="d-block"
                                style="width:50%">
                        </div>
                        <div class="carousel-item">
                            <img src="https://upload.mnw.cn/2020/1227/1609037991941.png" class="d-block"
                                style="width:50%">
                        </div>
                        <div class="carousel-item">
                            <img src="https://static.jyshare.com/libs/images/mix/img_mountains_wide.jpg" class="d-block"
                                style="width:50%">
                        </div>
                    </div>

                    <!-- 左右切换按钮 -->
                    <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 特色区域 -->
    <div class="container special-section mt-5">
        <h2>为什么选择我们？</h2>
        <p>我们提供最全面、最及时的演唱会信息。</p>
        <p>我们有优质的客户服务团队，随时为您解答疑问。</p>
        <p>我们为用户提供安全、便捷的购票体验。</p>
        <a href="#" class="btn btn-light">了解更多</a>
    </div>

    <!-- 精选演出 -->
    <div class="container mt-5">
        <h2 class="text-center mb-4">精选演出</h2>
        <div class="row">
            <div class="col-md-4">
                <div class="card featured-card">
                    <img src="https://img1.jiemian.com/101/original/20230520/168455181486389600_a640x364.jpg"
                        class="card-img-top" alt="Concert 1">
                    <div class="card-body">
                        <h5 class="card-title">演唱会标题</h5>
                        <p class="card-text">演唱会时间：2024-05-01</p>
                        <p class="card-text">演唱会地点：某某体育馆</p>
                        <a href="#" class="btn btn-primary">查看详情</a>
                    </div>
                </div>
            </div>
            <!-- 其他精选演出卡片 -->
            <div class="col-md-4">
                <div class="card featured-card">
                    <img src="https://img.36krcdn.com/hsossms/20231019/v2_02d2ccc5b2d0479f8041b2b254764f32@46958_oswg213626oswg1011oswg579_img_png?x-oss-process=image/quality,q_100/format,jpg/interlace,1/format,jpg/interlace,1"
                        class="card-img-top" alt="Concert 2">
                    <div class="card-body">
                        <h5 class="card-title">演唱会标题</h5>
                        <p class="card-text">演唱会时间：2024-05-01</p>
                        <p class="card-text">演唱会地点：某某体育馆</p>
                        <a href="#" class="btn btn-primary">查看详情</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card featured-card">
                    <img src="https://img.alicdn.com/imgextra/i1/2251059038/O1CN01Odr5Du2GdSSUkjoPA_!!2251059038.jpg_q60.jpg_.webp"
                        class="card-img-top" alt="Concert 3">
                    <div class="card-body">
                        <h5 class="card-title">演唱会标题</h5>
                        <p class="card-text">演唱会时间：2024-05-01</p>
                        <p class="card-text">演唱会地点：某某体育馆</p>
                        <a href="#" class="btn btn-primary">查看详情</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

← 页面-组件-自由拖放 →