文章目录绪论一、新建一个html项目1. 创建项目文件夹与文件2. 使用 Emmet 快速生成 HTML5 骨架3. 使用 Live Server 实时预览页面二、构建 HTML 结构框架1. 理解 div 与 span 标签容器元素2. 登录界面框架设计三、 使用css美化界面绪论本文旨在为零基础的 Web 开发初学者提供一个完整的入门实践指南。我们将通过动手制作一个登录界面来直观地理解 HTML 与 CSS 的核心作用。HTML (HyperText Markup Language)是网页的“骨架”和“内容”。它负责定义网页的结构例如标题、段落、输入框、按钮等元素就像盖房子时搭建的梁柱和墙壁。CSS (Cascading Style Sheets)是网页的“皮肤”和“装饰”。它负责控制网页的视觉表现例如颜色、字体、布局、间距、动画等让房子变得美观、舒适。开发环境准备我们将使用Visual Studio Code (VS Code)作为代码编辑器。您需要从其官网下载并安装 VS Code。在 VS Code 中安装Live Server插件。安装后在 HTML 文件上右键选择 “Open with Live Server”即可在浏览器中实时预览网页代码保存后页面会自动刷新极大提升开发效率。接下来让我们从零开始一步步构建这个登录界面。一、新建一个html项目1. 创建项目文件夹与文件在 VS Code 中新建项目文件夹例如命名为dengluyemian001然后在该文件夹内创建以下项目文件项目结构如下图所示操作步骤详解创建项目文件夹在 VS Code 中通过菜单栏的“文件” → “新建文件夹”或直接在资源管理器中新建一个文件夹命名为dengluyemian001或其他你喜欢的名称。创建项目文件在新建的文件夹内右键选择“新建文件”依次创建以下文件index.html网页的 HTML 主文件。style.cssCSS 样式文件。bg.png背景图片文件可从网络下载或自行准备。fontawesome-free-7.3.0-web/文件夹用于存放 Font Awesome 图标库需从官网下载后放入。完成后的项目结构应与上图一致这样我们就有了一个清晰、规范的项目目录便于后续开发与管理。各文件作用说明index.html网页的主入口文件包含 HTML 结构。style.css样式表文件负责美化页面颜色、布局、字体等。bg.png背景图片用于登录界面的背景图。fontawesome-free-7.3.0-web/Font Awesome 图标库的本地文件夹需要自行下载并放置里面包含我们需要的用户fa-user和锁fa-lock图标。关于 Font Awesome 文件夹的说明本项目使用本地引用的 Font Awesome 图标库而非在线 CDN目的是让图标在离线环境下也能正常显示。你需要在 Font Awesome 官网下载页面 下载免费的Web版本通常是一个.zip文件解压后会得到一个名为fontawesome-free-7.3.0-web版本号可能不同的文件夹。请将整个文件夹直接复制到你的项目目录下然后在index.html的head中通过以下链接引入linkrelstylesheethreffontawesome-free-7.3.0-web/css/all.min.css这样在 HTML 中就可以使用i classfa-solid fa-user/i等类名来显示图标了。后续在“制造整体框架”一节中我们会在登录表单的输入框前使用这些图标。2. 使用 Emmet 快速生成 HTML5 骨架VS Code 内置了强大的Emmet缩写功能可以让我们快速生成标准的 HTML5 文档结构无需手动输入大量重复代码。操作方法在项目文件夹中打开我们刚刚创建的index.html文件。确保文件是空白的并且输入法处于英文状态。在文件的第一行输入一个英文感叹号!。按下键盘上的Tab 键或回车键。此时VS Code 会自动展开并生成如下完整的 HTML5 骨架代码!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metahttp-equivX-UA-CompatiblecontentIEedgemetanameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/title/headbody/body/html小提示这个!是 Emmet 的预设缩写VS Code 原生支持无需安装任何插件。生成后我们可以将title标签中的Document修改为我们的页面标题例如登录页面。在body标签内我们就可以开始编写登录界面的具体 HTML 结构了。HTML标签说明3. 使用 Live Server 实时预览页面在 VS Code 中右键点击index.html文件选择“Open with Live Server”即可在默认浏览器中打开并实时预览当前页面。常见问题Live Server 未自动刷新有时修改代码后浏览器页面可能不会自动刷新。这通常是因为 VS Code 的“自动保存”功能未开启或设置不当。解决方案开启自动保存点击 VS Code 左下角的齿轮图标 ⚙️选择“设置”。在搜索框中输入“自动保存”。找到“Files: Auto Save”选项将其设置为“afterDelay”。将“Files: Auto Save Delay”设置为500即 0.5 秒后自动保存。设置完成后VS Code 会在你停止输入 0.5 秒后自动保存文件Live Server 检测到文件变化就会自动刷新浏览器页面实现真正的“实时预览”。小提示如果开启自动保存时遇到弹窗报错可能是 VS Code 配置文件损坏。可以尝试重启 VS Code或通过“文件” → “首选项” → “设置”界面进行配置避免直接修改 JSON 文件。二、构建 HTML 结构框架在开始编写具体代码之前我们先来理解一下构建网页布局的核心概念——div 标签。1. 理解 div 与 span 标签容器元素在网页制作中divdivision分区标签是一个通用的块级容器元素用于将页面划分为独立的逻辑区块。你可以把它想象成一个“大盒子”每个盒子可以独立设置样式、布局和内容。为什么使用 div结构清晰将页面划分为不同的逻辑部分如头部、主体、侧边栏、底部使代码结构一目了然。便于 CSS 排版通过为 div 设置 class 或 id可以精确控制每个区块的样式和布局实现复杂的页面设计。响应式布局结合 CSS 的 Flexbox 或 Grid 布局div 可以轻松实现适应不同屏幕尺寸的响应式设计。下图展示了一个典型的网页布局结构其中不同颜色的区块就是由不同的 div 容器组成与div相对应的是span标签它是一个行内inline容器。span本身没有特定的语义含义主要用于对文本或行内元素如图标、输入框进行分组以便应用相同的 CSS 样式而不会像div那样独占一行即打断文档流。简单来说div常用于划分大的区块块级元素是页面布局的骨架。span常用于修饰行内的小片段是精细化样式控制的工具。两者都是“容器”但应用的场景和默认的显示方式不同。在我们的登录界面中div用于构建外层容器.container、头部.header和主体.main等大区域而span则用于包裹每一行中的图标和输入框方便我们对它们进行统一的样式设置如定位图标。2. 登录界面框架设计下图清晰地展示了我们即将构建的登录界面的 HTML 结构框架它直观地呈现了由外到内的三层嵌套关系## 3. 编写 HTML 代码1、现在我们将设计图转化为HTML 代码代码如下!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title登录页面/title!-- 引入我们自己的样式文件 --linkrelstylesheethrefstyle.css!-- 引入 Font Awesome 图标库 --linkrelstylesheethreffontawesome-free-7.3.0-web/css/all.min.css/headbody!-- 最外层容器用于居中并承载整个登录框 --divclasscontainer!-- 头部区域放置标题 --divclassheaderh1登录/h1/div!-- 主体区域放置表单 --divclassmainform!-- 账号输入行 --spanclassinput-groupiclassfa-solid fa-user/iinputtypetextplaceholder请输入账号/spanbr!-- 密码输入行 --spanclassinput-groupiclassfa-solid fa-lock/iinputtypepasswordplaceholder请输入密码/spanbr!-- 登录按钮 --buttontypebutton登 录/button/form/div/div/body/html2、保存index.html文件并通过 Live Server 在浏览器中打开你将看到如下效果需要注意的是目前这个登录按钮仅是一个视觉元素点击它不会有任何跳转或验证逻辑。这是因为本教程的核心是HTML 与 CSS 的入门实践专注于界面构建。如果你想实现真正的登录功能如验证账号密码、页面跳转需要在后续学习中为其添加JavaScript代码。现在的页面只有“骨架”没有“皮肤”看起来非常简陋。接下来对登录界面进行美化。三、 使用css美化界面美化后界面如下整体设计逻辑为由外到内由粗到细先全局画布再整体弹窗容器容器内再拆分标题表单两大块先写公共共用样式再单独改写差异化样式最后做图标精细定位收尾再加hover交互效果。学习建议在编写 CSS 时如果遇到不熟悉的属性如box-sizing、position可以随时使用搜索引擎查询其用法和示例。CSS 的学习很大程度上依赖于实践和积累多写多试自然就能熟练掌握。代码如下body{font-family:sans-serif;background-image:url(./bg.png);background-repeat:no-repeat;/* 溢出隐藏 */overflow:hidden;background-size:cover;}.container{width:380px;margin:7% auto;border-radius:25px;background-color:rgba(0,0,0,0.1);/* 阴影部分 */box-shadow:0 0 17px #333;}.header{text-align:center;padding-top:75px;}.header h1{color:#333;font-size:45px;margin-bottom:80px;}.main{text-align:center;}.main input,button{width:300px;height:40px;/* 边框消失 */border:none;/* 选中时的外部边框包围去掉 */outline:none;padding-left:40px;/* 把padding和border的值都算在content里, 盒子模型自动根据padding和border的值来压缩content值不会把盒子撑大*/box-sizing:border-box;font-size:15px;color:#333;margin-bottom:40px;}/* 同权重规则后写的代码样式覆盖先写的代码样式 */.main button{/* 取消左侧空白文字恢复在按钮水平中间区域 */padding-left:0;background-color:#f2d8e4;letter-spacing:1px;font-weight:bold;margin-bottom:70px;box-shadow:0 2px 6px #a88899;border-radius:6px;}/* 增加Hover效果鼠标移到按钮按钮上有阴影效果 */.main button:hover{box-shadow:2px 2px 5px #555;background-color:#b99cab;}/* input输入框同样增加Hover效果 */.main input:hover{box-shadow:2px 2px 5px #555;background-color:#ddd;}/* 解决图标相对定位 */.main span{/* 相对定位 */position:relative;}.main i{position:absolute;left:15px;color:#333;font-size:16px;top:4px}
