chore(learn): Applied MDX format to Chinese curriculum files (#40462)

curriculum/challenges/chinese/01-responsive-web-design/basic-css/style-the-html-body-element.md

@@ -1,21 +1,22 @@
 ---
 id: bad87fee1348bd9aedf08736
+title: 给 HTML 的 Body 元素添加样式
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cB77PHW'
 forumTopicId: 18313
-title: 给 HTML 的 Body 元素添加样式
 ---
 
-## Description
-<section id='description'>
-现在让我们来讨论一下 CSS 继承。
-每一个 HTML 页面都含有一个<code>body</code>元素。
-</section>
+# --description--
 
-## Instructions
-<section id='instructions'>
-我们可以通过设置<code>background-color</code>为<code>black</code>，来证明<code>body</code>元素的存在。
-添加以下的代码到<code>style</code>标签里面：
+现在让我们来讨论一下 CSS 继承。
+
+每一个 HTML 页面都含有一个`body`元素。
+
+# --instructions--
+
+我们可以通过设置`background-color`为`black`，来证明`body`元素的存在。
+
+添加以下的代码到`style`标签里面：
 
 ```css
 body {
@@ -23,47 +24,29 @@ body {
 }
 ```
 
-</section>
+# --hints--
 
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: '<code>body</code>元素的<code>background-color</code>应该是黑色的。'
-    testString: assert($("body").css("background-color") === "rgb(0, 0, 0)");
-  - text: '确保 CSS 规则格式书写正确，需要开关大括号。'
-    testString: assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i));
-  - text: '确保 CSS 规则要以分号结尾。'
-    testString: assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i));
+`body`元素的`background-color`应该是黑色的。
 
+```js
+assert($('body').css('background-color') === 'rgb(0, 0, 0)');
 ```
 
-</section>
+确保 CSS 规则格式书写正确，需要开关大括号。
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<style>
-
-</style>
+```js
+assert(
+  code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i)
+);
 ```
 
-</div>
+确保 CSS 规则要以分号结尾。
 
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
-```html
-// solution required
+```js
+assert(
+  code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i)
+);
 ```
 
-</section>
-              
+# --solutions--
+