AI生成式探究学习教学辅助设计单-3.4 同心圆班徽设计制作_第1页
AI生成式探究学习教学辅助设计单-3.4 同心圆班徽设计制作_第2页
AI生成式探究学习教学辅助设计单-3.4 同心圆班徽设计制作_第3页
AI生成式探究学习教学辅助设计单-3.4 同心圆班徽设计制作_第4页
AI生成式探究学习教学辅助设计单-3.4 同心圆班徽设计制作_第5页
已阅读5页，还剩1页未读， 继续免费阅读

下载本文档

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

文档简介

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给出的案例代码。兼顾了功能，

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

温馨提示

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

最新文档

评论

0/150

提交评论