网页设计与制作教程：用HTML和CSS完成盆栽网站首页布局

完成后的页面应包含导航、横幅和内容分区

网页设计与制作的第一目标不是一上来写很多特效，而是先让页面结构清楚。一个适合新手练习的静态首页，通常包含顶部标识、导航菜单、主题横幅、推荐内容、列表卡片和底部信息。下面的效果图展示了绿色植物主题网站的整体页面比例，后续步骤都围绕这个结果拆解。

先准备项目目录和页面骨架

第1步：建立静态网页项目文件夹

在电脑中创建一个项目文件夹，例如 plant-homepage，内部建议放置 index.html、css/style.css 和 images 三类内容。这样后续修改图片、样式和页面结构时不会混在一起，也便于上传到服务器或 Git 仓库。

如果只是课堂作业或练习项目，不建议把所有 CSS 都写在 HTML 文件里。单独的样式文件能让页面结构更干净，也方便后面继续制作列表页、详情页和留言页。

第2步：写出 HTML 基础区域

打开 index.html，先写出 header、nav、main、section 和 footer。顶部区域放网站名称和导航，主体区域放横幅、介绍和推荐卡片，底部区域放版权或联系方式。这个阶段先不追求视觉效果，只要求标签层级清晰。

完成后用浏览器打开 index.html，应能看到文字按区域顺序排列。如果页面空白，先检查文件是否保存、浏览器地址是否打开了正确文件，以及 HTML 标签是否漏写闭合。

用 CSS 控制版心、配色和导航样式

第3步：设置页面基础样式

在 css/style.css 中先设置 body 的字体、背景色和默认边距，再给主容器设置统一宽度。新手可以先使用 max-width: 1200px 和 margin: 0 auto，让内容在大屏上居中，小屏上再配合百分比宽度适配。

植物主题页面常用绿色、浅灰和白色作为主色。不要给每个模块随意换颜色，顶部导航、按钮和分隔线最好使用同一组绿色，让页面看起来像一个完整网站，而不是几个截图拼在一起。

第4步：制作横向导航菜单

导航可以用 ul 和 li 组织，再用 display: flex 横向排列。当前页面对应的菜单项可以设置背景色或下划线，让读者知道自己停留在哪个栏目。鼠标悬停状态可以使用 :hover，但颜色变化要克制，不要影响文字可读性。

保存 CSS 后刷新浏览器，顶部菜单应横向排列，间距一致，文字不应贴边或换行。如果导航挤在一起，优先检查父元素宽度和 gap 设置。

制作商品网格区并保持图片比例统一

第5步：把推荐内容拆成卡片

首页中部可以放 4 到 8 个推荐卡片，每个卡片包含图片、名称、简介和按钮。HTML 中每个卡片使用同一套结构，CSS 中统一设置边框、圆角、阴影和内边距。这样后面增加盆栽条目时，只需要复制一段卡片结构并替换图片和文字。

第6步：用 grid 或 flex 排列卡片

如果使用 display: grid，可以写 grid-template-columns: repeat(4, 1fr) 做四列布局；如果希望更容易适配小屏，可以写成 repeat(auto-fit, minmax(220px, 1fr))。后者会根据屏幕宽度自动换行，更适合响应式首页。

卡片图片建议设置统一高度，并用 object-fit: cover 裁切填充。这样不同原图尺寸不会把卡片撑得高低不齐。刷新页面后，应该看到卡片列宽一致、上下间距统一，图片不被拉伸变形。

补充详情内容区让页面更像真实网站

第7步：增加介绍、养护或新闻模块

只有一屏商品卡片的页面会显得单薄。可以在首页下方增加“养护知识”“新品介绍”或“品牌故事”模块，用两列布局把图片和文字放在一起。左侧放图片，右侧放标题、段落和按钮，读者会更容易理解网站主题。

写 CSS 时可以给该模块设置 display: flex、gap 和 align-items: center。当屏幕较窄时，再用媒体查询把两列改成上下排列，避免手机上文字被挤压。

检查页面在浏览器中的最终效果

第8步：刷新页面并逐区检查

完成 HTML 和 CSS 后，按 Ctrl + R 或 Command + R 刷新浏览器。检查顺序建议从上到下：导航是否完整、横幅是否居中、卡片是否对齐、详情模块是否留白合理、页脚是否贴在页面底部附近。

如果图片不显示，先检查 src 路径是否相对 HTML 文件正确；如果样式不生效，检查 link rel="stylesheet" href="css/style.css" 是否写在 head 中。不要一边改文件名一边复制路径，否则最容易出现大小写或目录层级错误。

总结

网页设计与制作的核心流程是先定结构，再写样式，最后检查不同区域的视觉一致性。新手做首页时，只要把导航、横幅、卡片、图文模块和页脚按顺序完成，再用 CSS 控制版心、间距和响应式布局，就能做出一页可继续扩展的静态网站。