CSS+div公益宣传网页制作代码怎么写？-网页设计-锦华智联科技

页面预览

这个页面将包含以下部分：

（图片来源网络，侵删）

顶部导航栏：固定在页面顶部,方便用户快速跳转。
英雄区：引人注目的标题、副标题和行动号召按钮。
问题介绍：图文并茂地介绍公益项目面临的现状和问题。
我们的行动：展示组织正在采取的具体措施。
捐赠/支持方式：清晰地列出如何提供帮助。
志愿者风采：展示志愿者团队,增加信任感。
页脚：包含联系方式、社交媒体链接和版权信息。

最终效果预览

第一步：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>
    <link rel="stylesheet" href="style.css">
    <!-- 引入 Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <header class="main-header">
        <nav class="navbar">
            <a href="#" class="logo">暖巢行动</a>
            <ul class="nav-links">
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于我们</a></li>
                <li><a href="#action">我们的行动</a></li>
                <li><a href="#support">支持我们</a></li>
                <li><a href="#volunteer">志愿者</a></li>
            </ul>
            <a href="#support" class="cta-button">立即行动</a>
        </nav>
    </header>
    <main>
        <!-- 英雄区 -->
        <section id="home" class="hero">
            <div class="hero-content">
                <h1>给它们一个温暖的家</h1>
                <p>加入我们，为街头的流浪动物带去食物、希望和爱，每一次微小的善举，都能改变一个生命的命运。</p>
                <a href="#support" class="cta-button">开始帮助</a>
            </div>
        </section>
        <!-- 问题介绍 -->
        <section id="about" class="problem">
            <div class="container">
                <h2>它们正在经历什么？</h2>
                <div class="problem-grid">
                    <div class="problem-item">
                        <i class="fas fa-utensils"></i>
                        <h3>饥饿与寒冷</h3>
                        <p>在城市的角落里，无数流浪动物面临着食不果腹、无处安身的困境，寒冬来临时，它们的生存更加艰难。</p>
                    </div>
                    <div class="problem-item">
                        <i class="fas fa-procedures"></i>
                        <h3>疾病与伤痛</h3>
                        <p>恶劣的生活环境让它们极易患病，伤痛、皮肤病、传染病时刻威胁着它们的生命，却得不到及时的救治。</p>
                    </div>
                    <div class="problem-item">
                        <i class="fas fa-heart-broken"></i>
                        <h3>孤独与恐惧</h3>
                        <p>被遗弃和流浪的经历，让它们对人类充满了不信任和恐惧，它们渴望关爱，却又不敢靠近。</p>
                    </div>
                </div>
            </div>
        </section>
        <!-- 我们的行动 -->
        <section id="action" class="action">
            <div class="container">
                <h2>我们的行动</h2>
                <p>我们正在尽我们所能，为这些无声的生命带去希望。</p>
                <div class="action-grid">
                    <div class="action-card">
                        <img src="https://via.placeholder.com/400x250.png?text=投喂+基地" alt="日常投喂">
                        <h3>日常投喂与救助</h3>
                        <p>定期组织志愿者在固定地点为流浪动物提供食物和干净的水，并对受伤或生病的动物进行紧急救助。</p>
                    </div>
                    <div class="action-card">
                        <img src="https://via.placeholder.com/400x250.png?text=医疗+救助" alt="医疗救助">
                        <h3>医疗与领养</h3>
                        <p>与合作医院合作，为流浪动物提供绝育、疫苗接种和疾病治疗服务，为健康的动物寻找有爱心的新家。</p>
                    </div>
                    <div class="action-card">
                        <img src="https://via.placeholder.com/400x250.png?text=宣传+教育" alt="宣传教育">
                        <h3>宣传教育</h3>
                        <p>通过社交媒体、社区讲座等形式，宣传科学养宠、文明养宠的理念，鼓励大家用领养代替购买。</p>
                    </div>
                </div>
            </div>
        </section>
        <!-- 支持我们 -->
        <section id="support" class="support">
            <div class="container">
                <h2>您能如何提供帮助？</h2>
                <div class="support-options">
                    <div class="support-option">
                        <i class="fas fa-hand-holding-heart"></i>
                        <h3>资金捐赠</h3>
                        <p>您的每一笔捐款都将直接用于动物的食物、医疗和领养推广，点滴爱心，汇聚成海。</p>
                        <a href="#" class="donate-btn">立即捐赠</a>
                    </div>
                    <div class="support-option">
                        <i class="fas fa-paw"></i>
                        <h3>物资捐赠</h3>
                        <p>我们需要猫粮、狗粮、猫砂、旧毯子、宠物玩具等物资，您的闲置，是它们的珍宝。</p>
                        <a href="#" class="donate-btn">查看清单</a>
                    </div>
                    <div class="support-option">
                        <i class="fas fa-hands-helping"></i>
                        <h3>成为志愿者</h3>
                        <p>加入我们的志愿者团队，参与投喂、清洁、宣传、领养推广等活动，用您的行动传递温暖。</p>
                        <a href="#volunteer" class="donate-btn">加入我们</a>
                    </div>
                </div>
            </div>
        </section>
        <!-- 志愿者风采 -->
        <section id="volunteer" class="volunteers">
            <div class="container">
                <h2>志愿者风采</h2>
                <p>因为有你们，爱才能延续。</p>
                <div class="volunteer-grid">
                    <div class="volunteer-card">
                        <img src="https://via.placeholder.com/150x150.png?text=小明" alt="志愿者小明">
                        <h4>小明</h3>
                        <p>“每次看到它们吃到食物时满足的眼神，就觉得一切都值得了。”</p>
                    </div>
                    <div class="volunteer-card">
                        <img src="https://via.placeholder.com/150x150.png?text=小红" alt="志愿者小红">
                        <h4>小红</h3>
                        <p>“用我的周末，换它们的温暖，是我最幸福的事。”</p>
                    </div>
                    <div class="volunteer-card">
                        <img src="https://via.placeholder.com/150x150.png?text=小李" alt="志愿者小李">
                        <h4>小李</h3>
                        <p>“领养代替购买，给它们一个永远的家。”</p>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <!-- 页脚 -->
    <footer class="main-footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>联系我们</h3>
                    <p><i class="fas fa-phone"></i> 400-123-4567</p>
                    <p><i class="fas fa-envelope"></i> contact@nuanchao.org</p>
                    <p><i class="fas fa-map-marker-alt"></i> 北京市朝阳区XX路XX号</p>
                </div>
                <div class="footer-section">
                    <h3>关注我们</h3>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-weixin"></i></a>
                        <a href="#"><i class="fab fa-weibo"></i></a>
                        <a href="#"><i class="fab fa-tiktok"></i></a>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 暖巢行动. All Rights Reserved. | 京ICP备12345678号</p>
            </div>
        </div>
    </footer>
</body>
</html>

第二步：CSS 代码 (style.css)

这是网页的样式表，负责美化页面，设置颜色、字体、布局和动画效果。

/* --- 全局样式和变量 --- */
:root {
    --primary-color: #ff6b6b; /* 温暖的红色 */
    --secondary-color: #4ecdc4; /* 清新的青色 */
    --dark-color: #2c3e50; /* 深蓝色 */
    --light-color: #f4f4f4; /* 浅灰色背景 */
    --text-color: #333; /* 主要文字颜色 */
    --white: #ffffff;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth; /* 平滑滚动 */
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--white);
}
.container {
    max-width: 1100px;
    margin: auto;
    padding: 0 2rem;
    overflow: hidden;
}
h1, h2, h3 {
    color: var(--dark-color);
    line-height: 1.2;
}
h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    position: relative;
}
h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: var(--primary-color);
}
p {
    margin-bottom: 1rem;
}
a {
    text-decoration: none;
    color: var(--primary-color);
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
.cta-button {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--white);
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.cta-button:hover {
    background-color: #ff5252;
    transform: translateY(-3px);
}
/* --- 导航栏 --- */
.main-header {
    background-color: var(--white);
    box-shadow: var(--shadow);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    max-width: 1100px;
    margin: auto;
}
.navbar .logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--dark-color);
}
.nav-links {
    display: flex;
    list-style: none;
}
.nav-links li a {
    color: var(--text-color);
    padding: 0.8rem 1rem;
    transition: color 0.3s ease;
}
.nav-links li a:hover {
    color: var(--primary-color);
}
/* --- 英雄区 --- */
.hero {
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1518717758536-85ae29035b6d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80') no-repeat center center/cover;
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.hero-content {
    max-width: 800px;
    padding: 0 2rem;
}
.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}
.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}
/* --- 问题介绍 --- */
.problem {
    padding: 4rem 0;
    background-color: var(--light-color);
}
.problem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    text-align: center;
}
.problem-item i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}
/* --- 我们的行动 --- */
.action {
    padding: 4rem 0;
}
.action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}
.action-card {
    background-color: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease;
}
.action-card:hover {
    transform: translateY(-10px);
}
.action-card img {
    height: 200px;
    object-fit: cover;
}
.action-card h3 {
    padding: 1rem;
    color: var(--dark-color);
}
.action-card p {
    padding: 0 1rem 1rem;
    color: #666;
}
/* --- 支持我们 --- */
.support {
    padding: 4rem 0;
    background-color: var(--light-color);
}
.support-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    text-align: center;
}
.support-option i {
    font-size: 3rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
}
.donate-btn {
    display: inline-block;
    background-color: var(--secondary-color);
    color: var(--white);
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    font-weight: bold;
    margin-top: 1rem;
    transition: background-color 0.3s ease;
}
.donate-btn:hover {
    background-color: #45b7aa;
}
/* --- 志愿者风采 --- */
.volunteers {
    padding: 4rem 0;
}
.volunteer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}
.volunteer-card {
    text-align: center;
    background-color: var(--white);
    padding: 2rem 1rem;
    border-radius: 8px;
    box-shadow: var(--shadow);
}
.volunteer-card img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-bottom: 1rem;
    object-fit: cover;
}
/* --- 页脚 --- */
.main-footer {
    background-color: var(--dark-color);
    color: var(--white);
    padding: 2rem 0;
}
.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}
.footer-section p {
    margin-bottom: 0.5rem;
}
.footer-section p i {
    margin-right: 0.5rem;
    color: var(--secondary-color);
}
.social-links a {
    color: var(--white);
    font-size: 1.5rem;
    margin-right: 1rem;
    transition: color 0.3s ease;
}
.social-links a:hover {
    color: var(--secondary-color);
}
.footer-bottom {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #444;
    font-size: 0.9rem;
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        padding: 1rem;
    }
    .nav-links {
        padding: 1rem 0;
    }
    .hero-content h1 {
        font-size: 2.5rem;
    }
    .hero-content p {
        font-size: 1rem;
    }
}

如何使用

创建文件：在您的电脑上创建一个文件夹，charity-website，在该文件夹中，创建两个文件：index.html 和 style.css。
复制代码：将上面提供的 HTML 代码完整地复制并粘贴到 index.html 文件中，将 CSS 代码完整地复制并粘贴到 style.css 文件中。
添加图片：
- 英雄区背景图：您需要替换 style.css 中 hero 类的 background-image URL，您可以从 Unsplash、Pexels 等免费图库下载一张与您公益主题相关的图片，并上传到您的项目文件夹中,然后修改路径。
- 行动卡片和志愿者头像：同样，为 action-card 和 volunteer-card 中的 img 标签替换 src 属性,指向您自己的图片文件。
预览网页：直接用浏览器打开 index.html 文件,您就能看到这个公益宣传网页的完整效果了。

定制化建议

修改主题：只需修改 root 中的 CSS 变量（如 --primary-color）,即可快速改变整个页面的配色方案。
：在 index.html 中，找到 <h1>, <p>, <h2> 等标签，修改其中的文字内容,使其符合您的公益项目。
增加功能：您可以在此基础上增加更多功能，
- 新闻动态：一个展示组织最新新闻或活动的板块。
- 在线表单：在“支持我们”部分添加一个表单,用于收集捐赠意向或志愿者报名信息。
- 轮播图：在英雄区或“我们的行动”部分添加一个图片轮播效果。
- 地图：在“联系我们”部分嵌入一个地图,方便他人找到您的地址。

希望这个完整的代码能帮助您快速制作出精美的公益宣传网页！

（图片来源网络，侵删）