Plantilla HTML para la comunidad china

37 Jjn

Abrir en el editor Video Publica tu código

Recomendado

10 October 2025

Estructura HTML del contenedor de animación CSS

26 June 2025

Perfil de enlaces sociales

8 July 2025

Página de destino de la tienda de muebles

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>

Recomendado

Estructura HTML del contenedor de animación CSS

Perfil de enlaces sociales

Página de destino de la tienda de muebles

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS