糖心vlog:探索丰富的社交平台首页html源码

　　糖心 Vlog 是主打生活化内容的年轻向短视频社交平台，以温暖治愈的社区氛围为特色，聚焦普通人日常影像分享。平台涵盖美食探店、旅行记录、居家日常、手工创作、穿搭美妆、萌宠治愈等多元内容，依托智能推荐算法，精准推送符合用户喜好的优质 Vlog 作品。

　　在这里，每位用户都能轻松剪辑、发布原创短视频，通过点赞、评论、关注与同好互动，结识风格契合的创作者。平台汇聚海量原创达人，搭建创作者成长通道，定期推出主题活动激励优质内容产出。界面设计柔和清爽，操作简洁易上手，兼顾电脑与移动端访问。平台严守社区内容规范，倡导真实、积极、健康的分享氛围，鼓励大家用镜头记录平凡生活里的美好瞬间，打造有温度、有活力的青年线上社交空间。

糖心Vlog – 探索丰富的社交平台

为你推荐

春日野餐Vlog｜和朋友一起的治愈时光

小桃酱 1.2万

独居生活｜一人食的温馨晚餐教程

糖心日记 3.5万

城市探店｜隐藏在小巷里的宝藏甜品店

美食少女 2.8万

宠物日常｜我的小猫也太可爱啦

猫控博主 5.1万

最新发布

手工DIY｜超简单的可爱挂件制作

手工小铺 8900

学习Vlog｜沉浸式备考日常

学霸小星 1.5万

穿搭分享｜春季温柔风穿搭合集

时尚博主 2.2万

音乐翻唱｜甜甜的情歌送给你

歌声甜心 3.0万

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>糖心Vlog - 探索丰富的社交平台</title>
    <!-- 引入图标库 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }

        /* 全局变量：主题色 */
        :root {
            --primary: #ff7b9c;
            --primary-light: #ffb6c1;
            --white: #ffffff;
            --gray: #f5f5f5;
            --dark: #333333;
            --shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        body {
            background-color: var(--gray);
            color: var(--dark);
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        ul {
            list-style: none;
        }

        /* 导航栏 */
        .navbar {
            background: var(--white);
            box-shadow: var(--shadow);
            position: sticky;
            top: 0;
            z-index: 999;
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .nav-menu {
            display: flex;
            gap: 30px;
        }

        .nav-menu a {
            font-size: 16px;
            font-weight: 500;
            padding: 5px 0;
            transition: 0.3s;
        }

        .nav-menu a:hover, .nav-menu a.active {
            color: var(--primary);
            border-bottom: 2px solid var(--primary);
        }

        .nav-right {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .search-box {
            padding: 8px 15px;
            border: 1px solid #ddd;
            border-radius: 20px;
            outline: none;
            width: 200px;
        }

        .login-btn {
            padding: 8px 18px;
            background: var(--primary);
            color: white;
            border-radius: 20px;
            border: none;
            cursor: pointer;
            transition: 0.3s;
        }

        .login-btn:hover {
            background: var(--primary-light);
        }

        /* 轮播Banner */
        .banner {
            max-width: 1200px;
            margin: 20px auto;
            height: 400px;
            background: linear-gradient(to right, #ff9a9e, #fad0c4);
            border-radius: 15px;
            display: flex;
            align-items: center;
            padding: 0 50px;
            color: white;
            position: relative;
            overflow: hidden;
        }

        .banner-text h1 {
            font-size: 36px;
            margin-bottom: 15px;
        }

        .banner-text p {
            font-size: 18px;
            margin-bottom: 25px;
            max-width: 500px;
        }

        .banner-btn {
            padding: 12px 30px;
            background: white;
            color: var(--primary);
            border-radius: 30px;
            font-weight: bold;
            border: none;
            cursor: pointer;
            transition: 0.3s;
        }

        .banner-btn:hover {
            transform: scale(1.05);
        }

        /* 内容容器 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        /* 板块标题 */
        .section-title {
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 20px;
            padding-left: 10px;
            border-left: 4px solid var(--primary);
        }

        /* 视频列表 */
        .video-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }

        .video-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: 0.3s;
        }

        .video-card:hover {
            transform: translateY(-5px);
        }

        .video-cover {
            width: 100%;
            height: 160px;
            background: var(--primary-light);
            object-fit: cover;
        }

        .video-info {
            padding: 12px;
        }

        .video-title {
            font-size: 15px;
            font-weight: 500;
            margin-bottom: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .video-meta {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #666;
        }

        /* 达人推荐 */
        .user-list {
            display: flex;
            gap: 20px;
            overflow-x: auto;
            padding-bottom: 15px;
            margin-bottom: 40px;
        }

        .user-card {
            min-width: 120px;
            text-align: center;
        }

        .user-avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: var(--primary-light);
            margin: 0 auto 10px;
            border: 3px solid white;
            box-shadow: var(--shadow);
        }

        .user-name {
            font-size: 14px;
            font-weight: 500;
        }

        /* 底部 */
        .footer {
            background: var(--dark);
            color: white;
            padding: 40px 20px;
            margin-top: 50px;
        }

        .footer-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 30px;
        }

        .footer-col h3 {
            color: var(--primary);
            margin-bottom: 15px;
        }

        .footer-col ul li {
            margin-bottom: 8px;
            font-size: 14px;
        }

        .copyright {
            text-align: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #444;
            font-size: 13px;
            color: #999;
        }

        /* 响应式适配 */
        @media (max-width: 768px) {
            .nav-menu, .search-box {
                display: none;
            }
            .banner {
                height: 300px;
                padding: 0 20px;
            }
            .banner-text h1 {
                font-size: 26px;
            }
        }
    </style>
</head>
<body>

<!-- 导航栏 -->
<nav class="navbar">
    <div class="nav-container">
        <div class="logo">
            <i class="fa-solid fa-heart"></i> 糖心Vlog
        </div>
        <ul class="nav-menu">
            <li><a href="#" class="active">首页</a></li>
            <li><a href="#">推荐</a></li>
            <li><a href="#">关注</a></li>
            <li><a href="#">分类</a></li>
            <li><a href="#">活动</a></li>
        </ul>
        <div class="nav-right">
            <input type="text" class="search-box" placeholder="搜索你感兴趣的内容...">
            <button class="login-btn">登录 / 注册</button>
        </div>
    </div>
</nav>

<!-- Banner轮播 -->
<div class="banner">
    <div class="banner-text">
        <h1>记录美好生活 · 连接有趣灵魂</h1>
        <p>糖心Vlog，一个充满温暖与创意的社交平台，在这里分享你的日常，发现全世界的精彩瞬间</p>
        <button class="banner-btn">立即探索</button>
    </div>
</div>

<!-- 主内容区 -->
<div class="container">
    <!-- 推荐视频 -->
    <h2 class="section-title">为你推荐</h2>
    <div class="video-grid">
        <div class="video-card">
            <div class="video-cover"></div>
            <div class="video-info">
                <div class="video-title">春日野餐Vlog｜和朋友一起的治愈时光</div>
                <div class="video-meta">
                    <span>小桃酱</span>
                    <span><i class="fa-solid fa-eye"></i> 1.2万</span>
                </div>
            </div>
        </div>
        <div class="video-card">
            <div class="video-cover"></div>
            <div class="video-info">
                <div class="video-title">独居生活｜一人食的温馨晚餐教程</div>
                <div class="video-meta">
                    <span>糖心日记</span>
                    <span><i class="fa-solid fa-eye"></i> 3.5万</span>
                </div>
            </div>
        </div>
        <div class="video-card">
            <div class="video-cover"></div>
            <div class="video-info">
                <div class="video-title">城市探店｜隐藏在小巷里的宝藏甜品店</div>
                <div class="video-meta">
                    <span>美食少女</span>
                    <span><i class="fa-solid fa-eye"></i> 2.8万</span>
                </div>
            </div>
        </div>
        <div class="video-card">
            <div class="video-cover"></div>
            <div class="video-info">
                <div class="video-title">宠物日常｜我的小猫也太可爱啦</div>
                <div class="video-meta">
                    <span>猫控博主</span>
                    <span><i class="fa-solid fa-eye"></i> 5.1万</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 热门达人 -->
    <h2 class="section-title">热门达人</h2>
    <div class="user-list">
        <div class="user-card">
            <div class="user-avatar"></div>
            <div class="user-name">小桃酱</div>
        </div>
        <div class="user-card">
            <div class="user-avatar"></div>
            <div class="user-name">糖心日记</div>
        </div>
        <div class="user-card">
            <div class="user-avatar"></div>
            <div class="user-name">美食少女</div>
        </div>
        <div class="user-card">
            <div class="user-avatar"></div>
            <div class="user-name">旅行家</div>
        </div>
        <div class="user-card">
            <div class="user-avatar"></div>
            <div class="user-name">美妆达人</div>
        </div>
    </div>

    <!-- 最新发布 -->
    <h2 class="section-title">最新发布</h2>
    <div class="video-grid">
        <div class="video-card">
            <div class="video-cover"></div>
            <div class="video-info">
                <div class="video-title">手工DIY｜超简单的可爱挂件制作</div>
                <div class="video-meta">
                    <span>手工小铺</span>
                    <span><i class="fa-solid fa-eye"></i> 8900</span>
                </div>
            </div>
        </div>
        <div class="video-card">
            <div class="video-cover"></div>
            <div class="video-info">
                <div class="video-title">学习Vlog｜沉浸式备考日常</div>
                <div class="video-meta">
                    <span>学霸小星</span>
                    <span><i class="fa-solid fa-eye"></i> 1.5万</span>
                </div>
            </div>
        </div>
        <div class="video-card">
            <div class="video-cover"></div>
            <div class="video-info">
                <div class="video-title">穿搭分享｜春季温柔风穿搭合集</div>
                <div class="video-meta">
                    <span>时尚博主</span>
                    <span><i class="fa-solid fa-eye"></i> 2.2万</span>
                </div>
            </div>
        </div>
        <div class="video-card">
            <div class="video-cover"></div>
            <div class="video-info">
                <div class="video-title">音乐翻唱｜甜甜的情歌送给你</div>
                <div class="video-meta">
                    <span>歌声甜心</span>
                    <span><i class="fa-solid fa-eye"></i> 3.0万</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 底部 -->
<footer class="footer">
    <div class="footer-container">
        <div class="footer-col">
            <h3>关于糖心Vlog</h3>
            <ul>
                <li>平台介绍</li>
                <li>加入我们</li>
                <li>商务合作</li>
                <li>帮助中心</li>
            </ul>
        </div>
        <div class="footer-col">
            <h3>内容规范</h3>
            <ul>
                <li>社区公约</li>
                <li>隐私政策</li>
                <li>用户协议</li>
                <li>举报中心</li>
            </ul>
        </div>
        <div class="footer-col">
            <h3>关注我们</h3>
            <ul>
                <li><i class="fa-brands fa-weibo"></i> 微博</li>
                <li><i class="fa-brands fa-weixin"></i> 微信</li>
                <li><i class="fa-brands fa-qq"></i> QQ</li>
                <li><i class="fa-brands fa-bilibili"></i> B站</li>
            </ul>
        </div>
    </div>
    <div class="copyright">
        © 2025 糖心Vlog 版权所有 | 探索丰富的社交平台
    </div>
</footer>

</body>
</html>

未经允许不得转载：飞行邦网 » 糖心vlog:探索丰富的社交平台首页html源码