纯 HTML/CSS 打造响应式联系页面：You-Dont-Need-JavaScript 项目 contact-us 组件实战解析

纯 HTML/CSS 打造响应式联系页面：You-Dont-Need-JavaScript 项目 contact-us 组件实战解析

【免费下载链接】You-Dont-Need-JavaScriptCSS is powerful, you can do a lot of things without JS.项目地址: https://gitcode.com/gh_mirrors/yo/You-Dont-Need-JavaScript

本指南以 You-Dont-Need-JavaScript 开源仓库中的 contact-us 组件 为核心，完整讲解如何仅用 HTML5 与 CSS3 实现一个无需任何 JavaScript 的响应式联系页面（Contact Us Page）。该组件融合地址、电话、邮箱展示与留言表单于一体，可直接嵌入 E-Shop、Portfolio、公司落地页等场景。读完本文，你将掌握双栏布局实现、Font Awesome 图标集成、按钮 hover 交互以及两档响应式断点的完整落地方法。

一、组件定位：为什么需要一个纯 CSS 的联系页面

在 You-Dont-Need-JavaScript 仓库中，作者通过大量 Demo 证明了"CSS 足够强大，很多事情不需要 JS 就能完成"，README 的 Website Demo 章节 即汇集了这类纯 HTML/CSS 的站点级示例。contact-us 正是其中"Websites and UI"类别下的一个完整页面组件，解决的是许多项目常见的痛点：站点有产品、有导航，却唯独缺少一个联系入口，或者联系表单过度依赖 JavaScript 库。

该组件以最小依赖（HTML + CSS + 一个图标字体 CDN）交付了一个可直接使用的联系区块，符合仓库"无 JS 也能做出完整 UI"的核心主张。

二、功能特性与页面结构总览

根据 contact-us/readme.md，页面具备四项核心能力：

• 全设备响应式布局：桌面双栏、移动端单栏堆叠，适配手机、平板与桌面；
• 友好的表单设计：姓名、邮箱、留言三组输入，占位提示清晰；
• 简洁优雅的 UI 与 hover 效果：紫色主色调 + 按钮悬停变色反馈；
• 纯 HTML/CSS 实现：零 JavaScript，零框架依赖。

页面由左右两大部分组成：

对应源码中，左侧三组信息分别由 index.html 中带details类的三个区块承载，右侧表单由 index.html 的right-side区块承载。

三、HTML 骨架：信息区 + 表单区

页面 HTML 结构非常清晰，整体分为三层嵌套：.container（外容器）→.content（双栏容器）→.left-side/.right-side（左右两栏）。

左侧联系方式区（index.html）每组信息都遵循"图标 + 标题 + 两行文本"的模式：

<div class="left-side"> <div class="address details"> <i class="fa-solid fa-location-dot"></i> <div class="topic">Address</div> <div class="text1">Surkhet NP12</div> <div class="text2">Birendranagar 06</div> </div> <div class="Phone details"> <i class="fa-solid fa-phone"></i> <div class="topic">Phone</div> <div class="text1">+0098 9893 5647</div> <div class="text2">+0096 3434 5678</div> </div> <div class="Email details"> <i class="fa-solid fa-envelope"></i> <div class="topic">Phone</div> <div class="text1">codinglab@gmail.com</div> <div class="text2">info.codinglab@gmail.com</div> </div> </div>

三个关键实现细节：

1. 图标依赖 Font Awesome 6：页面通过 head 区的 CDN 链接 引入font-awesome/6.5.2，并带integrity与crossorigin属性做 SRI 完整性校验。图标类名分别为fa-location-dot（定位）、fa-phone（电话）、fa-envelope（信封）；
2. 内容可直接替换：地址、电话、邮箱均为纯文本占位，接入真实项目时只需替换text1/text2内的字符串即可，无需改动任何样式；
3. topic与text分层：topic为加粗标题，text1/text2为灰色副文本，视觉层级由 CSS 统一控制。

右侧留言表单区（index.html）包含标题、引导文案与三组输入：

<div class="right-side"> <div class="topic-text">Send us a message</div> <p>If you have any work from me or any types of quries related to my tutorial, you can send me message from here. It's my pleasure to help you.</p> <form action="#"> <div class="input-box"> <input type="text" placeholder="Enter your name"> </div> <div class="input-box"> <input type="text" placeholder="Enter your email"> </div> <div class="input-box message-box"> <textarea></textarea> </div> <div class="button"> <input type="button" value="Send Now"> </div> </form> </div>

表单区同样有两点值得注意：姓名与邮箱输入框复用了统一的input-box样式类，留言框额外叠加message-box类以获得更高的最小高度；提交按钮使用input[type="button"]而非submit，因此当前版本只负责 UI 展示，实际发送逻辑需要自行接入后端或第三方表单服务（如 Formspree 等，仓库未内置）。

四、CSS 核心：布局、配色与交互

样式集中在 style.css 中，全部逻辑无一行 JavaScript，从上到下依次是基础重置、布局、组件样式与响应式媒体查询。

4.1 全局基础与页面容器

style.css 通过 Google Fonts 引入 Poppins 字体族，并做了统一的重置：

* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; user-select: none; } body { min-height: 100vh; width: 100%; background: #cbe8e9; display: flex; align-items: center; justify-content: center; }

• box-sizing: border-box保证width: 100%的输入框含内边距仍能精确撑满父容器；
• body 使用 Flexbox 居中，让白色卡片始终处于视口中央；
• 背景色#cbe8e9（浅蓝绿）与白色卡片形成柔和对比；
• 主容器.container宽度为80%，带6px圆角、内边距与0 5px 10px rgba(0,0,0,0.2)阴影，营造浮层效果。

4.2 双栏布局与左侧分隔线

style.css 定义了左右两栏的核心布局：

.container .content { display: flex; align-items: center; justify-content: space-between; } .container .content .left-side { width: 25%; ... flex-direction: column; position: relative; } .content .left-side::before { content: ''; position: absolute; height: 70%; width: 2px; right: -15px; top: 50%; transform: translateY(-50%); background: #afafb6; } .container .content .right-side { width: 75%; margin-left: 75px; }

实现要点：

• 左右宽度配比为25% : 75%，右侧表单占据主导；
• 左右栏之间的灰色竖线并非元素，而是left-side的::before伪元素：绝对定位在右边缘外侧（right: -15px），高度 70%、宽度 2px、垂直居中，实现成本为零；
• 左侧图标统一为 30px、紫色#3e2093，topic为 18px / 500 字重，text1、text2为 14px 灰色#afafb6，形成"标题醒目、内容次之"的层级。

4.3 表单控件与发送按钮

style.css 定义了输入控件与按钮样式：

.right-side .input-box { height: 50px; width: 100%; margin: 12px 0; } .right-side .input-box input, .right-side .input-box textarea { height: 100%; width: 100%; border: none; font-size: 16px; background: #f0f1f8; border-radius: 6px; padding: 0 15px; resize: none; } .right-side .message-box { min-height: 110px; } .right-side .button input[type="button"] { color: #fff; font-size: 18px; ... padding: 8px 16px; border-radius: 6px; background: #3e2093; cursor: pointer; transition: all 0.3s ease; -webkit-tap-highlight-color: transparent; } .button input[type="button"]:hover { background: #5029bc; }

交互与细节：

• 输入框统一#f0f1f8浅灰底、无边框、6px圆角，视觉干净；resize: none禁止 textarea 被拖拽变形；
• 留言框最小高度 110px，配合padding-top: 10px让光标起始位置不贴顶；
• 按钮默认紫色#3e2093，transition: all 0.3s ease提供平滑过渡，hover时变为更亮的#5029bc，即 readme 中提到的 hover 效果；
• -webkit-tap-highlight-color: transparent消除移动端点击时的蓝色高亮，属于移动端体验优化细节。

4.4 响应式断点：两档媒体查询

style.css 通过两档@media完成全部响应式适配，这是组件"全设备适配"承诺的实现核心：

第一档max-width: 952px（平板及以下）：容器宽度从 80% 收窄到 90%，内边距同步缩小，保证中等屏幕下卡片不贴边、不拥挤。

第二档max-width: 820px（手机等窄屏）是布局重构的关键：

@media (max-width:820px) { .container { margin: 40px 0; height: 100%; } .container .content { flex-direction: column-reverse; } .container .content .left-side { width: 100%; flex-direction: row; margin-top: 40px; justify-content: center; flex-wrap: wrap; } .container .content .left-side::before { display: none; } .container .content .right-side { width: 100%; margin-left: 0; } }

窄屏适配的三个精妙之处：

1. flex-direction: column-reverse让表单先出现、联系方式后出现——用户在移动端优先看到可交互的表单；
2. 左侧联系方式从垂直堆叠切换为flex-direction: row+flex-wrap: wrap，三组信息横向排布并自动换行，充分利用窄屏宽度；
3. 两栏之间的伪元素分隔线在窄屏下display: none隐藏，避免竖向线条破坏单栏布局的视觉连贯性。

五、使用方法与定制指南

依据 contact-us/readme.md 的说明，接入步骤仅三步：

1. 获取文件：克隆或下载仓库，取得contact-us/目录下的 index.html 与 style.css（图片资源 ui.png 仅为预览图，运行不需要）；
2. 打开页面：直接用任意现代浏览器打开index.html即可看到完整效果，无需构建工具、无需服务器；
3. 按需定制：替换左侧联系方式文本、修改表单占位符、调整style.css中的主色#3e2093与背景色#cbe8e9即可匹配站点品牌色。

常见定制点速查：

六、组件边界与已知说明

需要如实说明的是，该组件存在一些使用边界：

• 表单无提交逻辑：按钮为type="button"，form的action="#"，页面本身不发送数据，生产环境需自行接入表单后端或第三方托管服务；
• 依赖外部 CDN：Font Awesome 图标与 Poppins 字体均来自 cdnjs / Google Fonts，离线环境下图标会缺失，可改为本地字体文件；
• 语义化可改进：仓库 README 开头也提示过，这类纯 CSS Demo 可能存在可访问性（键盘导航、渐进增强）方面的不足，例如联系方式标题未使用语义标签、textarea无name属性，接入正式站点时建议补充<label>与aria属性。

七、小结

contact-us 是一个麻雀虽小五脏俱全的纯 CSS 页面组件：25%/75% 双栏布局、伪元素分隔线、统一的输入控件样式、hover 过渡动画，以及 952px / 820px 两档响应式断点，完整展示了"不写一行 JS 也能交付现代联系页面"的可行路径。对于需要快速补齐联系区块的 E-Shop、Portfolio 或公司落地页项目，直接复用该组件并按上表定制，即可获得与页面整体风格一致的响应式联系体验。

【免费下载链接】You-Dont-Need-JavaScriptCSS is powerful, you can do a lot of things without JS.项目地址: https://gitcode.com/gh_mirrors/yo/You-Dont-Need-JavaScript