一个简单的HTML和CSS示例代码

MAMA6681

于 2024-09-18 21:54:23 发布

阅读量821

点赞数 11

文章标签： html css 前端

本文链接：https://blog.csdn.net/MAMA6681/article/details/142344809

版权

下面是一个简单的HTML和CSS示例代码，用于创建一个庆祝国庆节的网页。这个示例将包含基本的布局、颜色和图像，以体现国庆节的氛围。你可以根据自己的需求进一步扩展和完善这个示例。

HTML 文件 (`index.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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>庆祝中华人民共和国成立</h1>
        <h2>75周年</h2>
    </header>

    <nav>
        <ul>
            <li><a href="#about">关于我们</a></li>
            <li><a href="#events">活动详情</a></li>
            <li><a href="#gallery">图库</a></li>
            <li><a href="#contact">联系我们</a></li>
        </ul>
    </nav>

    <main>
        <section id="about">
            <h2>关于我们</h2>
            <p>在这个特殊的日子里，我们共同庆祝祖国的繁荣昌盛。</p>
        </section>

        <section id="events">
            <h2>活动详情</h2>
            <p>我们将举办一系列活动，以表达对祖国的美好祝愿。</p>
            <ul>
                <li>文艺演出</li>
                <li>知识竞赛</li>
                <li>摄影比赛</li>
            </ul>
        </section>

        <section id="gallery">
            <h2>图库</h2>
            <div class="gallery">
                <img src="https://example.com/nationalday/flag.jpg" alt="国旗">
                <img src="https://example.com/nationalday/cityscape.jpg" alt="城市夜景">
                <img src="https://example.com/nationalday/fireworks.jpg" alt="烟花">
            </div>
        </section>

        <section id="contact">
            <h2>联系我们</h2>
            <p>有任何问题，请通过以下方式联系我们。</p>
            <p>Email: example@example.com</p>
            <p>电话: +86 123456789</p>
        </section>
    </main>

    <footer>
        <p>版权所有 © 2024 庆祝国庆节组织委员会</p>
    </footer>
</body>
</html>

CSS 文件 (`styles.css`)

/* Reset some default browser styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
}

header {
    background-color: #002f6c;
    color: white;
    text-align: center;
    padding: 1rem;
}

nav ul {
    list-style: none;
    background-color: #007acc;
    text-align: center;
    padding: 0.5rem 0;
}

nav ul li {
    display: inline;
    margin-right: 1rem;
}

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

main {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

section {
    margin-bottom: 2rem;
}

.gallery img {
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
}

footer {
    text-align: center;
    padding: 1rem;
    background-color: #002f6c;
    color: white;
}

@media (min-width: 768px) {
    .gallery img {
        width: calc(33.33% - 1rem);
        display: inline-block;
        vertical-align: top;
        margin-bottom: 0;
        margin-right: 0.5rem;
    }
}