课程代码

2025-12-03 23:08:39 +08:00
commit 290f629d2c
63 changed files with 7065 additions and 0 deletions
--- a/web_test/test2/attri_practice.html
+++ b/web_test/test2/attri_practice.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <title>CSS属性练习</title>
+    <style>
+        /* (3) 使用标记选择器将p标签中的字体颜色设置为#cc0000，字体大小为32px */
+        p {
+            color: #cc0000;
+            font-size: 32px;
+        }
+
+        /* (4) 使用id选择器将p标签的背景颜色设置为gray */
+        #paragraph {
+            background-color: gray;
+        }
+
+        /* (5) 使用类选择器将p标签中内容的对齐方式设置为水平居中对齐,字体样式为斜体，字体用宋体 */
+        .center {
+            text-align: center;
+            font-style: italic;
+            font-family: "SimSun", "宋体", serif;
+        }
+
+        /* (6) 使用伪类选择器，取消a标签的下划线 */
+        a {
+            text-decoration: none;
+        }
+
+        /* 注意：伪类选择器的顺序很重要，必须按照LVHA顺序 */
+        /* a标记未被访问时，字体颜色为gray */
+        a:link {
+            color: gray;
+        }
+
+        /* a标记在被访问后，字体颜色为#9900ff */
+        a:visited {
+            color: #9900ff;
+        }
+
+        /* 鼠标悬停在a标记上时，字体颜色为red，字体大小为24px */
+        a:hover {
+            color: red;
+            font-size: 24px;
+        }
+
+        /* a标记在被用户激活时，字体颜色为rgb(0, 204, 0) */
+        a:active {
+            color: rgb(0, 204, 0);
+        }
+
+        /* (7) 选取带有title属性的标记，并设置字体粗细为bold */
+        [title] {
+            font-weight: bold;
+        }
+    </style>
+</head>
+
+<body>
+    <!-- (1) 为p标签添加title属性，属性值为tit -->
+    <p id="paragraph" class="center" title="tit">一个段落</p>
+
+    <!-- (2) 实现a标签点击跳转到菜鸟教程的功能，要求在一个全新的空白窗口打开链接 -->
+    <a href="https://www.runoob.com" target="_blank">点击跳转到菜鸟教程</a>
+</body>
+
+</html>
--- a/web_test/test2/news.html
+++ b/web_test/test2/news.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <title>新闻</title>
+    <style>
+        p {
+            letter-spacing: 6px;
+            /* 字符间距 */
+            line-height: 2em;
+            /* 行高 */
+            text-indent: 2em;
+            /* 首行缩进 */
+            word-spacing: 10px;
+            /* 单词间距 */
+        }
+    </style>
+</head>
+
+<body>
+    <p>昨天上午，南京国际博览中心金陵会议中心内欢声笑语，春意盎然，省委、省政府在这里举行春节团拜会。 Yesterday morning, the Jinling Conference Center of Nanjing
+        International Expo Center was filled with laughter and joy, and the provincial party committee and government
+        held a Spring Festival gathering here.</p>
+</body>
+
+</html>
--- a/web_test/test2/product.html
+++ b/web_test/test2/product.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <title>产品介绍</title>
+    <style>
+        /* 使用标记选择器为介绍重庆的段落设置样式 */
+        p.chongqing {
+            text-decoration: underline;
+            /* 下划线 */
+            text-transform: capitalize;
+            /* 首字母大写 */
+        }
+
+        /* 使用id选择器为介绍四川的段落设置样式 */
+        #sichuan {
+            text-decoration: line-through;
+            /* 删除线 */
+            text-transform: lowercase;
+            /* 所有字母小写 */
+        }
+
+        /* 使用类选择器为介绍贵州的段落设置样式 */
+        .guizhou {
+            text-decoration: overline;
+            /* 上划线 */
+            text-transform: uppercase;
+            /* 所有字母大写 */
+        }
+    </style>
+</head>
+
+<body>
+    <h3>设置文字装饰及大小写转换</h3>
+
+    <p class="chongqing">Chongqing, abbreviated as "Yu", is a municipality directly under the central and western
+        regions of China, famous for its mountainous city characteristics, hotpot culture, and the beautiful scenery of
+        the confluence of the Yangtze River and Jialing River.</p>
+
+    <p id="sichuan">Sichuan, abbreviated as "Chuan" or "Shu", is located in southwestern China and is a province known
+        for its magnificent natural scenery, rich cultural heritage, and spicy cuisine.</p>
+
+    <p class="guizhou">Guizhou, abbreviated as "Qian" or "Gui", is located in southwestern China and is a province
+        renowned for its diverse ethnic cultures, spectacular karst landforms, and beautiful natural landscapes.</p>
+</body>
+
+</html>