header {border-bottom: 4px double #eee;text-align: center;font-size: 20px}
 
茗茶推荐——祁门红茶
 
祁门红茶，茶叶原料选用当地的中叶,中生种茶树制作，是中国历史名茶，著名红茶精品。

第3关：figure元素和figcaption元素的应用

header {border-bottom: 4px double #eee;text-align: center;font-size: 20px}
茗茶推荐——祁门红茶
祁门红茶，茶叶原料选用当地的中叶,中生种茶树制作，是中国历史名茶，著名红茶精品。

2.html5-交互元素

第1关：交互元素相关概念

ACBAB

第2关：progress元素

    下载进度：    

第3关：meter元素

显示度量值：

第4关：details/summary元素

第三章
3.1结构元素
3.2页面结点
3.3交互元素

3.html5-文本层次语义元素

第1关：文本层次语义元素相关概念

CADBB

第2关：文本层次语义元素

重要通知：
定于明日上午9:00整在213教室开会。

第3关：cite元素和time元素

今日分享：
盛年不再来，一日难再晨，及时当勉励，岁月不待人。
出处：魏晋·陶渊明《杂诗》

4.html5-分组元素

第1关：分组元素相关的概念题

BCDAD

第2关：无序列表

圆饼
黑板
圆圈

第3关：有序列表

    
男装
上衣
T恤
 

第4关：定义列表

    
Web前端开发
Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。
前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML、CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
   

5.播放视频

第1关：HTML5视频相关的概念

DCBAA

第2关：播放视频

   
我和我的祖国
 
  

6.播放音频

第1关：HTML5音频相关的概念

BACBAC(多选)

第2关：播放音频

    
安妮的仙境
 
  你的浏览器不支持该音频格式 

7.web编程训练-html5-超链接的应用

第1关：创建热字超链接

听音乐找酷我

第2关：创建热图超链接

听音乐找酷我
好音质用酷我

第3关：下载歌曲超链接

    
听音乐找酷我
  

第4关：创建页内超链接

    
听音乐找酷我
 
这是第1个音频
 
这是第2个音频
 
这是第3个音频
 
这是第4个音频
 
这是第5个音频
 
这是第6个音频
 
这是第7个音频这是第7个音频 
 
这是第8个音频
   

8.web知识训练-html5-超链接的应用

第1关：web知识训练-html5-超链接的应用

ABCDB

9.html5-表格高级样式的设置

第1关：表格高级样式设置相关概念

CABAD

第2关：设置表格的外边框样式

      简易信息表 姓名年龄张三20  

第3关：设置表格的内边框样式

    
单元格1
单元格2
单元格3
单元格4
 简易信息表 姓名年龄张三20  

第4关：表格中单元格的合并

  th{background-color:#00ff33;} td{background-color:#00ffff;}   
签到表
姓名
签到
备注
第1次
第2次
张三
大会主题报告
分会专题报告
总结报告
专家报告
分组讨论

第5关：表格的综合案例

  th{background-color:#00ff33;} td{background-color:#00ffff;text-align:center} caption{font-family:黑体;font-size:30px;color:blue}  
家庭账单
 
本周项目
 
费用明细
 
备注
 
收入
 
支出
 
收入
 
工资
 
10000
 
0
 
 
兼职
 
2000
 
0
 
 
收入合计
 
12000
 
0
 
 
支出
 
生活用品
 
0
 
4000
 
 
生活用品
 
0
 
3000
 
 
支出合计
 
0
 
7000
 
 
 

10.表单的结构

第1关：表单的基本概念

DACBC

第2关：学会设置action和method属性

... 橘子 苹果 香蕉 

11.创建输入控件

第1关：input控件相关概念

DBCAD

第2关：创建文本框

   姓名：   

第3关：创建密码框

   姓名：
密码： 

第4关：创建单选按钮

    姓名：
 密码：
 国庆期间你最喜欢看的电影？
 夺冠 我和我的祖国 姜子牙 

第5关：创建复选框

姓名：
 密码：
 国庆期间你最喜欢看的电影？
夺冠我和我的祖国姜子牙
你喜欢的运动是？
打篮球打排球踢足球其他

第6关：重置与提交按钮

姓名：
 密码：
 国庆期间你最喜欢看的电影？
夺冠我和我的祖国姜子牙
你喜欢的运动是？
打篮球打排球踢足球其他 

12.创建文本区域

第1关：textarea控件相关概念

CBDAB

第2关：创建文本域

    请输入你选择本专业的理由：
     
  

13.css样式规则

第1关：CSS基础知识

BDCAB

第2关：初识CSS

   
静夜思
床前明月光
疑是地上霜
举头望明月
低头思故乡

第3关：用内嵌式引入CSS样式

 /* ********** BEGIN ********** */ body {background-image:url(https://www.educoder.net/api/attachments/1427381);background-size:cover;}/* ********** END ********** */ div {position:fixed; left:400px;top:100px; color:#ffffff; font-family:黑体;text-align:center;}    
静夜思
 
床前明月光
 
疑是地上霜
 
举头望明月
 
低头思故乡
 

第4关：用外链式引入CSS样式

      
静夜思
 
床前明月光
 
疑是地上霜
 
举头望明月
 
低头思故乡
 

14.css3选择器-组合选择器

第1关：组合选择器相关的概念

ACA

第2关：群组选择器

h1,h2,h3{ color:green;} 
一级标题
 
二级标题
三级标题

第3关：后代选择器

div p{color:blue;font-size:16px;}
我的颜色是蓝色，我的字体大小是16px

第4关：子元素选择器

div>p{color:green;font-size:20px;}
我的颜色是绿色，我的字体大小是20px

第5关：相邻兄弟选择器

h1+p{background-color:red;}
我是兄长
我是弟弟
我是小弟

第6关：普通兄弟选择器

h1~p{color:blue;font-size:36px;}
我是兄长
我是弟弟
我是小弟

15.css3选择器-基础选择器

第1关：CSS基础选择器相关概念

DCB

第2关：通用选择器

    *{font-size:100px;color:#D33E2A; }  Google

第3关：标签选择器

    strong { font-size:100px;color:#D33E2A; }   Google

第4关：文字Google结构设计

 Google

第5关：文字Google样式设计

 strong{ font-size:100px;}.blue{ color:#2B75F5;}.red{color:#D33E2A;}#orange{color:#FFC609;}#green{color:#00A45D;}Google

16.css3-文本外观样式

第1关：文本外观样式相关的概念

BDB

第2关：CSS-文本空间的设置

 p{ font-size:16px;font-family:微软雅黑;text-indent:2em;line-height:28px;}.blue{color:#33F; text-decoration:underline;}.red{color:#F00;}.money{font-size:16px;}
导语：臭豆腐是长沙有名的小吃，是一种独具风味的食品。“闻起来臭、吃起来香”是它的最大特点,不少外省人品尝后都赞不绝口。长沙的臭豆腐要数百年老店火宫殿炸得最好,外焦微脆、内软味鲜,100多年来,进火宫殿的人没有不吃臭豆腐的。当年...【详情】
火宫殿臭豆腐：价格18元
 

第3关：搜索页面的结构设计

什么是CSS" />CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.知道什么是CSS了,现在就开始学习CSS吧 ...
www.dreamdu.com/css/wh...百度快照85%好评

第4关：搜索页面的样式设计-文本外观样式的应用

body{font-size:14px;color:#333;font-family:微软雅黑;} em{font-style:normal;}.header{font-size:18px;color:#D52D2D;font-weight:normal;text-decoration:underline;}.header em{color:#2525D3;text-decoration:underline;}.red{color:#D52D2D;}.green{color:#167A16;} .gray{color:#595959; text-decoration:underline;}
什么是CSS?—CSS教程
猴子提示: 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.知道什么是CSS了,现在就开始学习CSS吧 ...
www.dreamdu.com/css/wh...-百度快照-85%好评
 

17.css3-文本字体样式

第1关：字体样式属性相关的概念

BDA

第2关：美食专栏网页的结构设置

导语：臭豆腐是长沙有名的小吃，是一种独具风味的食品。“闻起来臭、吃起来香”是它的最大特点,不少外省人品尝后都赞不绝口。长沙的臭豆腐要数百年老店火宫殿炸得最好,外焦微脆、内软味鲜,100多年来,进火宫殿的人没有不吃臭豆腐的。当年...【详情】
火宫殿臭豆腐：价格18元

第3关：美食专栏网页的样式设置

 p {font-size:16px;font-family:微软雅黑;}.blue {color:#33F;}.red {color:#F00;}.money {font-size:16px;}
导语：臭豆腐是长沙有名的小吃，是一种独具风味的食品。“闻起来臭、吃起来香”是它的最大特点,不少外省人品尝后都赞不绝口。长沙的臭豆腐要数百年老店火宫殿炸得最好,外焦微脆、内软味鲜,100多年来,进火宫殿的人没有不吃臭豆腐的。当年...【详情】
火宫殿臭豆腐：价格18元
 

18.css3选择器-属性选择器

第1关：CSS3-属性选择器相关概念

CBAD

第2关：CSS3-属性选择器

div{width:70px;height:40px;border:1px solid teal;float:left;} li{list-style:none;} /* ********* Begin ******* */ *{ font-size:25px; text-align:center; vertical-align:middle; }/* ********* End ******* */ 
nice
to
meet
you

第3关：CSS3-包含及连字符选择器

div{width:70px;height:40px;border:1px solid teal;float:left;}li{list-style:none;} div[title]{ font-size:25px; text-align:center;}/* ********* Begin ******* */ .b{font-weight:bold;}div[name~="a"]{background-color:pink;}div[name|="b"]{background-color:orange;}/* ********* End ******* */ 
nice
to
meet
you

第4关：CSS3-前缀后缀选择器

div{width:70px;height:40px;border:1px solid teal;float:left;}li{list-style:none;} div[title]{ font-size:25px; text-align:center;}div[class="b"]{ font-weight:bold; }div[name~="a"]{ background-color:pink; }div[name|="b"]{ background-color:orange; }/* ********* Begin ******* */ div[title^="n"]{color:blue;}div[title*="o"]{color:red;}div[title$="t"]{color:green;}/* ********* End ******* */ 
nice
to
meet
you
 

19.css3背景样式

第1关：CSS背景相关的概念

DACAD

第2关：CSS-背景色的设置

h2{font:微软雅黑; text-align:center; }#p1{font-size:13px;color:#979797;text-align:center; }hr{border:1px solid #CCCCCC;} #p2{text-indent:2em;}span{color:blue;}.background{/* ********* Begin ********* */background-color: #add/* ********* End ********* */}
新媒体的大势所趋
更新时间：2021年11月30日14时08分 来源：开源社区
近年来，随着移动互联网的火爆，公众号、微博、今日头条、抖音等一大批社交平台的火爆带动了新媒体运营行业的发展，运营人在企业中的价值也不断的被放大和受到重视，很多企业在做线上这块时都会考虑“两微一抖”，也就是我们所说的新媒体+短视频运营。因此也就催生了大量对新媒体+短视频运营人的需求岗位。

第3关：CSS-背景图的设置

h2{font:微软雅黑; text-align:center;}#p1{font-size:13px;color:#979797;text-align:center;}hr{border:1px solid #CCCCCC;} #p2{text-indent:2em;}span{color:blue;}.background{background-color:#add;}.backgroundImage{width:360px;height:240px;overflow:scroll;padding:30px;border:3px solid #30F;/* ********* Begin ********* */background-image: url(https://www.educoder.net/api/attachments/2478800);background-attachment: scroll;background-size: cover;background-position: -260px 0px;/* ********* End ********* */ } 
新媒体的大势所趋
更新时间：2021年11月30日14时08分 来源：开源社区
近年来，随着移动互联网的火爆，公众号、微博、今日头条、抖音等一大批社交平台的火爆带动了新媒体运营行业的发展，运营人在企业中的价值也不断的被放大和受到重视，很多企业在做线上这块时都会考虑“两微一抖”，也就是我们所说的新媒体+短视频运营。因此也就催生了大量对新媒体+短视频运营人的需求岗位。

20.移动端电商网页制作

第1关：移动端电商页面制作

/* ********* Begin ********* */body{ font-size:12px;} body,img{padding:0; margin:0; border:0;}.all{width: 346px;height: 578px;background:url(https://www.educoder.net/api/attachments/2073417) no-repeat;margin: 20px auto;padding: 90px 0 0 34px;}.content{width: 277px;height: 414px;overflow: scroll;/* ********* End ********* */}

21.网页布局页面的制作

第1关：网页布局的结构设计

第2关：网页布局的样式设计

body{margin:0; padding:0;}div{width:980px; /*设置所有模块的宽度为980px、居中显示*/margin:0 auto;}#top{height:40px; background:url(https://www.educoder.net/api/attachments/2141326)} #nav{height:60px; background:url(https://www.educoder.net/api/attachments/2141327)}#banner{height:200px; background:url(https://www.educoder.net/api/attachments/2141342)}#content{height:300px; }.content_left{ /*左侧部分左浮动*/width:200px;height:300px;background-color:#CCC;float:left;margin:0 0;background:url(https://www.educoder.net/api/attachments/2141349)}.content_middle{ /*中间部分左浮动*/width:570px;height:300px;background-color:#CCC;float:left;margin:0 0 0 5px;background:url(https://www.educoder.net/api/attachments/2141352)}.content_right{ /*右侧部分右浮动*/width:200px;background-color:#CCC;float:right;height:300px;margin:0 0;background:url(https://www.educoder.net/api/attachments/2141351)}#footer{height:90px; background:url(https://www.educoder.net/api/attachments/2141353)}

22.团购悬浮框页面的制作

第1关：团购悬浮框页面的结构设计

 
 7月30日0:00开团
 
新品团
 
尝鲜团
 
 秒杀团
 
清仓团
 
返回顶部

第2关：团购悬浮框页面的样式设计

    body,ul,li { padding: 0; margin: 0; list-style: none;}body { font-size: 18px; font-family: 微软雅黑;}ul { width: 200px; height: 270px; margin: 20px; border: 3px solid #613e72; padding: 10px;}li { width: 142px; height: 40px; line-height: 40px; background: url(https://www.educoder.net/api/attachments/2046898) no-repeat left center; padding-left: 40px; margin: 0 auto 5px; color: #613e72;}.item { background: #613e72 url(https://www.educoder.net/api/attachments/2046946) no-repeat 5px center; color: #fff;}.back { background: url(https://www.educoder.net/api/attachments/2046953) no-repeat left center;}   
7月30日0:00开团
新品团
尝鲜团
秒杀团
清仓团
返回顶部
 

23.太极图的制作-css的应用

第1关：太极图的绘制

div{width: 96px;height: 48px;border: 2px solid #000;border-bottom:50px solid #000;position:absolute; left:0px;top:0px;right:0px;bottom:0px;margin:auto;border-radius:50%;}

第2关：太极图的绘制

div{width:96px;height:48px;border:2px solid #000;border-bottom:50px solid #000;position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;border-radius:50%;}div:before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;background:#000;border:20px solid #fff;border-radius:50%;}div:after{content:""; position:absolute;right:0;top:50%;width:8px;height:8px;background:#fff;border:20px solid #000;border-radius:50%;}

第3关：使太极图旋转：

div{width:96px;height:48px;border:2px solid #000;border-bottom:50px solid #000;position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;border-radius:50%;transition:all 2s linear;/*将全部元素以均匀速度在2S内完成旋转*/}div:before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;background:#000;border:20px solid #fff;border-radius:50%;}div:after{content:"";position:absolute;right:0;top:50%;width:8px;height:8px;background:#fff;border:20px solid #000;border-radius:50%;} div:hover{transform:rotate(-360deg);