1.html5-Strukturelemente
Ebene 1: Konzepte im Zusammenhang mit Dokumentenstrukturelementen
ACBAB
Ebene 2: Anwendung von Header-Elementen und Artikel-Elementen
<!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>Ebene 3: Anwendung des Figure-Elements und des Figcaption-Elements
<!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-interaktive Elemente
Ebene 1: Konzepte im Zusammenhang mit interaktiven Elementen
ACBAB
Ebene 2: Fortschrittselement
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>progerss元素的使用</title>
</head>
<body>
下载进度：
<!-- ********* Begin ******* -->
<progress max="100" value="30"></progress>
<!-- ********* End ********* -->
</body>
</html>Ebene 3: Meterelement
<!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>Ebene 4: Details/Zusammenfassungselemente
<!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-Semantische Elemente auf Textebene
Ebene 1: Konzepte im Zusammenhang mit semantischen Elementen auf Textebene
CADBB
Ebene 2: Semantische Elemente auf Textebene
<!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>Ebene 3: Zitatelement und Zeitelement
<!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-Gruppenelemente
Ebene 1: Konzeptfragen zu gruppierten Elementen
BCDAD
Ebene 2: Ungeordnete Liste
<!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>Ebene 3: Geordnete Liste
<!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>Ebene 4: Definitionsliste
<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.Video abspielen
Ebene 1: Konzepte im Zusammenhang mit HTML5-Videos
DCBAA
Ebene 2: Video abspielen
<!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. Audio abspielen
Ebene 1: HTML5-Audio-bezogene Konzepte
BACB AC (mehrere Auswahlmöglichkeiten)
Ebene 2: Audio abspielen
<!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-Programmiertraining-HTML5-Hyperlink-Anwendung
Stufe 1: Erstellen Sie Hot-Word-Hyperlinks
<!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>Ebene 2: Heatmap-Hyperlinks erstellen
<!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>Stufe 3: Song-Hyperlink herunterladen
<!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>Stufe 4: Erstellen Sie In-Page-Hyperlinks
<!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-Wissenstraining-HTML5-Hyperlink-Anwendung
Stufe 1: Web-Wissenstraining – HTML5-Hyperlink-Anwendung
ABCDB
9.html5-Tabelle erweiterte Stileinstellungen
Ebene 1: Konzepte im Zusammenhang mit erweiterten Stileinstellungen für Tabellen
CABAD
Ebene 2: Legen Sie den äußeren Rahmenstil der Tabelle fest
<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>Ebene 3: Legen Sie den inneren Rahmenstil der Tabelle fest
<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>Ebene 4: Zellen in der Tabelle zusammenführen
<!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>Level 5: Umfassender Fall des Formulars
<!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. Aufbau des Formulars
Level 1: Grundlegende Konzepte von Formen
DACBC
Level 2: Lernen Sie, Aktions- und Methodenattribute festzulegen
<!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. Erstellen Sie Eingabesteuerelemente
Ebene 1: Konzepte im Zusammenhang mit Eingabesteuerungen
DBCAD
Ebene 2: Erstellen Sie ein Textfeld
<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>Ebene 3: Passwortfeld erstellen
<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>Ebene 4: Optionsfelder erstellen
<!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>Ebene 5: Kontrollkästchen erstellen
<!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>Ebene 6: Schaltfläche „Zurücksetzen“ und „Senden“.
<!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.Textbereich erstellen
Ebene 1: Konzepte im Zusammenhang mit der Textbereichssteuerung
CBDAB
Ebene 2: Erstellen Sie ein Textfeld
<!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-Stilregeln
Level 1: CSS-Grundlagen
BDCAB
Level 2: Erste Einführung in 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>Level 3: Einführung in CSS-Stile inline
<!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>
Stufe 4: Verwenden Sie externe Links, um CSS-Stile einzuführen
<!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-Selektor-Kombinationsselektor
Ebene 1: Konzepte im Zusammenhang mit Kombinationsselektoren
ACA
Ebene 2: Gruppenauswahl
<!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>Ebene 3: Nachkommenauswahl
<!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>Ebene 4: Auswahl untergeordneter Elemente
<!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>Ebene 5: Auswahl benachbarter Geschwister
<!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>Level 6: Common Brother Selector
<!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-Selektor-Basisselektor
Ebene 1: Konzepte im Zusammenhang mit grundlegenden CSS-Selektoren
DCB
Ebene 2: Universeller Selektor
<!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>Ebene 3: Tag-Auswahl
<!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>Level 4: Text-Google-Strukturdesign
<!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>Stufe 5: Textdesign im Google-Stil
<!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-Textdarstellungsstil
Ebene 1: Konzepte im Zusammenhang mit dem Textdarstellungsstil
BDB
Ebene 2: CSS-Textraumeinstellungen
<!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>
Ebene 3: Strukturelle Gestaltung der Suchseite
<!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>
Ebene 4: Stilgestaltung der Suchseite – Anwendung des Textdarstellungsstils
<!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-Text-Schriftstil
Ebene 1: Konzepte im Zusammenhang mit Schriftstilattributen
BDA
Ebene 2: Strukturelle Einstellungen der Webseite der Lebensmittelkolumne
<!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>
Ebene 3: Stileinstellung der Webseite der Lebensmittelkolumne
<!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 Selektor-Attribut-Selektor
Ebene 1: Konzepte im Zusammenhang mit CSS3-Attributselektoren
CBD
Ebene 2: CSS3-Attributauswahl
<!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>
Ebene 3: CSS3 – Enthält und Bindestrich-Selektoren
<!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>
Ebene 4: CSS3-Präfix- und Suffixselektor
<!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-Hintergrundstil
Ebene 1: Konzepte im Zusammenhang mit CSS-Hintergrund
Papa
Ebene 2: CSS-Hintergrundfarbeinstellungen
<!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>
Ebene 3: CSS-Hintergrundbildeinstellungen
<!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. Erstellung mobiler E-Commerce-Webseiten
Ebene 1: Erstellung mobiler E-Commerce-Seiten
<!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. Erstellung des Webseitenlayouts
Level 1: Strukturelle Gestaltung des Webseitenlayouts
<!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>
Ebene 2: Stilgestaltung des Webseitenlayouts
<!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. Erstellung einer Floating-Frame-Seite für Gruppenkäufe
Ebene 1: Strukturelle Gestaltung der Floating-Frame-Seite für Gruppenkäufe
<!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>Ebene 2: Stilgestaltung der Floating-Box-Seite für Gruppenkäufe
<!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. Erstellung von Tai-Chi-Diagrammen – Anwendung von CSS
Level 1: Zeichnen eines Tai-Chi-Diagramms
<!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>
Level 2: Zeichnen eines Tai-Chi-Diagramms
<!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>
Level 3: Lassen Sie die Tai-Chi-Figur rotieren:
<!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>