简介面向大学生网页设计课程作业的端午节静态HTML网页成品基于DIVCSS布局融合中国传统文化主题适合网页设计初学者、课程设计参考及传统文化展示场景使用。资源压缩包内共43个文件包含24个HTML页面、17张JPG图片、1个GIF动画按钮和1个CSS样式表总大小仅835KB目录结构清晰便于下载后直接打开预览与修改。目前已有4958人浏览学习适合期末作业、课程设计快速借鉴。作品围绕端午节传说、简介、课堂、民俗、留言等模块展开同时运用CSS3图片滚动与悬停效果兼顾信息展示与交互体验。借助Dreamweaver等工具修改配色、文字与图片即可快速搭建一个界面完整的传统文化主题网站既能学习HTML语义化标签与CSS布局规范也能体会网页设计的完整制作思路。1. 端午静态网页作业为什么现在还要手写 DIVCSS每年端午前后都是网页设计课作业的高峰期。中国传统节日静态 HTML 网页这类题目对应的是多数高校《网页设计与制作》课程的期末考核形式不连数据库、不写后端老师验收的是一份能双击打开、在浏览器里直接渲染的 HTML 文件加若干 CSS 文件。有人图省事套模板生成器但生成的代码嵌套混乱、class 命名随机答辩时老师追问一句「这个布局怎么实现的」就答不上来。手写 DIVCSS 的静态页面虽然工作量集中在样式上但结构可控、代码能讲清楚反而是最不容易被扣分的做法。下面的篇幅就按「线框图到交付」的顺序展开页面结构怎么拆、配色和字体怎么定、不加 JavaScript 怎么做出像作品的交互效果以及上交前要过哪些检查。适合正在赶作业的在校生也适合带实训课、需要给学生示范标准化网页写法的助教。2. 先用 HTML 骨架把端午页面拆成 DIV 图层很多同学一上来就写 CSS结果写到一半发现左右栏对不上又回头补标签。正确顺序是先画线框图拿一张纸把主页从上到下分成几个横向大块再决定哪些块里还有纵向或左右排列的小块。端午主题的静态页常见做法是五块结构头部站名加导航、Banner 大图、正文主区左侧边栏加右侧内容、页脚。每一块对应一个 DIV 图层div 是块级元素天然从上往下排列正好符合页面从上往下阅读的习惯这也是课程里「div 图层」这个说法的来源。2.1 body 内的五块骨架代码与标签参数说明下面是一个可以直接保存为 index.html 的最小骨架后面所有样式都围绕这套标签来写!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title中国传统节日——端午节/title link relstylesheet hrefcss/style.css /head body !-- 头部站名与导航 -- div classheader h1端午安康/h1 div classnav a href#origin节日由来/a a href#custom端午习俗/a a href#food时令美食/a a href#poem诗词赏析/a /div /div !-- Banner主题大图区域 -- div classbanner h2五月五是端午/h2 p赛龙舟 · 挂艾草 · 包粽子/p /div !-- 主区左侧边栏 右侧正文 -- div classmain div classsidebar h3端午小知识/h3 ul li节日时间农历五月初五/li li别称端阳节、重午节、龙舟节/li li2009 年入选人类非物质文化遗产代表作名录/li /ul /div div classcontent h3 idorigin节日由来/h3 p端午节起源于上古先民择「飞龙在天」吉日祭拜龙祖、祈福辟邪的习俗后人又融入纪念屈原的传说逐渐成为集拜神祭祖、祈福辟邪、欢庆娱乐为一体的传统节日。/p /div /div !-- 页脚版权信息 -- div classfooter p© 2024 端午网页设计作品 · 中国传统节日专题/p /div /body /html这段代码里有几个参数值得注意。html langzh-CN告诉浏览器和搜索引擎页面语言是简体中文不写的话屏幕阅读器和翻译插件会按默认语言处理。meta charsetUTF-8必须放在 head 最前面否则页面里的中文在部分浏览器下会出现乱码。meta nameviewport contentwidthdevice-width, initial-scale1.0是移动端适配的起点虽然课程作业多半在电脑上演示但加上它之后用手机预览也不会被浏览器自动缩放。link relstylesheet hrefcss/style.css里的 href 是相对路径意思是去 index.html 同级的 css 目录下找 style.css这个目录结构的约定在第 5 章会专门讲。导航里的四个a标签 href 指向的是#origin这类锚点它们对应正文里idorigin的元素。点击导航会跳到对应位置这是纯 HTML 实现页面内跳转的标准做法比写 JavaScript 的 scrollTo 更省代码也更好向老师解释。注意id在整个页面里必须唯一不能出现两个idorigin否则锚点跳转会失效。2.2 左右两栏的三种布局写法与兼容处理正文主区.main内部是典型的左右两栏结构窄的侧边栏放资料卡片宽的内容区放正文。实现左右排列有三种主流写法各有取舍布局方式核心代码优点坑点float.sidebar { float: left; width: 25%; }课程教材最常讲兼容老浏览器父容器高度塌陷需要清除浮动inline-block.sidebar, .content { display: inline-block; vertical-align: top; }写法直观不用清除浮动标签之间的换行空格会形成间隙flex.main { display: flex; gap: 2%; }代码最少间距可控老浏览器对 gap 支持不完整2.2.1 float 布局的宽度陷阱与清浮动如果老师要求「用 DIVCSS 布局」且教材用的是 float我一般会建议交 float 版本但必须处理两个坑宽度总和与父容器塌陷。.main { overflow: hidden; /* 清除浮动让父容器重新包住子元素 */ background-color: #faf8f0; } .sidebar { float: left; width: 25%; padding: 16px; box-sizing: border-box; /* width 包含 padding防止两栏挤爆换行 */ } .content { float: right; width: 72%; padding: 16px; }这里宽度取 25% 和 72% 而不是 25% 和 75%是因为默认的 content-box 模型下width 只算内容宽度padding 和 border 会额外加在 width 外面。两边都加了padding: 16px如果宽度之和是 100%横向就放不下而把第二栏挤到下面去。给两个栏都加上box-sizing: border-box后width 就包含 padding此时用 25% 和 74% 也站得住。多留出 3% 的余量是给侧边栏边框和内边距的变化留缓冲是一种偏保守的写法能避免老师演示时缩小浏览器窗口导致换行。overflow: hidden加在父容器上是清浮动的最短写法原理是让父容器形成新的块级格式化上下文从而把浮动的子元素重新纳入高度计算。还有.clearfix::after { content: ; display: block; clear: both; }这种更规范的写法但课程作业用 overflow 版本完全够用答辩时也能讲清楚。2.2.2 flex 写法的边界如果课程大纲允许 flex代码可以精简不少.main { display: flex; gap: 2%; }子元素不再需要 float也不需要清浮动。但 flex 的gap属性在较老内核的浏览器上不支持校园机房如果是老版本 IE 或旧版 Edgeflex 布局可能直接失效。我的建议是交作业前在机房真实打开一次如果显示异常就切回 float 版本不要赌在线环境。2.3 图片环绕的文字排版float 加 margin 的经典组合端午页面里免不了放粽子和龙舟的照片正文里「图片在左、文字绕在右边」的排版最常用。做法是把图片设置成 float: left后面的文字会自动环绕div classcontent h3 idcustom端午习俗/h3 img srcimages/zongzi.jpg alt手工包粽子 classimg-left p包粽子是端午节最具代表性的习俗之一。粽叶包糯米中间可以放红枣、豆沙或咸蛋黄、鲜肉蒸煮后粽叶的清香渗入糯米咸甜各有拥趸。/p /div.img-left { float: left; width: 220px; height: auto; margin-right: 16px; margin-bottom: 8px; border-radius: 8px; }width: 220px是给图片一个固定的渲染宽度height: auto让高度按原图比例自动缩放避免图片被压扁或拉长。margin-right留出图片和文字之间的间距margin-bottom防止图片底部顶住下一行文字。border-radius: 8px把四角切成圆角视觉上比直角图更柔和适合传统节日这种偏温和的题材。alt 属性不能省——图片加载失败时它显示占位文字屏幕阅读器也靠它读图老师检查网页标准时会专门看这里。文字绕图有个细节如果图片比右侧文字高后面新起的段落也会被挤到图片旁边形成难看的缺口。处理方法是在想结束环绕的段落加clear: both;让这段文字从图片下方重新开始排这也是 float 布局里最常见的控制手段。3. 用 CSS 定端午配色与字体排印配色是「作品感」和「练习感」最大的分水岭。很多课程作业用的是浏览器默认色或随手选的高饱和色红配绿、黄配紫截图放进答辩 PPT 里非常刺眼。端午主题的惯用色其实很统一粽叶的绿、糯米的米白、雄黄酒的红、龙舟木料的深棕。把这四类颜色抽成 CSS 变量后续所有组件引用变量改一处就能换掉整个站点的色调这也是工程上常说的设计令牌思想在单页里的简化应用。3.1 三组主色的十六进制取值与搭配比例CSS 变量定义在根选择器:root里变量名用两个短横线开头这是 CSS 自定义属性的标准写法:root { --leaf-green: #2e7d32; /* 粽叶绿主色 */ --leaf-light: #c8e6c9; /* 浅粽叶绿辅助底色 */ --rice-white: #faf8f0; /* 糯米白页面背景 */ --realgar-red: #b23a2a; /* 雄黄红强调色 */ --wood-brown: #6d4c41; /* 龙舟木棕页脚与分割线 */ --text-main: #333333; /* 正文主色 */ --text-weak: #7a7a7a; /* 次要文字 */ }这套色板的使用比例建议遵循 60-30-10页面背景大面积用糯米白和浅粽叶绿约 60%头部、侧边栏、按钮这些结构块用粽叶绿和木棕约 30%导航高亮、标题点缀用雄黄红只占 10% 左右。红色明度高用多了页面会显得燥放在 hover 状态和少量强调文字上才是正确用法。以下是每个变量对应的用途位置交作业时把这张表的内容写进作品说明里评分老师会认为你有完整的设计思路变量名色值建议用在哪--leaf-green#2e7d32导航栏背景、一级标题、按钮--leaf-light#c8e6c9侧边栏背景、卡片底色--rice-white#faf8f0页面背景、正文底、卡片前景--realgar-red#b23a2a导航 hover、强调文字、banner 标题--wood-brown#6d4c41页脚背景、分割线、辅助装饰--text-main#333333正文默认颜色--text-weak#7a7a7a时间、注释、次要信息注意--text-main不要用纯黑#000000。纯黑在米白底上对比度过高长时间阅读容易累行业里正文通常落在 #333 到 #444 的区间。次要文字也别低于 #666否则在普通屏幕上对比度不足老师投影演示时后排根本看不清。3.2 导航栏的鼠标移入事件与过渡参数导航是用户第一个看到、也是交互最多的元素。这里说的「鼠标移入事件」在纯 CSS 里对应:hover伪类不需要写一行 JavaScript。推荐做法导航背景用粽叶绿文字用米白鼠标移入时背景切换成雄黄红同时加一个轻微的向上位移.header { background-color: var(--leaf-green); padding: 12px 24px; } .nav { display: flex; justify-content: flex-end; /* 导航靠右排列 */ gap: 8px; } .nav a { color: var(--rice-white); text-decoration: none; padding: 6px 14px; border-radius: 4px; transition: background-color 0.25s ease, transform 0.25s ease; } .nav a:hover { background-color: var(--realgar-red); transform: translateY(-2px); /* 向上浮起 2px */ }transition 里有两个参数需要解释0.25s 是过渡时长过短会感觉生硬过长会拖沓0.2s 到 0.3s 是界面中最常见的区间ease 是调速函数表示「开始慢、中间快、结尾慢」比匀速的 linear 更有弹性。transform: translateY(-2px)表示向上移动 2 像素配合背景色变化形成「按钮浮起来」的反馈很多成品模板里那种精致的导航效果原理就到这里。:hover不只能加在 a 上div、li、button 都可以加但只有可交互元素才应该做 hover 反馈普通段落加 hover 反而会让用户困惑。3.3 中文字体栈、行高与首行缩进的排印参数中文网页的字体声明要写「字体栈」因为不同操作系统预装的中文字体不同。Windows 有宋体、微软雅黑macOS 有苹方和宋体-简。兼顾两大系统的写法如下body { font-family: Noto Serif SC, Source Han Serif SC, Songti SC, SimSun, serif; font-size: 16px; line-height: 1.8; color: var(--text-main); background-color: var(--rice-white); }浏览器按从左到右的顺序找字体第一个安装了就全部使用没装就走下一个。把 Noto Serif SC 放前面是因为它开源且观感现代宋体放最后兜底保证老系统也能正常显示衬线中文字形。font-size 定 16px 是浏览器默认字号正文不要小于 14px缩小窗口演示时会糊成一片。line-height 取 1.8 对中文特别重要中文没有英文那样的词间距行距小了整段读起来像一整块1.7 到 2.0 是中文正文的常规区间超过 2.0 段落又会显得松散。正文段落建议加首行缩进两字这是中文排版的习惯格式用 em 单位最可靠——2em 恰好是两个当前字号汉字的宽度字号变了缩进也跟着变.content p { text-indent: 2em; margin: 0.8em 0; }想让页面更有「书卷气」可以给正文里的关键句子加引用样式border-left: 4px solid var(--leaf-light); padding-left: 12px;这比单纯加粗更像杂志排版。到这里页面的底色、文字、导航都有了统一的视觉基调下一步就是用纯 CSS 的交互和动效把「练习」变成「作品」。4. 不加 JS 也能做的交互效果hover、动效与平滑滚动静态网页不等于死板页面。作业要求「静态」通常指没有后端数据交互按钮反馈、图片动效这部分用 CSS 动画就完全够用。这一章做三个效果卡片 hover 抬升、banner 文字无限浮动、锚点平滑滚动加返回顶部全部不引入 JavaScript代码量少且答辩时容易讲。4.1 卡片 hover 抬升与阴影层次把端午习俗做成三张卡片每张是「图片 标题 两行摘要」鼠标移上去时整张卡向上抬并加重阴影。这是现代网页很常见的卡片反馈纯 CSS 写法是给卡片加 transition在 hover 里改 transform 和 box-shadow.card { background-color: #ffffff; border-radius: 10px; padding: 14px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-6px); /* 整卡上移 */ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); /* 阴影加重加深 */ }box-shadow 的前两个数字是水平偏移和垂直偏移这里水平为 0、垂直 12px阴影往下方打配合卡片上移形成「悬空」感。第三个数字 24px 是模糊半径越大阴影边缘越柔和最后是透明度 0.15。静止时阴影用 0 2px 6pxhover 后加重到 0 12px 24px两层阴影的落差就是层次感来源。注意 transform 和 box-shadow 都要写进 transition否则 hover 时阴影是突变而不是渐变效果会大打折扣。三张卡片横向排列继续用 flex 即可.card-list { display: flex; gap: 20px; }每张卡flex: 1让三张等宽。这里有个易错点flex 子项默认会压缩内部图片给.card img设width: 100%; height: 160px; object-fit: cover;后图片会按比例裁切填充而不是变形object-fit: cover是处理不同尺寸图片最省事的属性。4.2 摘要两行超出省略与删除线细节卡片摘要和正文不一样它不需要完整显示超出两行就该省略。两行省略在 CSS 里有标准写法核心是-webkit-line-clamp.card-desc { display: -webkit-box; /* 切换到老式弹性盒模型 */ -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 限制为两行 */ overflow: hidden; color: var(--text-weak); font-size: 14px; line-height: 1.6; }这个写法的原理是display 改成-webkit-box后-webkit-line-clamp: 2把内容限制为两行超出部分由overflow: hidden裁掉行末会自动补出省略号。它是 WebKit 系浏览器的事实标准Chrome、Edge、Safari 都支持Firefox 新版本也兼容。稳妥起见可以在前面先写一行overflow: hidden; text-overflow: ellipsis; white-space: nowrap;做单行省略兜底再写多行版本新浏览器会以后者覆盖前者。另一个出「细节感」的属性是删除线text-decoration: line-through。端午美食板块常放「甜咸粽子之争」这类轻松内容给「不存在的选项」加删除线既幽默又能展示这个属性。注意删除线默认颜色跟随文字颜色想改成浅色可以写成text-decoration: line-through var(--text-weak)第二个参数指定线的颜色。4.3 Banner 的无限浮动动画与关键帧参数banner 大图如果不动页面会显得很安静。给 banner 里的主标题加一个上下浮动的重复动画成本只有几行keyframes floatUpDown { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .banner h2 { animation: floatUpDown 3s ease-in-out infinite; }keyframes floatUpDown定义了一个名为 floatUpDown 的关键帧动画三个关键点分别表示起始位置、中间最高处、回到原位。animation 一行是简写拆开看是四个参数写作业和答辩时按这张表讲就行参数示例值含义animation-namefloatUpDown引用的关键帧名称animation-duration3s单次循环时长animation-timing-functionease-in-out两端慢、中间快的调速函数animation-iteration-countinfinite无限循环ease-in-out 让动画在两端慢、中间快比 linear 更接近自然漂浮的感觉。如果页面还有其他动画注意各自动画时长不要都用相同的整数秒比如一个 3s 一个 4s错开之后观感更丰富。banner 背景本身建议加一层渐变遮罩形成「绿底加深色滤层」的效果保证白字标题清晰可读.banner { background: linear-gradient(rgba(46, 125, 50, 0.65), rgba(46, 125, 50, 0.65)), url(../images/banner.jpg) center / cover no-repeat; padding: 80px 20px; text-align: center; color: #ffffff; }url(../images/banner.jpg)里的../是因为 CSS 文件在 css 目录下相对自身位置往上走一级才是 images 目录。这个相对路径规则最容易写错是上交前必查项。center / cover是 background-position 和 background-size 的合并简写cover 表示图片按比例缩放铺满整个容器多余部分裁掉。4.4 锚点平滑滚动与返回顶部按钮导航跳转在第 2 章的href#origin已经能工作但默认是瞬间跳转。加一行 CSS 就变成平滑滚动html { scroll-behavior: smooth; }写在样式表顶层即可Chrome、Edge、Firefox 都支持。注意写在 html 选择器而不是 body 上写 body 会导致部分浏览器的滚动行为异常。「返回顶部」同样不用 JS用锚点加固定定位实现。在 body 起始处放一个div idtop/div占位元素body 末尾放一个指向 #top 的链接.back-to-top { position: fixed; /* 相对浏览器视口定位 */ right: 24px; bottom: 24px; background-color: var(--leaf-green); color: #ffffff; padding: 10px 14px; border-radius: 50%; text-decoration: none; opacity: 0.85; transition: opacity 0.3s ease; } .back-to-top:hover { opacity: 1; }position: fixed 是相对浏览器视口定位不随页面滚动移动按钮永远停在右下角。opacity 0.85 让按钮常态略透明hover 时变为不透明这个细节很轻但很显眼。纯 CSS 方案下按钮始终显示不像 JS 版本可以做到滚动一定高度后才出现但课程作业的演示场景里始终显示反而更简单答辩时也不会被追问「这段 JS 怎么写」。5. 上交前把目录、meta 与验证清单过一遍作业交的不是一个 html 文件而是整个项目文件夹。老师下载后第一件事是解压并双击 index.html这一步能不能正常打开、图片能不能显示、样式有没有加载决定了第一印象。所以交付环节的核心是目录结构干净、相对路径正确、常见报错清零。5.1 推荐目录结构与相对路径检查建立一个干净的目录结构命名全部用小写字母不要带中文和空格dragon-boat-festival/ ├── index.html ├── css/ │ └── style.css ├── images/ │ ├── banner.jpg │ ├── zongzi.jpg │ ├── dragon-boat.jpg │ └── ai-cao.jpg └── 作品说明.txtindex.html 里的hrefcss/style.css和srcimages/zongzi.jpg都是相对路径含义是相对当前文件所在目录去找目标。只要保持这棵树的结构不被破坏整个文件夹拷到任何电脑上都能正常显示。上交前把文件夹压缩成 zip注意压缩时不要在压缩包里多套一层同名父目录否则老师解压后还要再进一层才能看到 index.html这一步做不好很掉印象分。作品说明.txt 里写三件事页面主题与设计理念两句话、目录结构说明、浏览器兼容性说明写明在 Chrome/Edge 哪个版本上测试通过。这份说明成本极低但能确认「这是学生自己整理过的作品」而不是从网上原样下载的文件夹。5.2 页面标题与 meta 描述会影响演示效果meta 标签层面的检查也是加分项。title 写清楚主题description 描述页面内容浏览器标签页、老师收藏夹里显示的都是这个 titlemeta namedescription content中国传统节日端午节静态网页设计作品包含节日由来、端午习俗、时令美食与诗词赏析。 meta namekeywords content端午节, 中国传统节日, HTML, CSS, 静态网页, DIV布局keywords 标签在搜索引擎里的权重已经很低但课程考核的评分表里有时会列「meta 标签是否完整」这一项写上不吃亏。description 控制在 50 到 80 个字之间搜索引擎结果页会截取这个长度。另一个容易被忽略的是给所有 img 补全 alt 属性以及给导航a加 title 属性鼠标悬停会显示提示文字这都属于「网页标准」类扣分点。5.3 双击打开前的三分钟自检清单以下是我自己交作业前会过一遍的检查顺序假设你也面临机房或老师电脑上现场演示的场合用不同浏览器打开Chrome 和 Edge 各开一次重点看 flex 布局和 hover 动效是否一致出现差异就以机房真实环境为准调整。缩放窗口把浏览器窗口从最宽拉到 1024px看左右两栏是否换行、卡片是否重叠出现挤压就把固定宽度改成百分比或给主区加 min-width。检查图片路径按 F12 打开开发者工具切到 Console 面板出现红色的 404 就是路径错了对照目录结构逐个修正。检查中文乱码用记事本打开 index.html 另存为确认编码是 UTF-8出现乱码多半是文件被存成了 ANSI。验证 HTML 与 CSS把 html 内容粘贴到 W3C 的 Markup Validation Service 校验报错按提示修正CSS 用 W3C CSS 校验服务同样过一遍。课程作业不需要零报错但「img 未闭合」「属性缺引号」这类低级错误至少清零。注意在机房演示前先把 zip 解压到桌面临时目录运行一次确认没有因为压缩包路径问题导致图片丢失或样式缺失再提交最终版。5.4 让样式文件在答辩时「能讲出话」的注释规范最后一个技巧是给 CSS 文件加分节注释。答辩时老师经常直接翻开 CSS 文件问「这个怎么写的」有分节注释的文件老师扫一眼就知道你懂工程结构。参考格式如下/* 1. 全局变量与基础样式 */ :root { --leaf-green: #2e7d32; } /* 2. 头部与导航 */ .header { padding: 12px 24px; } /* 3. 主区布局 */ .main { overflow: hidden; }注释里的等号长线和编号分块是团队代码评审里常见的分区风格它让几百行的 CSS 文件变成能按区块阅读的文档。答辩时被问「布局怎么做的」直接打开第 3 节讲 float 和清浮动比现场滚动屏幕找代码从容得多。配合第 5.1 节的目录结构和 5.2 节的 meta 标签这三个细节凑在一起整份作业的完成度就和其他人拉开了明显的档次。本文还有配套的精品资源点击获取
端午静态网页作业，手写DIV+CSS布局全攻略
简介面向大学生网页设计课程作业的端午节静态HTML网页成品基于DIVCSS布局融合中国传统文化主题适合网页设计初学者、课程设计参考及传统文化展示场景使用。资源压缩包内共43个文件包含24个HTML页面、17张JPG图片、1个GIF动画按钮和1个CSS样式表总大小仅835KB目录结构清晰便于下载后直接打开预览与修改。目前已有4958人浏览学习适合期末作业、课程设计快速借鉴。作品围绕端午节传说、简介、课堂、民俗、留言等模块展开同时运用CSS3图片滚动与悬停效果兼顾信息展示与交互体验。借助Dreamweaver等工具修改配色、文字与图片即可快速搭建一个界面完整的传统文化主题网站既能学习HTML语义化标签与CSS布局规范也能体会网页设计的完整制作思路。1. 端午静态网页作业为什么现在还要手写 DIVCSS每年端午前后都是网页设计课作业的高峰期。中国传统节日静态 HTML 网页这类题目对应的是多数高校《网页设计与制作》课程的期末考核形式不连数据库、不写后端老师验收的是一份能双击打开、在浏览器里直接渲染的 HTML 文件加若干 CSS 文件。有人图省事套模板生成器但生成的代码嵌套混乱、class 命名随机答辩时老师追问一句「这个布局怎么实现的」就答不上来。手写 DIVCSS 的静态页面虽然工作量集中在样式上但结构可控、代码能讲清楚反而是最不容易被扣分的做法。下面的篇幅就按「线框图到交付」的顺序展开页面结构怎么拆、配色和字体怎么定、不加 JavaScript 怎么做出像作品的交互效果以及上交前要过哪些检查。适合正在赶作业的在校生也适合带实训课、需要给学生示范标准化网页写法的助教。2. 先用 HTML 骨架把端午页面拆成 DIV 图层很多同学一上来就写 CSS结果写到一半发现左右栏对不上又回头补标签。正确顺序是先画线框图拿一张纸把主页从上到下分成几个横向大块再决定哪些块里还有纵向或左右排列的小块。端午主题的静态页常见做法是五块结构头部站名加导航、Banner 大图、正文主区左侧边栏加右侧内容、页脚。每一块对应一个 DIV 图层div 是块级元素天然从上往下排列正好符合页面从上往下阅读的习惯这也是课程里「div 图层」这个说法的来源。2.1 body 内的五块骨架代码与标签参数说明下面是一个可以直接保存为 index.html 的最小骨架后面所有样式都围绕这套标签来写!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title中国传统节日——端午节/title link relstylesheet hrefcss/style.css /head body !-- 头部站名与导航 -- div classheader h1端午安康/h1 div classnav a href#origin节日由来/a a href#custom端午习俗/a a href#food时令美食/a a href#poem诗词赏析/a /div /div !-- Banner主题大图区域 -- div classbanner h2五月五是端午/h2 p赛龙舟 · 挂艾草 · 包粽子/p /div !-- 主区左侧边栏 右侧正文 -- div classmain div classsidebar h3端午小知识/h3 ul li节日时间农历五月初五/li li别称端阳节、重午节、龙舟节/li li2009 年入选人类非物质文化遗产代表作名录/li /ul /div div classcontent h3 idorigin节日由来/h3 p端午节起源于上古先民择「飞龙在天」吉日祭拜龙祖、祈福辟邪的习俗后人又融入纪念屈原的传说逐渐成为集拜神祭祖、祈福辟邪、欢庆娱乐为一体的传统节日。/p /div /div !-- 页脚版权信息 -- div classfooter p© 2024 端午网页设计作品 · 中国传统节日专题/p /div /body /html这段代码里有几个参数值得注意。html langzh-CN告诉浏览器和搜索引擎页面语言是简体中文不写的话屏幕阅读器和翻译插件会按默认语言处理。meta charsetUTF-8必须放在 head 最前面否则页面里的中文在部分浏览器下会出现乱码。meta nameviewport contentwidthdevice-width, initial-scale1.0是移动端适配的起点虽然课程作业多半在电脑上演示但加上它之后用手机预览也不会被浏览器自动缩放。link relstylesheet hrefcss/style.css里的 href 是相对路径意思是去 index.html 同级的 css 目录下找 style.css这个目录结构的约定在第 5 章会专门讲。导航里的四个a标签 href 指向的是#origin这类锚点它们对应正文里idorigin的元素。点击导航会跳到对应位置这是纯 HTML 实现页面内跳转的标准做法比写 JavaScript 的 scrollTo 更省代码也更好向老师解释。注意id在整个页面里必须唯一不能出现两个idorigin否则锚点跳转会失效。2.2 左右两栏的三种布局写法与兼容处理正文主区.main内部是典型的左右两栏结构窄的侧边栏放资料卡片宽的内容区放正文。实现左右排列有三种主流写法各有取舍布局方式核心代码优点坑点float.sidebar { float: left; width: 25%; }课程教材最常讲兼容老浏览器父容器高度塌陷需要清除浮动inline-block.sidebar, .content { display: inline-block; vertical-align: top; }写法直观不用清除浮动标签之间的换行空格会形成间隙flex.main { display: flex; gap: 2%; }代码最少间距可控老浏览器对 gap 支持不完整2.2.1 float 布局的宽度陷阱与清浮动如果老师要求「用 DIVCSS 布局」且教材用的是 float我一般会建议交 float 版本但必须处理两个坑宽度总和与父容器塌陷。.main { overflow: hidden; /* 清除浮动让父容器重新包住子元素 */ background-color: #faf8f0; } .sidebar { float: left; width: 25%; padding: 16px; box-sizing: border-box; /* width 包含 padding防止两栏挤爆换行 */ } .content { float: right; width: 72%; padding: 16px; }这里宽度取 25% 和 72% 而不是 25% 和 75%是因为默认的 content-box 模型下width 只算内容宽度padding 和 border 会额外加在 width 外面。两边都加了padding: 16px如果宽度之和是 100%横向就放不下而把第二栏挤到下面去。给两个栏都加上box-sizing: border-box后width 就包含 padding此时用 25% 和 74% 也站得住。多留出 3% 的余量是给侧边栏边框和内边距的变化留缓冲是一种偏保守的写法能避免老师演示时缩小浏览器窗口导致换行。overflow: hidden加在父容器上是清浮动的最短写法原理是让父容器形成新的块级格式化上下文从而把浮动的子元素重新纳入高度计算。还有.clearfix::after { content: ; display: block; clear: both; }这种更规范的写法但课程作业用 overflow 版本完全够用答辩时也能讲清楚。2.2.2 flex 写法的边界如果课程大纲允许 flex代码可以精简不少.main { display: flex; gap: 2%; }子元素不再需要 float也不需要清浮动。但 flex 的gap属性在较老内核的浏览器上不支持校园机房如果是老版本 IE 或旧版 Edgeflex 布局可能直接失效。我的建议是交作业前在机房真实打开一次如果显示异常就切回 float 版本不要赌在线环境。2.3 图片环绕的文字排版float 加 margin 的经典组合端午页面里免不了放粽子和龙舟的照片正文里「图片在左、文字绕在右边」的排版最常用。做法是把图片设置成 float: left后面的文字会自动环绕div classcontent h3 idcustom端午习俗/h3 img srcimages/zongzi.jpg alt手工包粽子 classimg-left p包粽子是端午节最具代表性的习俗之一。粽叶包糯米中间可以放红枣、豆沙或咸蛋黄、鲜肉蒸煮后粽叶的清香渗入糯米咸甜各有拥趸。/p /div.img-left { float: left; width: 220px; height: auto; margin-right: 16px; margin-bottom: 8px; border-radius: 8px; }width: 220px是给图片一个固定的渲染宽度height: auto让高度按原图比例自动缩放避免图片被压扁或拉长。margin-right留出图片和文字之间的间距margin-bottom防止图片底部顶住下一行文字。border-radius: 8px把四角切成圆角视觉上比直角图更柔和适合传统节日这种偏温和的题材。alt 属性不能省——图片加载失败时它显示占位文字屏幕阅读器也靠它读图老师检查网页标准时会专门看这里。文字绕图有个细节如果图片比右侧文字高后面新起的段落也会被挤到图片旁边形成难看的缺口。处理方法是在想结束环绕的段落加clear: both;让这段文字从图片下方重新开始排这也是 float 布局里最常见的控制手段。3. 用 CSS 定端午配色与字体排印配色是「作品感」和「练习感」最大的分水岭。很多课程作业用的是浏览器默认色或随手选的高饱和色红配绿、黄配紫截图放进答辩 PPT 里非常刺眼。端午主题的惯用色其实很统一粽叶的绿、糯米的米白、雄黄酒的红、龙舟木料的深棕。把这四类颜色抽成 CSS 变量后续所有组件引用变量改一处就能换掉整个站点的色调这也是工程上常说的设计令牌思想在单页里的简化应用。3.1 三组主色的十六进制取值与搭配比例CSS 变量定义在根选择器:root里变量名用两个短横线开头这是 CSS 自定义属性的标准写法:root { --leaf-green: #2e7d32; /* 粽叶绿主色 */ --leaf-light: #c8e6c9; /* 浅粽叶绿辅助底色 */ --rice-white: #faf8f0; /* 糯米白页面背景 */ --realgar-red: #b23a2a; /* 雄黄红强调色 */ --wood-brown: #6d4c41; /* 龙舟木棕页脚与分割线 */ --text-main: #333333; /* 正文主色 */ --text-weak: #7a7a7a; /* 次要文字 */ }这套色板的使用比例建议遵循 60-30-10页面背景大面积用糯米白和浅粽叶绿约 60%头部、侧边栏、按钮这些结构块用粽叶绿和木棕约 30%导航高亮、标题点缀用雄黄红只占 10% 左右。红色明度高用多了页面会显得燥放在 hover 状态和少量强调文字上才是正确用法。以下是每个变量对应的用途位置交作业时把这张表的内容写进作品说明里评分老师会认为你有完整的设计思路变量名色值建议用在哪--leaf-green#2e7d32导航栏背景、一级标题、按钮--leaf-light#c8e6c9侧边栏背景、卡片底色--rice-white#faf8f0页面背景、正文底、卡片前景--realgar-red#b23a2a导航 hover、强调文字、banner 标题--wood-brown#6d4c41页脚背景、分割线、辅助装饰--text-main#333333正文默认颜色--text-weak#7a7a7a时间、注释、次要信息注意--text-main不要用纯黑#000000。纯黑在米白底上对比度过高长时间阅读容易累行业里正文通常落在 #333 到 #444 的区间。次要文字也别低于 #666否则在普通屏幕上对比度不足老师投影演示时后排根本看不清。3.2 导航栏的鼠标移入事件与过渡参数导航是用户第一个看到、也是交互最多的元素。这里说的「鼠标移入事件」在纯 CSS 里对应:hover伪类不需要写一行 JavaScript。推荐做法导航背景用粽叶绿文字用米白鼠标移入时背景切换成雄黄红同时加一个轻微的向上位移.header { background-color: var(--leaf-green); padding: 12px 24px; } .nav { display: flex; justify-content: flex-end; /* 导航靠右排列 */ gap: 8px; } .nav a { color: var(--rice-white); text-decoration: none; padding: 6px 14px; border-radius: 4px; transition: background-color 0.25s ease, transform 0.25s ease; } .nav a:hover { background-color: var(--realgar-red); transform: translateY(-2px); /* 向上浮起 2px */ }transition 里有两个参数需要解释0.25s 是过渡时长过短会感觉生硬过长会拖沓0.2s 到 0.3s 是界面中最常见的区间ease 是调速函数表示「开始慢、中间快、结尾慢」比匀速的 linear 更有弹性。transform: translateY(-2px)表示向上移动 2 像素配合背景色变化形成「按钮浮起来」的反馈很多成品模板里那种精致的导航效果原理就到这里。:hover不只能加在 a 上div、li、button 都可以加但只有可交互元素才应该做 hover 反馈普通段落加 hover 反而会让用户困惑。3.3 中文字体栈、行高与首行缩进的排印参数中文网页的字体声明要写「字体栈」因为不同操作系统预装的中文字体不同。Windows 有宋体、微软雅黑macOS 有苹方和宋体-简。兼顾两大系统的写法如下body { font-family: Noto Serif SC, Source Han Serif SC, Songti SC, SimSun, serif; font-size: 16px; line-height: 1.8; color: var(--text-main); background-color: var(--rice-white); }浏览器按从左到右的顺序找字体第一个安装了就全部使用没装就走下一个。把 Noto Serif SC 放前面是因为它开源且观感现代宋体放最后兜底保证老系统也能正常显示衬线中文字形。font-size 定 16px 是浏览器默认字号正文不要小于 14px缩小窗口演示时会糊成一片。line-height 取 1.8 对中文特别重要中文没有英文那样的词间距行距小了整段读起来像一整块1.7 到 2.0 是中文正文的常规区间超过 2.0 段落又会显得松散。正文段落建议加首行缩进两字这是中文排版的习惯格式用 em 单位最可靠——2em 恰好是两个当前字号汉字的宽度字号变了缩进也跟着变.content p { text-indent: 2em; margin: 0.8em 0; }想让页面更有「书卷气」可以给正文里的关键句子加引用样式border-left: 4px solid var(--leaf-light); padding-left: 12px;这比单纯加粗更像杂志排版。到这里页面的底色、文字、导航都有了统一的视觉基调下一步就是用纯 CSS 的交互和动效把「练习」变成「作品」。4. 不加 JS 也能做的交互效果hover、动效与平滑滚动静态网页不等于死板页面。作业要求「静态」通常指没有后端数据交互按钮反馈、图片动效这部分用 CSS 动画就完全够用。这一章做三个效果卡片 hover 抬升、banner 文字无限浮动、锚点平滑滚动加返回顶部全部不引入 JavaScript代码量少且答辩时容易讲。4.1 卡片 hover 抬升与阴影层次把端午习俗做成三张卡片每张是「图片 标题 两行摘要」鼠标移上去时整张卡向上抬并加重阴影。这是现代网页很常见的卡片反馈纯 CSS 写法是给卡片加 transition在 hover 里改 transform 和 box-shadow.card { background-color: #ffffff; border-radius: 10px; padding: 14px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-6px); /* 整卡上移 */ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); /* 阴影加重加深 */ }box-shadow 的前两个数字是水平偏移和垂直偏移这里水平为 0、垂直 12px阴影往下方打配合卡片上移形成「悬空」感。第三个数字 24px 是模糊半径越大阴影边缘越柔和最后是透明度 0.15。静止时阴影用 0 2px 6pxhover 后加重到 0 12px 24px两层阴影的落差就是层次感来源。注意 transform 和 box-shadow 都要写进 transition否则 hover 时阴影是突变而不是渐变效果会大打折扣。三张卡片横向排列继续用 flex 即可.card-list { display: flex; gap: 20px; }每张卡flex: 1让三张等宽。这里有个易错点flex 子项默认会压缩内部图片给.card img设width: 100%; height: 160px; object-fit: cover;后图片会按比例裁切填充而不是变形object-fit: cover是处理不同尺寸图片最省事的属性。4.2 摘要两行超出省略与删除线细节卡片摘要和正文不一样它不需要完整显示超出两行就该省略。两行省略在 CSS 里有标准写法核心是-webkit-line-clamp.card-desc { display: -webkit-box; /* 切换到老式弹性盒模型 */ -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 限制为两行 */ overflow: hidden; color: var(--text-weak); font-size: 14px; line-height: 1.6; }这个写法的原理是display 改成-webkit-box后-webkit-line-clamp: 2把内容限制为两行超出部分由overflow: hidden裁掉行末会自动补出省略号。它是 WebKit 系浏览器的事实标准Chrome、Edge、Safari 都支持Firefox 新版本也兼容。稳妥起见可以在前面先写一行overflow: hidden; text-overflow: ellipsis; white-space: nowrap;做单行省略兜底再写多行版本新浏览器会以后者覆盖前者。另一个出「细节感」的属性是删除线text-decoration: line-through。端午美食板块常放「甜咸粽子之争」这类轻松内容给「不存在的选项」加删除线既幽默又能展示这个属性。注意删除线默认颜色跟随文字颜色想改成浅色可以写成text-decoration: line-through var(--text-weak)第二个参数指定线的颜色。4.3 Banner 的无限浮动动画与关键帧参数banner 大图如果不动页面会显得很安静。给 banner 里的主标题加一个上下浮动的重复动画成本只有几行keyframes floatUpDown { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .banner h2 { animation: floatUpDown 3s ease-in-out infinite; }keyframes floatUpDown定义了一个名为 floatUpDown 的关键帧动画三个关键点分别表示起始位置、中间最高处、回到原位。animation 一行是简写拆开看是四个参数写作业和答辩时按这张表讲就行参数示例值含义animation-namefloatUpDown引用的关键帧名称animation-duration3s单次循环时长animation-timing-functionease-in-out两端慢、中间快的调速函数animation-iteration-countinfinite无限循环ease-in-out 让动画在两端慢、中间快比 linear 更接近自然漂浮的感觉。如果页面还有其他动画注意各自动画时长不要都用相同的整数秒比如一个 3s 一个 4s错开之后观感更丰富。banner 背景本身建议加一层渐变遮罩形成「绿底加深色滤层」的效果保证白字标题清晰可读.banner { background: linear-gradient(rgba(46, 125, 50, 0.65), rgba(46, 125, 50, 0.65)), url(../images/banner.jpg) center / cover no-repeat; padding: 80px 20px; text-align: center; color: #ffffff; }url(../images/banner.jpg)里的../是因为 CSS 文件在 css 目录下相对自身位置往上走一级才是 images 目录。这个相对路径规则最容易写错是上交前必查项。center / cover是 background-position 和 background-size 的合并简写cover 表示图片按比例缩放铺满整个容器多余部分裁掉。4.4 锚点平滑滚动与返回顶部按钮导航跳转在第 2 章的href#origin已经能工作但默认是瞬间跳转。加一行 CSS 就变成平滑滚动html { scroll-behavior: smooth; }写在样式表顶层即可Chrome、Edge、Firefox 都支持。注意写在 html 选择器而不是 body 上写 body 会导致部分浏览器的滚动行为异常。「返回顶部」同样不用 JS用锚点加固定定位实现。在 body 起始处放一个div idtop/div占位元素body 末尾放一个指向 #top 的链接.back-to-top { position: fixed; /* 相对浏览器视口定位 */ right: 24px; bottom: 24px; background-color: var(--leaf-green); color: #ffffff; padding: 10px 14px; border-radius: 50%; text-decoration: none; opacity: 0.85; transition: opacity 0.3s ease; } .back-to-top:hover { opacity: 1; }position: fixed 是相对浏览器视口定位不随页面滚动移动按钮永远停在右下角。opacity 0.85 让按钮常态略透明hover 时变为不透明这个细节很轻但很显眼。纯 CSS 方案下按钮始终显示不像 JS 版本可以做到滚动一定高度后才出现但课程作业的演示场景里始终显示反而更简单答辩时也不会被追问「这段 JS 怎么写」。5. 上交前把目录、meta 与验证清单过一遍作业交的不是一个 html 文件而是整个项目文件夹。老师下载后第一件事是解压并双击 index.html这一步能不能正常打开、图片能不能显示、样式有没有加载决定了第一印象。所以交付环节的核心是目录结构干净、相对路径正确、常见报错清零。5.1 推荐目录结构与相对路径检查建立一个干净的目录结构命名全部用小写字母不要带中文和空格dragon-boat-festival/ ├── index.html ├── css/ │ └── style.css ├── images/ │ ├── banner.jpg │ ├── zongzi.jpg │ ├── dragon-boat.jpg │ └── ai-cao.jpg └── 作品说明.txtindex.html 里的hrefcss/style.css和srcimages/zongzi.jpg都是相对路径含义是相对当前文件所在目录去找目标。只要保持这棵树的结构不被破坏整个文件夹拷到任何电脑上都能正常显示。上交前把文件夹压缩成 zip注意压缩时不要在压缩包里多套一层同名父目录否则老师解压后还要再进一层才能看到 index.html这一步做不好很掉印象分。作品说明.txt 里写三件事页面主题与设计理念两句话、目录结构说明、浏览器兼容性说明写明在 Chrome/Edge 哪个版本上测试通过。这份说明成本极低但能确认「这是学生自己整理过的作品」而不是从网上原样下载的文件夹。5.2 页面标题与 meta 描述会影响演示效果meta 标签层面的检查也是加分项。title 写清楚主题description 描述页面内容浏览器标签页、老师收藏夹里显示的都是这个 titlemeta namedescription content中国传统节日端午节静态网页设计作品包含节日由来、端午习俗、时令美食与诗词赏析。 meta namekeywords content端午节, 中国传统节日, HTML, CSS, 静态网页, DIV布局keywords 标签在搜索引擎里的权重已经很低但课程考核的评分表里有时会列「meta 标签是否完整」这一项写上不吃亏。description 控制在 50 到 80 个字之间搜索引擎结果页会截取这个长度。另一个容易被忽略的是给所有 img 补全 alt 属性以及给导航a加 title 属性鼠标悬停会显示提示文字这都属于「网页标准」类扣分点。5.3 双击打开前的三分钟自检清单以下是我自己交作业前会过一遍的检查顺序假设你也面临机房或老师电脑上现场演示的场合用不同浏览器打开Chrome 和 Edge 各开一次重点看 flex 布局和 hover 动效是否一致出现差异就以机房真实环境为准调整。缩放窗口把浏览器窗口从最宽拉到 1024px看左右两栏是否换行、卡片是否重叠出现挤压就把固定宽度改成百分比或给主区加 min-width。检查图片路径按 F12 打开开发者工具切到 Console 面板出现红色的 404 就是路径错了对照目录结构逐个修正。检查中文乱码用记事本打开 index.html 另存为确认编码是 UTF-8出现乱码多半是文件被存成了 ANSI。验证 HTML 与 CSS把 html 内容粘贴到 W3C 的 Markup Validation Service 校验报错按提示修正CSS 用 W3C CSS 校验服务同样过一遍。课程作业不需要零报错但「img 未闭合」「属性缺引号」这类低级错误至少清零。注意在机房演示前先把 zip 解压到桌面临时目录运行一次确认没有因为压缩包路径问题导致图片丢失或样式缺失再提交最终版。5.4 让样式文件在答辩时「能讲出话」的注释规范最后一个技巧是给 CSS 文件加分节注释。答辩时老师经常直接翻开 CSS 文件问「这个怎么写的」有分节注释的文件老师扫一眼就知道你懂工程结构。参考格式如下/* 1. 全局变量与基础样式 */ :root { --leaf-green: #2e7d32; } /* 2. 头部与导航 */ .header { padding: 12px 24px; } /* 3. 主区布局 */ .main { overflow: hidden; }注释里的等号长线和编号分块是团队代码评审里常见的分区风格它让几百行的 CSS 文件变成能按区块阅读的文档。答辩时被问「布局怎么做的」直接打开第 3 节讲 float 和清浮动比现场滚动屏幕找代码从容得多。配合第 5.1 节的目录结构和 5.2 节的 meta 标签这三个细节凑在一起整份作业的完成度就和其他人拉开了明显的档次。本文还有配套的精品资源点击获取
