Modèle HTML de la communauté chinoise

33 Jjn

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

16 October 2025

Exemple d'animation de chargement CSS

30 July 2025

Modèle HTML de page de paiement par carte Visa

15 July 2025

Modèle HTML de générateur de citations en français

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>

Recommandé

Exemple d'animation de chargement CSS

Modèle HTML de page de paiement par carte Visa

Modèle HTML de générateur de citations en français

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS