AI生成式探究学习教学辅助设计单-5.2 九宫格设计制作.docx

AI生成式探究学习教学辅助设计单

使用AI名称：DeepSeek班级：学生姓名：

子任务名称

提示词

AI的回应

对AI回应的评价

我的收获

第五模块网站页面布局

5.2九宫格设计制作

使用HTML5，CSS3，浮动方式相关属性。完成一个九宫格的制作，给出案例代码。

下面是一个使用HTML5和CSS3制作的九宫格案例代码，使用了浮动（float）属性来实现布局。

---

###1.HTML结构

!DOCTYPEhtml

htmllang=zh-CN

head

metacharset=UTF-8

metaname=viewportcontent=width=device-width,initial-scale=1.0

title九宫格布局/title

linkrel=stylesheethref=styles.css

/head

body

divclass=container

divclass=grid-item1/div

divclass=grid-item2/div

divclass=grid-item3/div

divclass=grid-item4/div

divclass=grid-item5/div

divclass=grid-item6/div

divclass=grid-item7/div

divclass=grid-item8/div

divclass=grid-item9/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和?