AI生成式探究学习教学辅助设计单-5.2 九宫格设计制作_第1页
AI生成式探究学习教学辅助设计单-5.2 九宫格设计制作_第2页
AI生成式探究学习教学辅助设计单-5.2 九宫格设计制作_第3页
AI生成式探究学习教学辅助设计单-5.2 九宫格设计制作_第4页
AI生成式探究学习教学辅助设计单-5.2 九宫格设计制作_第5页
已阅读5页，还剩1页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

AI生成式探究学习教学辅助设计单使用AI名称：DeepSeek班级：学生姓名：子任务名称提示词AI的回应对AI回应的评价我的收获第五模块网站页面布局5.2九宫格设计制作使用HTML5，CSS3，浮动方式相关属性。完成一个九宫格的制作，给出案例代码。 下面是一个使用HTML5和CSS3制作的九宫格案例代码，使用了浮动（float）属性来实现布局。---###1.HTML结构<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>九宫格布局</title><linkrel="stylesheet"href="styles.css"></head><body><divclass="container"><divclass="grid-item">1</div><divclass="grid-item">2</div><divclass="grid-item">3</div><divclass="grid-item">4</div><divclass="grid-item">5</div><divclass="grid-item">6</div><divclass="grid-item">7</div><divclass="grid-item">8</div><divclass="grid-item">9</div></div></body></html>---###2.CSS样式css/*styles.css*//*重置样式*/*{margin:0;padding:0;box-sizing:border-box;}body{font-family:Arial,sans-serif;background-color:#f4f4f4;display:flex;justify-content:center;align-items:center;height:100vh;}.container{width:300px;height:300px;background-color:#fff;border:2pxsolid#333;box-shadow:0010pxrgba(0,0,0,0.1);}.grid-item{width:33.33%;height:33.33%;float:left;border:1pxsolid#333;display:flex;justify-content:center;align-items:center;font-size:24px;font-weight:bold;background-color:#e67e22;color:#fff;transition:background-color0.3sease;}.grid-item:hover{background-color:#d35400;}/*清除浮动*/.container::after{content:"";display:table;clear:both;}---###4.功能说明1.HTML结构：使用一个

container

容器包裹了9个

grid-item，每个

grid-item

代表九宫格中的一个格子。2.CSS样式：使用

float:left;

实现格子的横向排列。每个格子的宽度和高度设置为

33.33%，确保三行三列的布局。使用

flexbox

将格子中的内容居中显示。添加了

hover

效果，当鼠标悬停在格子上时，背景颜色会发生变化。使用

::after

伪元素清除浮动，防止容器高度塌陷。3.响应式设计：九宫格的宽度和高度固定为

300px，你可以根据需要调整容器的大小，或者使用百分比来实现响应式布局。4.运行效果将上述代码保存为

index.html和

styles.css

文件，然后在浏览器中打开

index.html

文件，即可看到一个九宫格布局。每个格子中的数字表示格子的编号，鼠标悬停在格子上时，背景颜色会发生变化。你可以根据需要修改格子的内容和样式，例如添加图片或文字。DeepSeek非常严谨的使用了提示词当中的web前端技术，完成了案例的制作和代码的输出。将代码运行到hbuilder环境当中可以得到这样的一个结果。AI给出的案例代码。兼顾了功能，样式设计。需要仔

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论