简介一套面向大学生网页设计课程的静态购物网站成品采用DIVCSS布局制作整体为汽车商城主题适合作为网页设计课程作业、期末大作业或前端入门练手项目。站点包含首页、列表页、注册页、登录页、详情页和图文页共6个页面导航区域运用了简单的CSS鼠标悬停变色效果整体风格规整兼顾完成度与代码可读性便于学习理解基础布局与样式写法。压缩包共32个文件其中6个HTML页面、1个CSS样式文件配合23张JPG和2张PNG图片素材分别用于产品展示、轮播位、Logo及背景等场景构成完整可运行的站点整体仅1.23MB轻量易用。资料可直接通过Dreamweaver、HBuilder等常见编辑器打开修改方便替换图片、文本与配色快速生成属于自己的购物网站作品。目前已有3154人学习下载适合需要高效完成课程设计或了解静态购物网站页面组织与导航交互的同学参考。1. 一套汽车购物网站模板拆开看比截图更有价值做网页设计作业时最怕的不是不会写代码而是页面交上去被老师问一句“这个导航高亮是怎么实现的”就卡壳。这套 HTML-044-汽车模板正好卡在学生作业的典型需求上6 个页面覆盖首页、列表、详情、注册、登录、图文内容全部静态 HTMLCSS图片素材直接打包在内用 HBuilder 或 Dreamweaver 打开就能改。它的设计水平确实只是学生级但正因如此每行代码都能看懂、每处布局都能讲清反而比某些动辄引入框架的后台模板更适合当作业底稿。如果你正在做“购物网站”或“电商网页”方向的课程设计想快速搭出一套能交差的成品这套模板可以省下大量找图、切图的时间把精力花在把页面之间的联系讲清楚上。2. 解压之后先别急着改目录结构、图片命名与公共骨架2.1 HTML-044-汽车 压缩包里的文件布局把压缩包解压后得到的是一个典型的“页面文件 单一样式表 图片目录”三层结构这和很多学生用 HBuilder 新建站点时自动生成的目录一致。根目录下直接放着index.html、chexing.html、info.html、lishi.html、reg.html、login.html六个页面以及一个css文件夹和一个images文件夹。css下只有style.css一个文件全站样式都集中在这里改一个变量就能影响所有页面适合交作业时统一调色。images目录里图片命名能看出模板作者的使用习惯logo.jpg和logo.png成对出现说明同一个 logo 位准备了两种格式rc-1.jpg到rc-6.jpg这一组是车系展示图b1.jpg、b2.jpg、b3.jpg是 banner 素材其余如1.jpg到8.jpg是通用商品图和背景图。值得一提的还有一张叫a..jpg的图片双点文件名在部分老旧 Apache 服务器上可能触发解析异常建议拿到手先改成a.jpg。页面文件的对应关系可以用下表梳理文件名页面类型作业对应功能点index.html首页导航、banner、商品展示chexing.html列表页商品列表、分类入口info.html详情页商品参数、大图与文本混排lishi.html图文页品牌介绍或发展历程reg.html注册页表单元素、前端校验login.html登录页登录表单、账号输入2.1.1 页面文件与素材文件的分工六个页面共用同一个style.css这是静态多页面站点最朴素的组织方式。好处是样式不重复坏处是任何一处font-size改动都可能影响其他页面改完必须在每个页面都过一遍。图片不建子目录全部平铺在images下页面里引用路径统一写成images/xxx.jpg相对路径结构简单本地双击打开和上传到虚拟主机效果一致这是学生作业最稳妥的路径写法。2.2 每个页面都有的公共头尾打开任意一个 HTML 文件你会看到头部和底部高度相似。头部包含 logo 图、主导航导航项对应的就是另外五个页面这是站内页面互链的核心。以下是从首页抽取的公共头部结构header classsite-header div classlogoa hrefindex.htmlimg srcimages/logo.png alt汽车商城/a/div nav classmain-nav ul lia hrefindex.html首页/a/li lia hrefchexing.html车型列表/a/li lia hrefinfo.html车型详情/a/li lia hreflishi.html品牌历史/a/li lia hreflogin.html登录/a/li lia hrefreg.html注册/a/li /ul /nav /header这段代码里header和nav是 HTML5 语义化标签网页作业里写上能加分。alt汽车商城是图片替代文本搜索引擎收录和老师检查可访问性时都会看。ul包li再套a是导航的标准三层结构CSS 里通过ul li a就能精确控制链接样式不会误伤其他a标签。2.2.1 header 区域的结构代码注意模板里每个页面的导航链接并不相同登录页里“登录”一项没有href链接或者指向自身详情页里“车型详情”同理。这是静态站点的常见做法当前页不加超链接用户一看就知道自己在哪个页面配合第 3 章要讲的 hover 变色就形成了一套完整的导航反馈机制。如果你要改成 Vue 或 React 项目这个思路对应的是路由高亮原理是同一套。3. 首页实现DIV CSS 布局下导航变色、banner 与商品网格3.1 导航鼠标经过变色这行 CSS 的原理和改法摘要里专门提到了导航鼠标经过变色效果这几乎是学生水平 DIV CSS 布局的标配交互所有代码集中在style.css的导航段。核心代码类似这样.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; /* 让 li 水平排列 */ } .main-nav li a { display: block; padding: 12px 20px; color: #333; text-decoration: none; /* 去掉下划线 */ transition: background-color 0.3s ease, color 0.3s ease; } .main-nav li a:hover { background-color: #c00; color: #fff; }这段样式的关键在transition属性它让背景色和文字色变化在 0.3 秒内平滑过渡而不是瞬间跳变。没有这行的效果就是生硬地“刷”一下变色体验差别很大。display: flex替代了传统float: left父容器高度不会塌陷这是新作业和旧模板之间最常见的分水岭。3.1.1 如何把默认样式改成自己的主题色background-color: #c00是正红色如果想改成深蓝或者墨绿顺手把#c00换成你的主色调就行。如果连文字颜色和间距也想调就改padding值。一个常见误用是给ul设置padding: 0却忘记了list-style: none结果导航左边出现一排圆点样式表里list-style: none就是用来干掉这一排圆点的。3.2 banner 区从静态图片到可复用轮播首页头部通常是三张b1.jpg、b2.jpg、b3.jpg轮播大图模板默认只展示一张静态 banner 或手工并排摆放交作业够用但略显单薄。常见做法是改造成最简单的 JavaScript 轮播不引入 jQuery十行代码解决问题。div classbanner-wrap img srcimages/b1.jpg classbanner-img active alt活动主图一 img srcimages/b2.jpg classbanner-img alt活动主图二 img srcimages/b3.jpg classbanner-img alt活动主图三 /divlet current 0; const banners document.querySelectorAll(.banner-img); function showBanner(index) { banners.forEach((img, i) { img.classList.toggle(active, i index); // 只有当前图保留 active 类 }); } setInterval(() { current (current 1) % banners.length; // 循环取余 showBanner(current); }, 3000);CSS 部分给.banner-img设display: none给.active设display: block三张图就按固定间隔切换了。classList.toggle是原生 DOM 接口兼容到 IE10 都没问题。% banners.length保证索引走到末尾后回到 0这是轮播最基础的环形逻辑。3.2.1 banner 图和点击跳转的处理轮播图片通常要能点击进入对应商品做法是在img外层包一层a再把href指到详情页或列表页带锚点的位置。模板里的ad.jpg和ad.png就是为这类广告位准备的宽度比较宽适合做横幅联播。注意三张 banner 的尺寸最好一致模板里原始图片比例不统一的话用 CSS 设width: 100%; height: 350px; object-fit: cover;统一裁切图片会居中裁剪避免拉伸变形。3.3 float 还是 flex商品卡片布局的取舍商品区域是首页的主体模板大概率用float: left排列四列商品。float 布局是十年前的主流特点是写完就塌陷父容器必须加overflow: hidden或者换用clearfix:after清浮动。模板里 stylesheet 的底部通常能找到类似以下代码.clearfix:after { content: ; display: block; clear: both; visibility: hidden; height: 0; }这段代码是经典的 float 清理方案。与之相比Flexbox 不需要这堆写法justify-content: space-between就能让一排四张卡片均匀分布。我的建议是如果只是交作业且老师没硬性要求布局方式保留 float 即可顺手写上clearfix如果想在简历里展示改成 Flex 更现代。.product-grid { display: flex; flex-wrap: wrap; gap: 20px; /* 卡片间隙替代 margin */ } .product-card { width: calc(25% - 15px); /* 四列减去间隙 */ box-sizing: border-box; }gap属性省掉了手写 margin 的麻烦calc(25% - 15px)在四列布局里特别实用不用算间距容器宽度留 20px 给 wrap 换行后的空隙即可。这里box-sizing: border-box很关键它让 padding 计入宽度不会出现卡片比预设宽度多出几个像素导致换行错位的经典问题。4. 注册、登录、详情与图文页表单校验和内容型页面怎么写4.1 注册页和登录页表单控件的正确姿势reg.html和login.html组成了账号体系的两件套。模板里的表单用最传统的table布局还是div排列都能看到重点是input标签的type类型设置是否规范。注册页通常包含用户名、密码、确认密码和邮箱登录页则只保留用户名和密码。这里给出表单区域的核心代码form action methodpost onsubmitreturn checkForm() label forusername用户名/label input typetext idusername nameusername placeholder请输入用户名 required label forpassword密码/label input typepassword idpassword namepassword placeholder6-16位字母或数字 required button typesubmit注册/button /formfunction checkForm() { var username document.getElementById(username).value.trim(); var password document.getElementById(password).value; if (username.length 3) { alert(用户名至少3个字符); return false; } if (password.length 6 || password.length 16) { alert(密码长度需在6到16位之间); return false; } return true; }required是 HTML5 原生必填校验触发时浏览器弹出内置提示不需要写 JavaScript。onsubmitreturn checkForm()是在提交瞬间执行的验证函数返回false会阻止表单提交这就是静态页面里前端验证的运行机制。注意action表示提交到当前页面真正的后台接收地址要在服务器环境里配置作业演示只用把前端验证做到位即可。4.1.1 登录页的布点与跳转逻辑登录页的login.html通常在表单下方给一个“前往注册”的链接注册页给一个“已有账号去登录”的链接两个页面互跳形成闭环。这是网站作业最容易漏掉的部分。演示时老师往往会点一下如果跳转缺失印象分会扣不少。检查时看两个页面底部有没有对应的a hrefreg.html和a hreflogin.html即可。4.2 info.html 详情页大图、参数表和图文混排详情页info.html的结构值得单独说因为它是模板里信息密度最高的页面。左侧通常放商品大图右侧放名称、价格、参数简述和“加入购物车”按钮下方是详细说明图文区。这种上左右的下三栏结构在电商页面里叫“详情三级结构”是所有购物网站的通用骨架。详情里的参数表适合用table呈现border0配合 CSS 控制行线视觉上比一长串p干净。模板里rc-1.jpg到rc-6.jpg就分散在详情页各段落中对应不同角度或不同配置的展示图。如果改为自己的商品图片尺寸统一为 600x400 等比缩放显示器上效果最好。另一个细节是.price类的配色模板里一般用红色或橙色。价格在电商语境里是强提示色值要跟导航 hover 色系一致如果导航是#c00价格最好保持同色系而不是突然用蓝色否则整体视觉会散。4.3 lishi.html 图文页内容型页面怎么排才不空lishi.html标题直译是“历史”对应模板里可能是品牌故事或发展历程的图文页。这类页面的关键是如何把文字和图片交替排布而不显得呆板。常用手法是图片左文右、下一段文左图右形成回字形布局。模板里aa.jpg、timg.jpg多用于此段。section classhistory-block clearfix div classhistory-imgimg srcimages/aa.jpg alt品牌创立初期/div div classhistory-text h3品牌初创/h3 p这里填写品牌创立的背景故事结合图片形成图文混排效果。/p /div /section配套 CSS 让.history-img和.history-text左右各占一半即可。如果想让这个页面更有网页感把h3加上border-left: 4px solid #c00; padding-left: 10px;自动产生一条强调竖线页面不空洞还显得设计过。内容型页面最怕全是字加入引用块blockquote或时间线数据能显著提升观感。5. 把作业改成能放上简历的作品兼容性、可维护性与提交检查5.1 全局替换路径与占位文案拿到模板后第一步不是改样式而是把占位内容和死链全部替换掉。常见的占位占位文本是lorem段落或“此处填写内容”在 HBuilderX 里按CtrlShiftF全局搜索逐个页面替换成自己的商品文案和品牌信息。图片路径如果改了名也要同步改 HTML 里的src引用。图片很多时用脚本批量替换更省力但要先确认文件名没有重名冲突。5.2 CSS 变量统一主题色和间距模板的style.css里如果存在大量重复色值可以顺手升级成 CSS 变量提交作业时还能多一个知识点可讲:root { --primary-color: #c00; --text-color: #333; --gap: 20px; }把导航 hover 的background-color、价格色、按钮背景色全部替换为var(--primary-color)。以后改主题色只动:root一处全站同步。注意:root的优先级比通配符高但低于类样式覆盖前要确认原样式没有!important。5.3 提交前的验证清单最后过一遍以下检查项能避开大多数扣分点检查项操作方法预期结果页面间跳转依次点击六个页面的导航无 404、无空白页图片加载打开浏览器开发者工具无红字 404 图片请求表单验证注册页输入空用户名提交浏览器拦截并提示导航 hover鼠标悬停每个导航链接背景色和文字色平滑变化页面编码查看 meta 标签charsetutf-8存在且无乱码记住把a..jpg这种异常文件名先改掉否则传到部分 Linux 服务器上图片直接裂图。这套模板本身的完成度已经能覆盖作业的主要验收点剩下的润色工作就是在检查清单里逐项打勾把每个页面都过一遍而不只看index.html。本文还有配套的精品资源点击获取