1.html5-结构元素
第1关：文档结构元素相关概念
ACBAB
第2关：header元素和article元素的应用
<!DOCTYPE html><html><head> <title>页面结构</title> <style type="text/css"> header { border-bottom: 4px double #eee; text-align: center; font-size: 20px } </style></head><body> <!-- ********* Begin ******* --> <article> <header> <h3>茗茶推荐——祁门红茶</h3> </header> <p>祁门红茶，茶叶原料选用当地的中叶,中生种茶树制作，是中国历史名茶，著名红茶精品。</p> </article> <!-- ********* End ********* --></body></html>第3关：figure元素和figcaption元素的应用
<!DOCTYPE html><html><head> <title>页面结构2</title> <style type="text/css"> header { border-bottom: 4px double #eee; text-align: center; font-size: 20px } </style></head><body> <article> <header> <h3>茗茶推荐——祁门红茶</h3> </header> <p>祁门红茶，茶叶原料选用当地的中叶,中生种茶树制作，是中国历史名茶，著名红茶精品。</p> <!-- ********* Begin ******* --> <figure> <img src="https://www.educoder.net/api/attachments/1223388"> <figcaption>茶道欣赏</figcaption> </figure> <!-- ********* End ********* --> </article></body></html>2.html5-交互元素
第1关：交互元素相关概念
ACBAB
第2关：progress元素
<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>progerss元素的使用</title> </head> <body> 下载进度： <!-- ********* Begin ******* --> <progress max="100" value="30"></progress> <!-- ********* End ********* --> </body> </html>第3关：meter元素
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>meter元素的使用</title></head><body> 显示度量值：<br/> <!-- ********* Begin ******* --> <meter max="100" value="60" min="0"></meter> <br> <meter max="100" value="30" min="0" high="90" low="50"></meter> <!-- ********* End ********* --></html>第4关：details/summary元素
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>details/summary元素</title></head><body> <!-- ********* Begin ******* --> <details> <summary>第三章</summary> <p>3.1结构元素</p> <p>3.2页面结点</p> <p>3.3交互元素</p> </details> <!-- ********* End ********* --></body></html>3.html5-文本层次语义元素
第1关：文本层次语义元素相关概念
CADBB
第2关：文本层次语义元素
<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body><!-- ********* Begin ******* --> <p> <strong>重要通知：</strong> <br> 定于<mark>明日上午9:00整</mark>在<def title="行勉楼C座">213</def>教室<em>开会</em>。 </p><!-- ********* End ********* --></body></html>
第3关：cite元素和time元素
<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body> <!-- ********* Begin ******* --> <section> <strong>今日分享：</strong> <time datetime="2020-10-25"></time> <img src="https://www.educoder.net/api/attachments/1256151" alt="插图"> <p><b>盛年不再来，一日难再晨，及时当勉励，岁月不待人。</b></p> <cite>出处：魏晋·陶渊明《杂诗》</cite> </section> <!-- ********* End ********* --></body></html>4.html5-分组元素
第1关：分组元素相关的概念题
BCDAD
第2关：无序列表
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>无序列表</title></head><body> <!-- ********* Begin ******* --> <ul> <li type=disk>圆饼</li> <li type=square>黑板</li> <li type=circle>圆圈</li> </ul> <!-- ********* End ********* --></body></html>第3关：有序列表
<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>有序列表</title> </head> <body> <!-- ********* Begin ******* --> <ol start="2"> <li>男装</li> <li type="A">上衣</li> <li type="i">T恤</li> </ol> <!-- ********* End ********* --> </body></html>第4关：定义列表
<html> <head> <title>定义列表</title> </head> <body> <!-- ********* Begin ******* --> <dl> <dt><strong>Web前端开发</strong></dt> <dd>Web前端开发是从<mark>网页制作</mark>演变而来的，名称上有很明显的时代特征。</dd> <dd>前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML、CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。</dd> </dl> <!-- ********* End ********* --> </body> </html>5.播放视频
第1关：HTML5视频相关的概念
DCBAA
第2关：播放视频
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>HTML5-视频</title></head><body> <h1 align="center">我和我的祖国</h1> <br/> <div align="center"> <!-- ********* Begin ********* --> <video controls="controls" autoplay="autoplay" width="450" height="260" src="https://www.educoder.net/api/attachments/1248122"> <p>你的浏览器不支持该视频格式</p> </video> <!-- ********* End ********* --> </div></body></html>6.播放音频
第1关：HTML5音频相关的概念
BACB AC(多选)
第2关：播放音频
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>HTML5-音频</title> </head> <body> <h1 align="center">安妮的仙境</h1> <br/> <div align="center"> <!-- ********* Begin ********* --> <audio controls="controls" autoplay="autoplay" loop="loop" src="https://www.educoder.net/api/attachments/2364090"> 你的浏览器不支持该音频格式 </audio> <!-- ********* End ********* --> </div> </body></html>7.web编程训练-html5-超链接的应用
第1关：创建热字超链接
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>创建超链接</title></head><body> <!-- ********* Begin ******* --> <h2><a href="https://www.kuwo.cn/">听音乐找酷我</a></h2> <!-- ********* End ********* --></body></html>
第2关：创建热图超链接
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>创建超链接</title></head><body> <h2><a href="https://www.kuwo.cn/">听音乐找酷我</a></h2> <!-- ********* Begin ******* --> <a href="https://www.kuwo.cn/" target="_blank" title="单击进入"> <img src="https://www.educoder.net/api/attachments/2357951" alt="图片" align="bottom"> </a> <!-- ********* End ********* --> 好音质用酷我</body></html>第3关：下载歌曲超链接
<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>创建超链接</title> </head> <body> <h2><a href="http://www.kuwo.cn/">听音乐找酷我</a></h2> <a href="http://www.kuwo.cn/"><img src=https://www.educoder.net/api/attachments/2357951 align=bottom /></a> 好音质用酷我<br/> <!-- ********* Begin ******* --><a href="https://www.educoder.net/api/attachments/2364090" title="下载班得瑞钢琴曲-安妮的仙境">安妮的仙境</a> <!-- ********* End ********* --> <p><h2>在线播放：</h2><audio src="https://www.educoder.net/api/attachments/2364090" controls="controls"></audio> </p> </body> </html>第4关：创建页内超链接
<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>创建超链接</title> </head> <body> <h2><a href="http://www.kuwo.cn/">听音乐找酷我</a></h2> <a href="http://www.kuwo.cn/"><img src=https://www.educoder.net/api/attachments/2357951 align=bottom /></a> 好音质用酷我<br/> <!-- ********* Begin1 ******* --> <h2>查看第7个音频</h2> <a href="#Q">查看第7个音频</a> <!-- ********* End1 ********* --> 推荐下载： <a href="https://www.educoder.net/api/attachments/2364090" title="下载班得瑞钢琴曲-安妮的仙境">安妮的仙境</a> <p><h2>在线播放：</h2><audio src="https://www.educoder.net/api/attachments/2364090" controls="controls"></audio> </p> <h2>这是第1个音频</h2> <h2>这是第2个音频</h2> <h2>这是第3个音频</h2> <h2>这是第4个音频</h2> <h2>这是第5个音频</h2> <h2>这是第6个音频</h2> <h2> <!-- ********* Begin2 ******* --> 这是第7个音频 <a href="Q">这是第7个音频</a> <!-- ********* End2 ********* --> </h2> <h2>这是第8个音频</h2> </body> </html> 8.web知识训练-html5-超链接的应用
第1关：web知识训练-html5-超链接的应用
ABCDB
9.html5-表格高级样式的设置
第1关：表格高级样式设置相关概念
CABAD
第2关：设置表格的外边框样式
<html> <head> <meta charset="utf-8"/> <title>设置表格外边框属性</title> </head> <body> <!-- ********* Begin ******* --> <table frame="hsides" width="100" height="80" border="4"> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr></table> <!-- ********* End ********* --> <caption>简易信息表</caption> <tr align=center valign=middle> <th>姓名</th> <th>年龄</th> </tr> <tr align=center valign=middle> <td>张三</td> <td>20</td> </tr> </table> </body> </html>
第3关：设置表格的内边框样式
<html> <head> <meta charset="utf-8"/> <title>设置表格内边框属性</title> </head> <body> <!-- ********* Begin ******* --> <table width="100" height="80" frame="hsides" rules="rows" border="4"> <tr> <td>单元格1</td> <td>单元格2</td> </tr> <tr> <td>单元格3</td> <td>单元格4</td> </tr></table> <!-- ********* End ********* --> <caption>简易信息表</caption> <tr align=center valign=middle> <th>姓名</th> <th>年龄</th> </tr> <tr align=center valign=middle> <td>张三</td> <td>20</td> </tr> </table> </body> </html>第4关：表格中单元格的合并
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>签到表</title> <style type="text/css"> th{background-color:#00ff33;} td{background-color:#00ffff;} </style> </head> <body> <table border="2" width="400" bordercolor="#00ff00" cellpadding="6"> <caption>签到表</caption> <!-- ********* Begin ********* --> <table border="1"> <tr> <th rowspan="2">姓名</th> <th colspan="2">签到</th> <th rowspan="2">备注</th> </tr> <tr> <th>第1次</th> <th>第2次</th> </tr> <tr> <td>张三</td> <td>大会主题报告</td> <td>分会专题报告</td> <td>总结报告</td> </tr> <tr> <td>专家报告</td> <td>分组讨论</td> <td></td> <td></td> </tr></table> <!-- ********* End ********* --> </table> </body></html>第5关：表格的综合案例
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>表格综合</title> <style type="text/css"> th{background-color:#00ff33;} td{background-color:#00ffff;text-align:center} caption{font-family:黑体;font-size:30px;color:blue} </style> </head><!-- ********* Begin ********* --><body background="https://www.educoder.net/api/attachments/1217848"> <table border="2" width="600" bordercolor="#00ff00" cellpadding="6" align="center" valign="middle"> <caption>家庭账单</caption> <tr> <th rowspan="2" colspan="2">本周项目</th> <th colspan="2">费用明细</th> <th rowspan="2">备注</th> </tr> <tr> <th>收入</th> <th>支出</th> </tr> <tr> <th rowspan="3">收入</th> <th>工资</th> <td>10000</td> <td>0</td> <td></td> </tr> <tr> <th>兼职</th> <td>2000</td> <td>0</td> <td></td> </tr> <tr> <th>收入合计</th> <td>12000</td> <td>0</td> <td></td> </tr> <tr> <th rowspan="3">支出</th> <th>生活用品</th> <td>0</td> <td>4000</td> <td></td> </tr> <tr> <th>生活用品</th> <td>0</td> <td>3000</td> <td></td> </tr> <tr> <th>支出合计</th> <td>0</td> <td>7000</td> <td></td> </tr> </table></body> <!-- ********* End ********* --></html>
10.表单的结构
第1关：表单的基本概念
DACBC
第2关：学会设置action和method属性
<!DOCTYPE html><html><body> <!-- ********* Begin ********* --><form name="selectForm" method="post" action="myselect.jsp">...</form> <!-- ********* End ********* --> <select size="1"> <option value="JZ">橘子</option> <option value="PG">苹果</option> <option value="XJ">香蕉</option> </select> </form></body></html>11.创建输入控件
第1关：input控件相关概念
DBCAD
第2关：创建文本框
<html> <head> <meta charset="utf-8"/> <title>设置单行文本框</title> </head> <body> <form> 姓名： <!-- ********* Begin ******* --> <input type="text" name="yourname" size="15" maxlength="5"/> <!-- ********* End ********* --> </form> </body></html>第3关：创建密码框
<html> <head> <meta charset="utf-8"/> <title>设置密码框</title> </head> <body> <form> 姓名： <input type="text" name="yourname" size="15" maxlength="5"/> <br> 密码： <!-- ********* Begin ******* --> <input type="password" name="yourpassword" size="15" value="12345"/> <!-- ********* End ********* --> </form> </body></html>
第4关：创建单选按钮
<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>设置单行文本框</title> </head> <body> <form action=""method="post"> 姓名：<input type="text" name="yourname" size="15" maxlength="5"/><br/> 密码：<input type="password" name="password" size="15" value="12345"/><br/> 国庆期间你最喜欢看的电影？<br/> <!-- ********* Begin ********* --> <input type="radio" value="Film1" name="Film"/>夺冠 <input type="radio" value="Film2" name="Film"/>我和我的祖国 <input type="radio" value="Film3" name="Film"/>姜子牙 <!-- ********* End ********* --> </form> </body></html>第5关：创建复选框
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>设置单行文本框</title></head><body> <form action="" method="post"> 姓名：<input type="text" name="yourname" size="15" maxlength="5"/><br/> 密码：<input type="password" name="password" size="15" value="12345"/><br/> 国庆期间你最喜欢看的电影？<br/> <input name="Film" type="radio" value="Film1"/>夺冠 <input name="Film" type="radio" value="Film2"/>我和我的祖国 <input name="Film" type="radio" value="Film3"/>姜子牙<br/> 你喜欢的运动是？<br/> <!-- ********* Begin ********* --> <input type="checkbox" name="Sports" value="sport1" checked/>打篮球 <input type="checkbox" name="Sports" value="sport2" checked/>打排球 <input type="checkbox" name="Sports" value="sport3" checked/>踢足球 <input type="checkbox" name="Sports" value="sport4" checked/>其他 <!-- ********* End ********* --> </form></body></html>第6关：重置与提交按钮
<!DOCTYPE html><html><body> <head> <meta charset="utf-8" /> <title>设置单行文本框</title> </head> <body> <form action="" method="post"> 姓名：<input type="text" name="yourname" size="15" maxlength="5"/><br/> 密码：<input type="password" name="password" size="15" value="12345"/><br/> 国庆期间你最喜欢看的电影？<br/> <input name="Film" type="radio" value="Film1"/>夺冠 <input name="Film" type="radio" value="Film2"/>我和我的祖国 <input name="Film" type="radio" value="Film3"/>姜子牙<br/> 你喜欢的运动是？<br/> <input name="Sports" type="checkbox" value="sport1" checked="checked"/>打篮球 <input name="Sports" type="checkbox" value="sport2"/>打排球 <input name="Sports" type="checkbox" value="sport3"/>踢足球 <input name="Sports" type="checkbox" value="sport4"/>其他 <br/> <!--********* Begin ********* --> <input type="reset" value="重置"/> <input type="submit" value="提交"/> <!-- ********* End ********* --> </form> </body></html>12.创建文本区域
第1关：textarea控件相关概念
CBDAB
第2关：创建文本域
<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>设置文本域</title> </head> <body> <form action="" method="post"> 请输入你选择本专业的理由：<br/> <!-- ********* Begin ********* --> <textarea wrap="hard" name="reason" rows="6" cols="50" required="required"> </textarea> <!-- ********* End ********* --> <br/> <input type="reset" value="重置"> <input type="submit" value="提交"> </body></html>13.css样式规则
第1关：CSS基础知识
BDCAB
第2关：初识CSS
<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>初识CSS样式</title> </head> <body> <div style="background-image:url(https://www.educoder.net/api/attachments/1426624);width:360px;height:260px;"> <!-- ********* Begin ********* --> <h1 style="font-family:楷体;text-align:center;line-height:2;">静夜思</h1> <h2 style="font-family:楷体;text-align:center;">床前明月光</h2> <h2 style="font-family:楷体;text-align:center;">疑是地上霜</h2> <h2 style="font-family:楷体;text-align:center;">举头望明月</h2> <h2 style="font-family:楷体;text-align:center;">低头思故乡</h2> <!-- ********* End ********* --> </div> </body></html>第3关：用内嵌式引入CSS样式
<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>内嵌CSS样式</title> <style type="text/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; } </style> </head> <body> <div> <h1>静夜思</h1> <h2>床前明月光</h2> <h2>疑是地上霜</h2> <h2>举头望明月</h2> <h2>低头思故乡</h2> </div> </body></html>第4关：用外链式引入CSS样式
<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>外链CSS样式</title> <!-- ********** BEGIN ********** --> <link href="https://www.educoder.net/api/attachments/1433016" type="text/css" rel="stylesheet"> <!-- ********** END ********** --> </head> <body> <div> <h1>静夜思</h1> <h2>床前明月光</h2> <h2>疑是地上霜</h2> <h2>举头望明月</h2> <h2>低头思故乡</h2> </div> </body></html>14.css3选择器-组合选择器
第1关：组合选择器相关的概念
ACA
第2关：群组选择器
<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>群组选择器</title> <!-- ********* Begin ********* --> <style type="text/css"> h1,h2,h3{ color:green;} </style> <!-- ********* End ********* --></head><body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3></body></html>
第3关：后代选择器
<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>后代选择器</title> <!-- ********* Begin ********* --> <style type="text/css"> div p{color:blue;font-size:16px;} </style> <!-- ********* End ********* --></head><body><div> <p>我的颜色是蓝色，我的字体大小是16px</p></div></body></html>
第4关：子元素选择器
<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>子元素选择器</title> <!-- ********* Begin ********* --> <style type="text/css">div>p{color:green;font-size:20px;} </style> <!-- ********* End ********* --></head><body><div> <p>我的颜色是绿色，我的字体大小是20px</p></div></body></html>
第5关：相邻兄弟选择器
<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>相邻兄弟选择器</title> <!-- ********* Begin ********* --> <style type="text/css"> h1+p{background-color:red;} </style> <!-- ********* End ********* --></head><body><div> <h1>我是兄长</h1> <p>我是弟弟</p> <p>我是小弟</p></div></body></html>
第6关：普通兄弟选择器
<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>普通兄弟选择器</title> <!-- ********* Begin ********* --> <style type="text/css"> h1~p{color:blue;font-size:36px;} </style> <!-- ********* End ********* --></head><body><div> <h1>我是兄长</h1> <p>我是弟弟</p> <p>我是小弟</p></div></body></html>15.css3选择器-基础选择器
第1关：CSS基础选择器相关概念
DCB
第2关：通用选择器
<!DOCTYPE html><html><head> <meta charset="utf-8"/> <!--------- Begin--------> <style type="test/css"> *{ font-size:100px; color:#D33E2A; } </style> <!--------- End--------></head><body><strong>G</strong><strong>o</strong><strong>o</strong><strong>g</strong><strong>l</strong><strong>e</strong></body></html>
第3关：标签选择器
<!DOCTYPE html><html><head> <meta charset="utf-8"/> <!--------- Begin--------> <style> strong { font-size:100px;color:#D33E2A; } </style> <!--------- End--------> </head><body><strong>G</strong><strong>o</strong><strong>o</strong><strong>g</strong><strong>l</strong><strong>e</strong></body></html>第4关：文字Google结构设计
<!doctype html><html><head><meta charset="utf-8"><title>文字Logo</title></head><body><!--------- Begin--------> <strong class="blue">G</strong><strong class="red">o</strong><strong id="orange">o</strong><strong class="blue">g</strong><strong id="green">l</strong><strong class="red">e</strong> <!--------- End--------></body></html>
第5关：文字Google样式设计
<!doctype html><html><head><meta charset="utf-8"><title>文字Logo</title> <style type="text/css"><!--------- Begin-------->strong{ font-size:100px;}.blue{ color:#2B75F5;}.red{color:#D33E2A;}#orange{color:#FFC609;}#green{color:#00A45D;}<!--------- End--------></style></head><body><strong class="blue">G</strong><strong class="red">o</strong><strong id="orange">o</strong><strong class="blue">g</strong><strong id="green">l</strong><strong class="red">e</strong></body></html>16.css3-文本外观样式
第1关：文本外观样式相关的概念
BDB
第2关：CSS-文本空间的设置
<!doctype html><html><head><meta charset="utf-8"><title>美食专题栏目</title><!-- ********* Begin ********* --><style type="text/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;}</style><!-- ********* End ********* --></head><body><img src="https://www.educoder.net/api/attachments/1989171 "插图"" alt="跳槽有道" /><p><em class="blue">导语</em>：臭豆腐是<strong class="red">长沙</strong>有名的小吃，是一种独具风味的食品。“闻起来臭、吃起来香”是它的最大特点,不少外省人品尝后都赞不绝口。长沙的臭豆腐要数百年老店火宫殿炸得最好,外焦微脆、内软味鲜,100多年来,进火宫殿的人没有不吃臭豆腐的。当年...<em>【详情】</em></p><p><em class="blue">火宫殿臭豆腐</em>：价格<strong class="money">18</strong>元</p></body></html>
第3关：搜索页面的结构设计
<!doctype html><html><head><meta charset="utf-8"><title>搜索页面</title></head><body><!-- ********* Begin ********* --><h2 class="header">什么是CSS?<em>—CSS教程</em></h2><p> 猴子提示: 可以通过简单的更改<em class="red">CSS</em>文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.知道什么是<em class="red">CSS</em>了,现在就开始学习<em class="red">CSS</em>吧 ...</p><p><em class="green">www.dreamdu.com/css/wh...</em><em class="gray">百度快照</em><em class="gray">85%好评</em></p><!-- ********* End ********* --></body></html>第4关：搜索页面的样式设计-文本外观样式的应用
<!doctype html><html><head><meta charset="utf-8"><title>搜索页面</title><!-- ********* Begin ********* --><style type="text/css"> 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; } </style><!-- ********* End ********* --></head><body><h2 class="header">什么是CSS?<em>—CSS教程</em></h2><p> 猴子提示: 可以通过简单的更改<em class="red">CSS</em>文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.知道什么是<em class="red">CSS</em>了,现在就开始学习<em class="red">CSS</em>吧 ...</p><p><em class="green">www.dreamdu.com/css/wh...</em>-<em class="gray">百度快照</em>-<em class="gray">85%好评</em></p></body></html> 17.css3-文本字体样式
第1关：字体样式属性相关的概念
BDA
第2关：美食专栏网页的结构设置
<!doctype html><html><head><meta charset="utf-8"><title>美食专题栏目</title></head><body><img src="https://www.educoder.net/api/attachments/1989171 "插图"" alt="跳槽有道" /><!-- ********* Begin ********* --><p><em class="blue">导语</em>：臭豆腐是<strong class="red">长沙</strong>有名的小吃，是一种独具风味的食品。“闻起来臭、吃起来香”是它的最大特点,不少外省人品尝后都赞不绝口。长沙的臭豆腐要数百年老店火宫殿炸得最好,外焦微脆、内软味鲜,100多年来,进火宫殿的人没有不吃臭豆腐的。当年...<em>【详情】</em></p><p><em class="blue">火宫殿臭豆腐</em>：价格<strong class="money">18</strong>元</p><!-- ********* End ********* --></body></html>第3关：美食专栏网页的样式设置
<!doctype html><html><head><meta charset="utf-8"><title>美食专题栏目</title><!-- ********* Begin ********* --><style type="text/css">p {font-size:16px;font-family:微软雅黑;}.blue {color:#33F;}.red {color:#F00;}.money {font-size:16px;}</style><!-- ********* End ********* --></head><body><img src="https://www.educoder.net/api/attachments/1989171 "插图"" alt="跳槽有道" /><p><em class="blue">导语</em>：臭豆腐是<strong class="red">长沙</strong>有名的小吃，是一种独具风味的食品。“闻起来臭、吃起来香”是它的最大特点,不少外省人品尝后都赞不绝口。长沙的臭豆腐要数百年老店火宫殿炸得最好,外焦微脆、内软味鲜,100多年来,进火宫殿的人没有不吃臭豆腐的。当年...<em>【详情】</em></p><p><em class="blue">火宫殿臭豆腐</em>：价格<strong class="money">18</strong>元</p></body></html> 18.css3选择器-属性选择器
第1关：CSS3-属性选择器相关概念
CBAD
第2关：CSS3-属性选择器
<!DOCTYPE html><html> <head> <title>属性选择器</title> <style type="text/css"> 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 ******* */ </style> </head> <body> <div name="a a1" class="a"></div> <div name="b-1" class="b" title="nice"><li>nice</li></div> <div name="b-2" class="b" title="to"><li>to</li></div> <div name="b-3" class="b" title="meet"><li>meet</li></div> <div name="b-4" class="b" title="you"><li>you</li></div> <div name="a a2" class="a"></div> </body></html>
第3关：CSS3-包含及连字符选择器
<!DOCTYPE html><html> <head> <title>属性选择器</title> <style type="text/css"> 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 ******* */ </style> </head> <body> <div name="a a1" class="a"></div> <div name="b-1" class="b" title="nice"><li>nice</li></div> <div name="b-2" class="b" title="to"><li>to</li></div> <div name="b-3" class="b" title="meet"><li>meet</li></div> <div name="b-4" class="b" title="you"><li>you</li></div> <div name="a a2" class="a"></div> </body></html>第4关：CSS3-前缀后缀选择器
<!DOCTYPE html><html> <head> <title>属性选择器</title> <style type="text/css"> 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 ******* */ </style> </head> <body> <div name="a a1" class="a"></div> <div name="b-1" class="b" title="nice"><li>nice</li></div> <div name="b-2" class="b" title="to"><li>to</li></div> <div name="b-3" class="b" title="meet"><li>meet</li></div> <div name="b-4" class="b" title="you"><li>you</li></div> <div name="a a2" class="a"></div> </body></html> 19.css3背景样式
第1关：CSS背景相关的概念
DACAD
第2关：CSS-背景色的设置
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS-背景色的设置</title> <style type="text/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 ********* */ } </style></head><body class="background"> <div class="backgroundImage"> <h2>新媒体的大势所趋</h2> <p id=p1>更新时间：2021年11月30日14时08分 来源：<span>开源社区</span></p> <hr size="2" color="#CCCCCC" /> <p id=p2>近年来，随着<span>移动互联网</span>的火爆，公众号、微博、今日头条、抖音等一大批社交平台的火爆带动了新媒体运营行业的发展，运营人在企业中的价值也不断的被放大和受到重视，很多企业在做线上这块时都会考虑<span>“两微一抖”</span>，也就是我们所说的新媒体+短视频运营。因此也就催生了大量对新媒体+短视频运营人的需求岗位。</p> </div></body></html>第3关：CSS-背景图的设置
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS-背景色的设置</title> <style type="text/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 ********* */ } </style></head><body class="background"> <div class="backgroundImage"> <h2>新媒体的大势所趋</h2> <p id=p1>更新时间：2021年11月30日14时08分 来源：<span>开源社区</span></p> <hr size="2" color="#CCCCCC" /> <p id=p2>近年来，随着<span>移动互联网</span>的火爆，公众号、微博、今日头条、抖音等一大批社交平台的火爆带动了新媒体运营行业的发展，运营人在企业中的价值也不断的被放大和受到重视，很多企业在做线上这块时都会考虑<span>“两微一抖”</span>，也就是我们所说的新媒体+短视频运营。因此也就催生了大量对新媒体+短视频运营人的需求岗位。</p> </div></body></html>20.移动端电商网页制作
第1关：移动端电商页面制作
<!doctype html><html><head><meta charset="utf-8"><title>移动电商页面</title><style type="text/css">/* ********* 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 ********* */}</style></head><body><div class="all"> <div class="content"> <img src="https://www.educoder.net/api/attachments/2072741" /> </div></div></body></html>21.网页布局页面的制作
第1关：网页布局的结构设计
<!doctype html><html><head><meta charset="utf-8"><title>网页布局</title></head><body><!-- ********* Begin ********* --><div id="top"></div><div id="nav"></div><div id="banner"></div><div id="content"><div class="content_left"></div><div class="content_middle"></div><div class="content_right"></div></div><div id="footer"></div><!-- ********* End ********* --></body></html>
第2关：网页布局的样式设计
<!doctype html><html><head><meta charset="utf-8"><title>网页布局</title><!-- ********* Begin ********* --><style type="text/css">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)}</style><!-- ********* End ********* --></head><body> <div id="top"></div> <div id="nav"></div> <div id="banner"></div> <div id="content"> <div class="content_left"></div> <div class="content_middle"></div> <div class="content_right"></div> </div> <div id="footer"></div></body></html>22.团购悬浮框页面的制作
第1关：团购悬浮框页面的结构设计
<!doctype html><html><head><meta charset="utf-8"><title>电商团购悬浮框</title></head><body> <!-- ********* Begin ********* --><ul> <li> 7月30日0:00开团</li> <li class="item">新品团</li> <li class="item">尝鲜团</li> <li class="item"> 秒杀团</li> <li class="item">清仓团</li> <li class="item">返回顶部</li> </ul> <!-- ********* End ********* --></body></html>第2关：团购悬浮框页面的样式设计
<!doctype html><html><head> <meta charset="utf-8"> <title>电商团购悬浮框</title> <!-- ********* Begin ********* --> <style> 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; } </style> <!-- ********* End ********* --></head><body> <ul> <li>7月30日0:00开团</li> <li class="item">新品团</li> <li class="item">尝鲜团</li> <li class="item">秒杀团</li> <li class="item">清仓团</li> <li class="back">返回顶部</li> </ul></body></html>23.太极图的制作-css的应用
第1关：太极图的绘制
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>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%;}</style></head><body><div></div></body></html>第2关：太极图的绘制
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> 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%; } </style></head><body><div></div></body></html>
第3关：使太极图旋转：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> 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); </style></head><body><div></div></body></html>
