仿制哔哩哔哩站点样式

684字约2分钟

技术文档

下面是一个仿照B站（哔哩哔哩）视频展示样式的简单示例。这个示例包括HTML和CSS部分，用于创建一个类似B站的视频展示页面。需要注意的是，这只是一个静态页面的示例，不包括后端逻辑和实际的视频播放功能。

视频卡片可以带有图片。在之前的代码示例中已经包含了图片部分，但为了更清晰地展示如何加载和显示图片，我将代码稍作改进。以下是包含图片的完整代码示例：

HTML部分

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿B站视频展示页面</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="logo">B站仿</div>
        <nav>
            <a href="#">首页</a>
            <a href="#">动画</a>
            <a href="#">番剧</a>
            <a href="#">国创</a>
            <a href="#">音乐</a>
            <a href="#">舞蹈</a>
            <a href="#">科技</a>
            <a href="#">游戏</a>
        </nav>
    </header>
    <main>
        <div class="video-grid" id="videoGrid">
            <!-- 视频卡片将由JavaScript生成 -->
        </div>
    </main>
    <footer>
        <p>&copy; 2024 B站仿</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

CSS部分

/* styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #00a1d6;
    color: white;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

header .logo {
    font-size: 24px;
    font-weight: bold;
}

header nav a {
    color: white;
    text-decoration: none;
    margin: 0 10px;
}

header nav a:hover {
    text-decoration: underline;
}

main {
    padding: 20px;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.video-card {
    background-color: white;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.video-card img {
    width: 100%;
    display: block;
}

.video-info {
    padding: 10px;
}

.video-info h3 {
    font-size: 18px;
    margin: 0 0 10px;
}

.video-info p {
    margin: 0;
    color: #777;
}

footer {
    text-align: center;
    padding: 20px;
    background-color: #00a1d6;
    color: white;
    position: fixed;
    width: 100%;
    bottom: 0;
}

JavaScript部分

// script.js

document.addEventListener('DOMContentLoaded', () => {
    const videos = [
        { title: "视频标题1", thumbnail: "video-thumbnail1.jpg", views: 12000 },
        { title: "视频标题2", thumbnail: "video-thumbnail2.jpg", views: 34000 },
        { title: "视频标题3", thumbnail: "video-thumbnail3.jpg", views: 56000 },
        // 更多视频数据
    ];

    const videoGrid = document.getElementById('videoGrid');

    videos.forEach(video => {
        const videoCard = document.createElement('div');
        videoCard.className = 'video-card';

        const thumbnail = document.createElement('img');
        thumbnail.src = video.thumbnail;
        thumbnail.alt = video.title;

        const videoInfo = document.createElement('div');
        videoInfo.className = 'video-info';

        const title = document.createElement('h3');
        title.textContent = video.title;

        const views = document.createElement('p');
        views.textContent = `播放量: ${formatViews(video.views)}`;

        videoInfo.appendChild(title);
        videoInfo.appendChild(views);

        videoCard.appendChild(thumbnail);
        videoCard.appendChild(videoInfo);

        videoGrid.appendChild(videoCard);
    });
});

function formatViews(views) {
    if (views >= 10000) {
        return (views / 10000).toFixed(1) + '万';
    }
    return views.toString();
}

说明

HTML部分：定义了页面的基本结构，并包含一个带有ID的div，用于JavaScript动态生成视频卡片。
CSS部分：定义了视频卡片的样式，包括图片、标题和播放量的样式。
JavaScript部分：
- 在DOM加载完成后，通过document.addEventListener('DOMContentLoaded')事件触发视频卡片的生成。