Plantilla HTML para la comunidad china

790 Jjn

Abrir en el editor Publica tu código

Recomendado

10 October 2025

Estructura HTML del contenedor de animación CSS

24 May 2024

Animación de desplazamiento de paralaje

28 August 2025

Ejemplo de pestañas CSS: diseño HTML simple

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