AI生成式探究学习教学辅助设计单-3.1 了解CSS选择器 -3.5 网页背景设计制作_第1页
AI生成式探究学习教学辅助设计单-3.1 了解CSS选择器 -3.5 网页背景设计制作_第2页
AI生成式探究学习教学辅助设计单-3.1 了解CSS选择器 -3.5 网页背景设计制作_第3页
AI生成式探究学习教学辅助设计单-3.1 了解CSS选择器 -3.5 网页背景设计制作_第4页
AI生成式探究学习教学辅助设计单-3.1 了解CSS选择器 -3.5 网页背景设计制作_第5页
已阅读5页，还剩43页未读， 继续免费阅读

下载本文档

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

文档简介

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="viewport"content="width=device-width,initial-scale=1.0"><title>文字颜色变化</title><linkrel="stylesheet"href="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`文件即可在浏览器中查看效果。当鼠标经过标题文字时，文字颜色会平滑地变为橙色。###扩展你可以根据需要修改颜色、字体大小或添加其他效果。例如，可以添加背景颜色变化、文字大小变化等。以下是一个扩展示例：```cssh1:hover{color:#ff6347;/*文字颜色变化*/background-color:#333;/*背景颜色变化*/padding:10px;/*增加内边距*/border-radius:10px;/*圆角效果*/transform:scale(1.1);/*放大效果*/}```这样，当鼠标经过文字时，不仅颜色会变化，背景颜色、大小和形状也会发生变化。DeepSeek非常严谨的使用了提示词当中的CSS技术，完成了案例的制作和代码的输出。将代码运行到hbuilder环境当中可以得到这样的一个结果。AI给出的案例代码。兼顾了功能，样式设计。需要仔细阅读一遍。理解模型给出的代码的语法逻辑，并且和教材当中的案例进行对比学习。AI生成式辅助学习方法，功能非常强大。非常严谨的给出了核心功能的设计方法，代码的书写简洁完整，且对知识点进行了拓展。打开了学习前端CSS模块的思维模式，提升了学习积极性。AI生成式探究学习教学辅助设计单使用AI名称：DeepSeek班级：学生姓名：子任务名称提示词AI的回应对AI回应的评价我的收获第三模块网站页面美化（CSS）3.2艺术字体设计使用HTML5，CSS3语言，设计一个艺术字体。要求有突出字体的大小、粗细程度和阴影效果，给出案例代码。 要使用HTML5和CSS3设计一个艺术字体，并突出字体的大小、粗细程度和阴影效果，可以通过以下代码实现：```html<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>艺术字体设计</title><style>body{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#f0f0f0;margin:0;font-family:'Arial',sans-serif;}.artistic-text{font-size:4rem;/*设置字体大小*/font-weight:bold;/*设置字体粗细*/color:#333;/*设置字体颜色*/text-shadow:4px4px8pxrgba(0,0,0,0.5);/*设置阴影效果*/letter-spacing:5px;/*设置字间距*/text-transform:uppercase;/*将文本转换为大写*/animation:glow2sinfinitealternate;/*添加动画效果*/}@keyframesglow{from{text-shadow:4px4px8pxrgba(0,0,0,0.5);}to{text-shadow:6px6px12pxrgba(0,0,0,0.7),0020pxrgba(255,255,255,0.8);}}</style></head><body><divclass="artistic-text">艺术字体</div></body></html>```###代码说明：1.**字体大小**：通过`font-size:4rem;`设置字体大小为4rem，可以根据需要调整。2.**字体粗细**：通过`font-weight:bold;`设置字体为粗体。3.**阴影效果**：通过`text-shadow:4px4px8pxrgba(0,0,0,0.5);`设置阴影效果，阴影的偏移量为4px，模糊半径为8px，颜色为半透明的黑色。4.**字间距**：通过`letter-spacing:5px;`设置字间距为5px，使字体更加分散。5.**动画效果**：通过`@keyframesglow`定义了一个简单的动画效果，使阴影在2秒内交替变化，产生发光效果。###运行效果：-页面中心会显示一个带有阴影效果的艺术字体，字体较大且加粗，阴影效果会随着动画变化，产生一种动态的视觉效果。你可以根据需要调整字体大小、颜色、阴影效果等参数，以达到不同的艺术效果。DeepSeek非常严谨的使用了提示词当中的CSS技术，完成了案例的制作和代码的输出。将代码运行到hbuilder环境当中可以得到这样的一个结果。AI给出的案例代码。兼顾了功能，样式设计。需要仔细阅读一遍。理解模型给出的代码的语法逻辑，并且和教材当中的案例进行对比学习。AI生成式辅助学习方法，功能非常强大。非常严谨的给出了核心功能的设计方法，代码的书写简洁完整，且对知识点进行了拓展。打开了应用CSS设计字体的方法，提升了学习积极性。AI生成式探究学习教学辅助设计单使用AI名称：DeepSeek班级：学生姓名：子任务名称提示词AI的回应对AI回应的评价我的收获第三模块网站页面美化（CSS）3.3新闻网页制作使用HTML5，CSS3语言，制作一个新闻网页。要求显示新闻内容，并对页面文字进行样式设置，给出案例代码。 下面是一个简单的新闻网页示例，使用HTML5和CSS3来显示新闻内容，并对页面文字进行样式设置。###HTML部分(index.html)```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><header><h1>今日新闻</h1><nav><ul><li><ahref="#">首页</a></li><li><ahref="#">国内新闻</a></li><li><ahref="#">国际新闻</a></li><li><ahref="#">财经新闻</a></li><li><ahref="#">科技新闻</a></li></ul></nav></header><main><article><h2>标题：人工智能技术取得重大突破</h2><pclass="meta">发布时间：2023年10月10日|作者：张三</p><imgsrc="news-image.jpg"alt="新闻图片"class="news-image"><pclass="content">近日，全球领先的科技公司宣布在人工智能领域取得了重大突破。这项新技术将极大地提高机器学习的效率，并有望在医疗、金融、教育等多个行业得到广泛应用。</p><pclass="content">专家表示，这一突破将推动人工智能技术的发展，未来几年内可能会看到更多基于AI的创新应用。</p></article><aside><h3>相关新闻</h3><ul><li><ahref="#">人工智能在医疗领域的应用</a></li><li><ahref="#">金融科技的未来发展趋势</a></li><li><ahref="#">教育行业如何利用AI技术</a></li></ul></aside></main><footer><p>©2023新闻网页.保留所有权利。</p></footer></body></html>```###CSS部分(styles.css)```css/*全局样式*/body{font-family:Arial,sans-serif;line-height:1.6;margin:0;padding:0;background-color:#f4f4f4;color:#333;}/*头部样式*/header{background-color:#333;color:#fff;padding:10px0;text-align:center;}headerh1{margin:0;font-size:2.5em;}navul{list-style:none;padding:0;margin:0;display:flex;justify-content:center;}navulli{margin:015px;}navullia{color:#fff;text-decoration:none;font-weight:bold;}navullia:hover{text-decoration:underline;}/*主体内容样式*/main{padding:20px;max-width:800px;margin:0auto;}articleh2{font-size:2em;color:#444;margin-bottom:10px;}article.meta{font-size:0.9em;color:#777;margin-bottom:20px;}article.news-image{width:100%;height:auto;margin-bottom:20px;}article.content{font-size:1.1em;line-height:1.8;margin-bottom:20px;}/*侧边栏样式*/aside{background-color:#eee;padding:15px;border-radius:5px;margin-top:20px;}asideh3{font-size:1.5em;color:#444;margin-bottom:10px;}asideul{list-style:none;padding:0;margin:0;}asideulli{margin-bottom:10px;}asideullia{color:#333;text-decoration:none;}asideullia:hover{text-decoration:underline;}/*页脚样式*/footer{background-color:#333;color:#fff;text-align:center;padding:10px0;margin-top:20px;}footerp{margin:0;font-size:0.9em;}```###说明：1.**HTML部分**：-使用了HTML5的语义化标签，如`<header>`、`<nav>`、`<main>`、`<article>`、`<aside>`和`<footer>`，使页面结构更清晰。-新闻内容包含标题、发布时间、图片和正文。2.**CSS部分**：-设置了全局字体、行高和背景颜色。-对头部、导航、主体内容、侧边栏和页脚进行了样式设置。-使用了`flexbox`来布局导航菜单。-对新闻标题、发布时间、图片和正文内容进行了样式设置，使其更具可读性。###运行效果：将上述HTML和CSS代码分别保存为`index.html`和`styles.css`文件，并在浏览器中打开`index.html`文件，即可看到一个简单的新闻网页。你可以根据需要进一步调整样式和内容，以适应不同的设计需求。DeepSeek非常严谨的使用了提示词当中的CSS技术，完成了案例的制作和代码的输出。将代码运行到hbuilder环境当中可以得到这样的一个结果。AI给出的案例代码。兼顾了功能，样式设计。需要仔细阅读一遍。理解模型给出的代码的语法逻辑，并且和教材当中的案例进行对比学习。AI生成式辅助学习方法，功能非常强大。非常严谨的给出了核心功能的设计方法，代码的书写简洁完整，且对知识点进行了拓展。打开了应用CSS语言设计段落的方法，提升了学习积极性。AI生成式探究学习教学辅助设计单使用AI名称：DeepSeek班级：学生姓名：子任务名称提示词AI的回应对AI回应的评价我的收获第三模块网站页面美化（CSS）3.4同心圆班徽设计制作使用HTML5，CSS3语言，设计一个班徽。要求班徽图片给定，设计元素的宽度、高度、边框的宽度、颜色和样式，设计的效果色彩搭配丰富，和谐美观，并给出案例代码。 设计一个班徽需要考虑简洁、有代表性且美观的元素。以下是一个使用HTML5和CSS3设计的班徽示例，包含丰富的色彩搭配和和谐的设计效果。###设计思路：1.**形状**：使用圆形作为班徽的基础形状，象征团结和完整。2.**颜色**：使用渐变色背景，搭配明亮的颜色，突出活力与青春。3.**边框**：使用双边框设计，增加层次感。4.**文字**：使用自定义字体和阴影效果，突出班级名称和口号。###HTML代码：```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="badge"><divclass="outer-circle"><divclass="inner-circle"><h1class="class-name">高三一班</h1><pclass="slogan">团结奋进，勇攀高峰</p></div></div></div></body></html>```###CSS代码：```css/*重置默认样式*/*{margin:0;padding:0;box-sizing:border-box;}body{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#f0f0f0;}/*班徽容器*/.badge{width:300px;height:300px;display:flex;justify-content:center;align-items:center;}/*外圆*/.outer-circle{width:100%;height:100%;border:10pxsolid#ff6f61;border-radius:50%;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#ff6f61,#ffcc00);box-shadow:0020pxrgba(0,0,0,0.2);}/*内圆*/.inner-circle{width:80%;height:80%;border:5pxsolid#ffffff;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(135deg,#ffffff,#f0f0f0);box-shadow:inset0010pxrgba(0,0,0,0.1);}/*班级名称*/.class-name{font-family:'Arial',sans-serif;font-size:28px;color:#333333;text-shadow:2px2px4pxrgba(0,0,0,0.1);margin-bottom:10px;}/*班级口号*/.slogan{font-family:'Arial',sans-serif;font-size:16px;color:#555555;text-shadow:1px1px2pxrgba(0,0,0,0.1);}```###设计说明：1.**外圆**：使用渐变色背景（从橙色到黄色），边框为红色，宽度为10px，增加立体感。2.**内圆**：使用白色背景，边框为白色，宽度为5px，与外圆形成对比。3.**文字**：班级名称使用较大的字体，口号使用较小的字体，颜色分别为深灰色和浅灰色，搭配阴影效果，增加层次感。###效果：-班徽整体呈现圆形，色彩丰富且和谐。-渐变色背景和双边框设计增加了视觉层次感。-文字清晰，突出班级名称和口号。你可以根据实际需求调整颜色、字体和尺寸，进一步个性化设计。DeepSeek非常严谨的使用了提示词当中的CSS技术，完成了案例的制作和代码的输出。将代码运行到hbuilder环境当中可以得到这样的一个结果。AI给出的案例代码。兼顾了功能，样式设计。需要仔细阅读一遍。理解模型给出的代码的语法逻辑，并且和教材当中的案例进行对比学习。AI生成式辅助学习方法，功能非常强大。非常严谨的给出了核心功能的设计方法，代码的书写简洁完整，且对知识点进行了拓展。打开了应用CSS设计边框的使用方法，提升了学习积极性。AI生成式探究学习教学辅助设计单使用AI名称：DeepSeek班级：学生姓名：子任务名称提示词AI的回应对AI回应的评价我的收获第三模块网站页面美化（CSS）3.5网页背景设计制作使用HTML5，CSS3语言，设计一个网页的背景。要求背景图片给定，设置主题背景图片的平铺方式并固定至页面正中，并给出案例代码。 要设计一个网页背景，并将给定的背景图片固定在页面正中，同时设置平铺方式，可以使用HTML5和CSS3来实现。以下是一个示例代码，展示如何实现这一效果。###设计思路：1.**背景图片**：使用给定的背景图片，并将其固定在页面正中。2.**平铺方式**：通过CSS的`background-repeat`属性控制图片的平铺方式。3.**固定背景**：使用`background-attachment:fixed`将背景图片固定，使其不随页面滚动而移动。###HTML代码：```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="content"><h1>欢迎来到我的网页</h1><p>这是一个带有固定背景图片的网页示例。</p><p>向下滚动查看更多内容。</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p></div></body></html>```###CSS代码：```css/*重置默认样式*/*{margin:0;padding:0;box-sizing:border-box;}/*设置网页背景*/body{background-image:url('background.jpg');/*替换为你的背景图片路径*/background-repeat:no-

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

温馨提示

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

最新文档

评论

0/150

提交评论