CSS 设计联系我们

学习目标

掌握构建语义化 HTML 文档结构的方法，包含头部、横幅、表单及页脚等核心模块。
学习使用 CSS Flexbox 布局实现导航栏的自适应排列与样式美化。
理解媒体查询（Media Queries）原理，实现移动端汉堡菜单的响应式切换效果。
能够独立编写表单样式，优化用户输入体验并提升页面视觉吸引力。

正文内容

页面设计

“联系我们”页面是网站与用户沟通的重要桥梁，主要用于接收用户的咨询、反馈、信息查询或问题报告。对于初学者而言，创建一个既美观又功能完善的页面往往具有挑战性，其核心难点在于 CSS 样式的运用。本文将重点讲解如何利用 HTML 构建骨架，并通过 CSS 实现现代化的视觉效果，最终打造一个适配桌面端与移动端的响应式页面。

设计思路主要包含以下几个关键部分：

结构化文档：清晰划分头部（Header）、横幅（Banner）、联系表单、公司信息及页脚区域。
响应式导航：在桌面端展示完整菜单，在移动端通过汉堡菜单（Hamburger Menu）进行切换。
视觉增强：利用横幅图片欢迎用户，并通过阴影、圆角等 CSS 属性提升表单的质感。
信息展示：专门区域展示公司地址、电话及邮箱，方便用户快速查找。

HTML 结构

HTML 是页面的骨架。我们需要创建一个标准的 HTML5 文档，并在 <body> 中按逻辑顺序组织各个区块。

头部区域 (<header>)：包含 Logo、导航菜单（<nav>）以及“呼叫我们”按钮。为了适配移动端，还预留了汉堡菜单按钮。
横幅区域 (.banner)：放置欢迎图片、主标题及简短描述，营造友好的第一印象。
联系表单 (.contact-form)：包含姓名、邮箱、电话和留言内容的输入框，所有字段均设置了必要的 label 标签以提升可访问性。
公司信息 (.contact-info)：使用 <address> 标签语义化地展示公司联系方式。
页脚 (<footer>)：包含版权信息。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>联系我们 - 技术教程网</title>
</head>

<body>
    <!-- 头部区域 -->
    <header>
        <button class="hamburger" id="hamburger-icon">
            <span onclick="toggleNavbar()"> ☰</span>
        </button>
        <div class="logo">技术教程网</div>
        <nav id="nav-menu">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">业务咨询</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">服务项目</a></li>
            </ul>
        </nav>
        <button class="reachUs-button">立即致电</button>
    </header>

    <!-- 横幅区域 -->
    <section class="banner">
        <!-- 此处使用占位图，实际开发请替换为本地资源 -->
        <img src="http://docs.yuanbengroup.com/upload/image-zBzN.webp"
            alt="欢迎来到联系我们页面">
        <h1>与我们取得联系</h1>
        <p>我们随时准备解答您的任何疑问。</p>
    </section>

    <!-- 联系表单 -->
    <section class="contact-form">
        <div class="form-container">
            <h2>填写您的信息</h2>
            <form action="#" method="POST">
                <label for="name">姓名：</label>
                <input type="text" id="name" name="name" required>

                <label for="email">电子邮箱：</label>
                <input type="email" id="email" name="email" required>

                <label for="phone">联系电话：</label>
                <input type="tel" id="phone" name="phone">

                <label for="message">留言内容：</label>
                <textarea id="message" name="message" rows="4" required></textarea>

                <button type="submit" class="submit-button">提交信息</button>
            </form>
        </div>
    </section>

    <!-- 公司联系信息 -->
    <section class="contact-info">
        <h2>联系方式</h2>
        <address>
            技术教程有限公司<br>
            科技大道 88 号<br>
            北京市海淀区，邮编 100080<br>
            电话：<a href="tel:1234567890">123-456-7890</a><br>
            邮箱：<a href="mailto:info@example.com">info@example.com</a>
        </address>
    </section>

    <!-- 页脚区域 -->
    <footer>
        <p>&copy; 2026 技术教程有限公司。版权所有。</p>
    </footer>
    
    <script src="script.js"></script>
</body>
</html>

CSS 美化

CSS 是页面的灵魂。我们将通过全局重置、Flexbox 布局、卡片式设计以及媒体查询来实现美观且响应式的界面。

全局设置与基础样式

首先消除浏览器默认边距，统一字体家族，并设置 box-sizing: border-box 以便更直观地控制元素尺寸。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

头部导航栏设计

使用 display: flex 实现水平布局，让 Logo、导航和按钮两端对齐。导航链接添加悬停效果，提升交互体验。

/* 头部样式 */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #333;
    color: white;
    height: 4rem;
    position: relative; /* 为绝对定位的子元素提供参考 */
}

.logo {
    font-size: 2rem;
    font-weight: bold;
}

nav {
    width: 30rem;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
}

nav ul li a {
    font-size: 1.2rem;
    padding: 1rem;
    text-decoration: none;
    color: white;
    transition: background-color 0.3s;
}

nav ul li a:hover {
    background-color: #0dac30;
    border-radius: 4px;
}

.reachUs-button {
    padding: 1rem;
    background-color: #0dac30;
    border: none;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.reachUs-button:hover {
    background-color: #1ac840;
}

横幅与表单区域

横幅区域保持简洁居中。表单容器采用卡片式设计，利用 box-shadow 和 border-radius 增加立体感，输入框全宽显示以优化移动端体验。

/* 横幅样式 */
.banner {
    text-align: center;
    background-color: #ffffff;
    margin: 0 auto;
}

.banner img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* 联系表单样式 */
.contact-form {
    padding: 40px 0;
    margin: 0 10px;
}

.form-container {
    max-width: 40%;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.contact-form h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.form-container label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.form-container input, 
.form-container textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 1rem;
    resize: vertical; /* 允许垂直调整大小 */
    font-family: inherit;
}

.submit-button {
    width: 100%;
    padding: 10px 20px;
    background-color: #0dac30;
    border: none;
    color: white;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.submit-button:hover {
    background-color: #1ac840;
}

公司信息与其他区域

公司信息背景色稍作区分，页脚保持深色风格以保持整体一致性。

/* 联系信息样式 */
.contact-info {
    text-align: center;
    padding: 50px 0;
    background-color: #f7f7f7;
}

.contact-info h2 {
    margin-bottom: 20px;
}

.contact-info address {
    font-style: normal;
    line-height: 1.8;
}

/* 页脚样式 */
footer {
    padding: 20px;
    text-align: center;
    background-color: #333;
    color: white;
}

响应式设计

为了让页面在手机等小屏幕设备上也能完美展示，我们需要使用 CSS 媒体查询（Media Queries）隐藏桌面导航，并显示汉堡菜单。同时，配合少量的 JavaScript 实现菜单的展开与收起。

媒体查询

当屏幕宽度小于 768px 时：

隐藏 Logo 和桌面版导航。
显示汉堡菜单图标。
将导航菜单设置为绝对定位，覆盖整个屏幕宽度。

/* 汉堡菜单初始状态 */
.hamburger {
    display: none;
    color: rgb(0, 0, 0);
    font-size: 1.5rem;
    cursor: pointer;
    background: none;
    border: none;
}

/* 媒体查询：针对小屏幕设备 */
@media only screen and (max-width: 768px) {
    .logo {
        display: none;
    }

    .reachUs-button {
        display: none; /* 移动端可隐藏或调整位置 */
    }

    .hamburger {
        display: flex;
    }

    #nav-menu {
        position: absolute;
        top: 4rem;
        left: 0;
        background-color: #333;
        width: 100%;
        display: none; /* 默认隐藏 */
        flex-direction: column; /* 垂直排列 */
        z-index: 1000;
    }

    #nav-menu.active {
        display: flex; /* 激活时显示 */
    }

    #nav-menu ul {
        flex-direction: column;
        width: 100%;
    }

    #nav-menu ul li {
        text-align: center;
        border-bottom: 1px solid #444;
    }
    
    #nav-menu ul li a {
        display: block;
        width: 100%;
    }
    
    .form-container {
        max-width: 90%; /* 移动端表单更宽 */
    }
}

交互脚本

简单的 JS 函数用于切换导航菜单的 active 类名。

// 切换导航菜单显示的函数
function toggleNavbar() {
    const navMenu = document.getElementById("nav-menu");
    navMenu.classList.toggle("active");
}

总结

语义化标签：合理使用 <header>, <nav>, <section>, <address>, <footer> 等标签有助于 SEO 优化和代码可读性。
Flexbox 布局：是处理导航栏对齐和响应式排列的高效工具，能显著减少浮动布局带来的复杂性。
移动端优先思维：通过 @media 查询针对不同屏幕尺寸调整样式，特别是汉堡菜单的实现，是现代网页开发的标配。
用户体验细节：表单的 label 关联、输入框的内边距、按钮的悬停反馈等细节，直接决定了用户的使用感受。

思考题

在当前代码中，如果需要在移动端保留“呼叫我们”按钮而不是将其隐藏，应该如何修改 CSS 媒体查询部分的代码？
表单提交目前使用的是 action="#"，在实际项目中，若要实现真正的邮件发送功能，后端通常需要配合哪些技术或服务？
尝试修改 CSS 变量或颜色代码，将页面的主色调从绿色（#0dac30）更改为蓝色系，并观察对整体视觉风格的影响。