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模块的思维模式，提升了学习积极性。