AI生成式探究学习教学辅助设计单-3.1 了解CSS选择器.docx

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

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

子任务名称

提示词

AI的回应

对AI回应的评价

我的收获

第三模块网站页面美化（CSS）

3.1了解CSS选择器

使用HTML5，CSS3语言，编写一个文字变化的网页。要求当鼠标经过时文字的颜色发生变化，给出案例代码。

下面是一个使用HTML5和CSS3实现的简单网页示例，当鼠标经过文字时，文字的颜色会发生变化。

###HTML(index.html)

```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

h1鼠标经过我，我会变色！/h1

/div

/body

/html

```

###CSS(styles.css)

```css

/*设置页面基本样式*/

body{

display:flex;

justify-content:center;

align-items:center;

height:100vh;

margin:0;

background-color:#f0f0f0;

font-family:Arial,sans-serif;

}

/*容器样式*/

.container{

text-align:center;

}

/*初始文字样式*/

h1{

font-size:3rem;

color:#333;

transition:color0.3sease;/*添加颜色变化的过渡效果*/

}

/*鼠标经过时的文字样式*/

h1:hover{

color:#ff6347;/*鼠标经过时文字变为橙色*/

}

```

###说明

1.**HTML部分**：创建了一个简单的网页结构，包含一个标题文字（`h1`）。

2.**CSS部分**：

-使用`transition`属性为文字颜色添加了平滑的过渡效果。

-当鼠标经过文字时，通过`:hover`伪类将文字颜色从默认的`#333`（深灰色）变为`#ff6347`（橙色）。

###使用方法

1.将HTML和CSS代码分别保存为`index.html`和`styles.css`文件。

2.打开`index.html`文件即可在浏览器中查看效果。当鼠标经过标题文字时，文字颜色会平滑地变为橙色。

###扩展

你可以根据需要修改颜色、字体大小或添加其他效果。例如，可以添加背景颜色变化、文字大小变化等。以下是一个扩展示例：

```css

h1:hover{

color:#ff6347;/*文字颜色变化*/

background-color:#333;/*背景颜色变化*/

padding:10px;/*增加内边距*/

border-radius:10px;/*圆角效果*/

transform:scale(1.1);/*放大效果*/

}

```

这样，当鼠标经过文字时，不仅颜色会变化，背景颜色、大小和形状也会发生变化。

DeepSeek非常严谨的使用了提示词当中的CSS技术，完成了案例的制作和代码的输出。将代码运行到hbuilder环境当中可以得到这样的一个结果。

AI给出的案例代码。兼顾了功能，样式设计。

需要仔细阅读一遍。理解模型给出的代码的语法逻辑，并且和教材当中的案例进行对比学习。

AI生成式辅助学习方法，功能非常强大。非常严谨的给出了核心功能的设计方法，代码的书写简洁完整，且对知识点进行了拓展。打开了学习前端CSS模块的思维模式，提升了学习积极性。