AI生成式探究学习教学辅助设计单-3.4 同心圆班徽设计制作.docx

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=viewportcontent=width=device-width,initial-scale=1.0

title班徽设计/title

linkrel=stylesheethref=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,