上一篇
html网站作业
HTML网站作业需掌握页面结构搭建、标签语义化及CSS样式应用，注重布局合理性与跨浏览器兼容性，最终实现功能完整的静态页面展示
HTML网站作业说明
页面结构
| 区域 | 内容描述 |
|---|---|
| 头部（Header） | 包含网站标志（logo）、联系方式（电话、邮箱）、搜索框，logo需可点击返回首页，搜索框具备基本的搜索功能，点击搜索按钮能跳转到搜索结果页面（可模拟）。 |
| 导航栏（Navigation） | 水平排列，包含“首页”“关于我们”“产品展示”“新闻动态”“联系我们”等主要栏目，鼠标悬停时，当前栏目及下拉子菜单（如有）背景色改变，文字颜色加深，突出显示。 |
| 底部（Footer） | 版权信息、友情链接、站点地图，友情链接点击可在新窗口打开对应网站。 |
样式设计
| 元素 | 样式要求 |
|---|---|
| 字体 | 全局使用Arial, Helvetica, sans-serif字体，标题字号为18px，正文14px，导航栏16px。 |
| 颜色 | 主色调为蓝色（#007bff），辅以灰色（#6c757d）用于边框、分隔线，背景色为白色（#ffffff），交替行背景可设为淡灰色（#f8f9fa）。 |
| 布局 | 采用响应式布局，屏幕宽度小于768px时，导航栏变为汉堡菜单，产品卡片单列排列；大于等于768px时，导航栏水平显示，产品卡片多列布局。 |
交互功能
- 表单验证：在“联系我们”页面的留言表单中，姓名、邮箱为必填项，邮箱需符合格式要求,否则提交时弹出提示框。
- 图片轮播：轮播图自动切换间隔为5秒，支持左右箭头手动切换,点击指示器可跳转到对应图片。
- 动态效果：鼠标悬停在产品卡片上时，卡片略微放大，阴影加深；点击导航栏栏目,当前页面平滑滚动至对应区域。
响应式设计
| 设备类型 | 适配要点 |
|---|---|
| 手机 | 导航栏变为汉堡菜单，点击展开；产品卡片单列，图片自适应缩放；表单元素宽度100%。 |
| 平板 | 导航栏水平显示，产品卡片两列布局；图片保持清晰，文字可读性良好。 |
| 桌面 | 展示完整布局，多列排版，充分利用屏幕空间；动画效果流畅。 |
其他要求
- 代码规范：HTML标签嵌套正确，id、class命名有意义，CSS选择器高效,JavaScript代码注释清晰。
- 兼容性：在Chrome、Firefox、Safari主流浏览器最新版本中显示正常,无明显兼容性问题。
相关问题与解答
问题1：如何实现响应式导航栏从水平变为汉堡菜单？
解答：使用媒体查询监听屏幕宽度，当宽度小于设定值（如768px）时，隐藏水平导航栏，显示汉堡图标（可通过CSS设置绝对定位），点击汉堡图标，通过JavaScript切换导航栏的显示状态（如修改display属性）,并将水平导航栏转换为垂直列表样式。
问题2：怎样让产品卡片在鼠标悬停时略微放大并添加阴影？
解答：在CSS中，为产品卡片的父容器添加transition属性，设置过渡效果（如transition: transform 0.3s, box-shadow 0.3s;），鼠标悬停时，使用:hover伪类，通过transform: scale(1.05);实现放大，box-shadow属性设置阴影效果（如box-shadow: 0 4px 8px rgba(0,0,0,0.2);
