Modèle HTML de la communauté chinoise

791 Jjn

Ouvrir dans l'éditeur Publiez votre code

Recommandé

10 December 2025

Jeu de clic avec améliorations et renaissances

15 January 2026

Baldi's Basics Remastered : Chargeur de jeu WebGL

25 April 2026

Site web portfolio HTML/CSS - Automatisation et projets d'IA

HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中华社区 - 首页</title>
    <style>
        :root {
            --primary-color: #c0392b;
            --secondary-color: #f39c12;
            --text-color: #333;
            --bg-color: #f4f4f4;
        }

body {
            font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
            margin: 0;
            padding: 0;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--bg-color);
        }

header {
            background-color: var(--primary-color);
            color: white;
            padding: 1rem 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

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

.logo {
            font-size: 1.5rem;
            font-weight: bold;
        }

nav ul {
            list-style: none;
            display: flex;
            margin: 0;
            padding: 0;
        }

nav ul li {
            margin-left: 20px;
        }

nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: 500;
        }

.hero {
            background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1508804185872-d7badad00f7d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
            background-size: cover;
            background-position: center;
            height: 400px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            text-align: center;
        }

.hero h1 {
            font-size: 3rem;
            margin-bottom: 10px;
        }

.container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px;
        }

.card {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            margin-bottom: 20px;
        }

.news-item {
            border-bottom: 1px solid #eee;
            padding: 10px 0;
        }

.news-item:last-child {
            border-bottom: none;
        }

.news-item h3 {
            margin: 0 0 5px 0;
            color: var(--primary-color);
        }

.sidebar h2 {
            border-left: 4px solid var(--secondary-color);
            padding-left: 10px;
        }

footer {
            background: #2c3e50;
            color: white;
            text-align: center;
            padding: 20px 0;
            margin-top: 40px;
        }

@media (max-width: 768px) {
            .container {
                grid-template-columns: 1fr;
            }
            nav {
                flex-direction: column;
            }
            nav ul {
                margin-top: 15px;
            }
        }
    </style>
</head>
<body>

<section class="hero">
        <h1>欢迎来到中华社区</h1>
        <p>连接全球华人，传承中华文化</p>
    </section>

<div class="container">
        <main>
            <div class="card">
                <h2>最新动态</h2>
                <div class="news-item">
                    <h3>2023年社区春节联欢晚会圆满落幕</h3>
                    <p>昨晚，我们的社区成功举办了一场精彩纷呈的春晚，吸引了数千名成员参与...</p>
                </div>
                <div class="news-item">
                    <h3>传统书法讲座：领略笔墨魅力</h3>
                    <p>本周六，我们将邀请著名书法家张老师为社区成员带来一场深度讲座...</p>
                </div>
                <div class="news-item">
                    <h3>社区互助计划正式启动</h3>
                    <p>为了更好地服务社区成员，我们推出了全新的互助平台，旨在帮助有需要的家庭...</p>
                </div>
            </div>
        </main>

<aside class="sidebar">
            <div class="card">
                <h2>热门话题</h2>
                <ul>
                    <li># 中秋节习俗讨论</li>
                    <li># 家乡的美食分享</li>
                    <li># 职场交流与建议</li>
                    <li># 汉语学习心得</li>
                </ul>
            </div>
            <div class="card">
                <h2>联系我们</h2>
                <p>邮箱: info@zh-community.com</p>
                <p>电话: 400-123-4567</p>
            </div>
        </aside>
    </div>

</body>
</html>

CSS