课程代码

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>