Strona główna Odkrywaj Pomoc
Zaloguj się
lovecoding
/
W250913
10
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Przeglądaj źródła

admin

fengchuanyu 3 tygodni temu
rodzic
3cdb53520c
commit
8494e51a2f
5 zmienionych plików z 119 dodań i 0 usunięć
Widok podzielony Pokaż statystyki zmian
  1. 22 0
      1_HTML/11_实体字符.html
  2. 14 0
      1_HTML/12_分割线.html
  3. 19 0
      2_CSS/1_css基础.html
  4. 32 0
      2_CSS/2_css选择器.html
  5. 32 0
      2_CSS/3_css控制文字.html

+ 22 - 0
1_HTML/11_实体字符.html
Wyświetl plik 

@@ -0,0 +1,22 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- 页面中如果添加了连续多个空格 浏览器会自动合并为一个空格 -->
 
+    hello           world
 
+    <!-- 实体字符 -->
 
+    <!-- &nbsp; 表示空格 -->
 
+    hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; world!
 
+
 
+    <!-- 5<10 -->
 
+    <!-- &lt; 表示小于号 -->
 
+    <!-- &gt; 表示大于号 -->
 
+
 
+    5 &lt; 10 &gt; 1
 
+
 
+</body>
 
+</html>

+ 14 - 0
1_HTML/12_分割线.html
Wyświetl plik 

@@ -0,0 +1,14 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <p>hello</p>
 
+    <!-- 分割线 hr -->
 
+    <hr>
 
+    <p>world</p>
 
+</body>
 
+</html>

+ 19 - 0
2_CSS/1_css基础.html
Wyświetl plik 

@@ -0,0 +1,19 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <!-- css 需要写在style标签中 -->
 
+    <style>
 
+        /* css 选择器 */
 
+        /* 标签选择器 */
 
+        h1{
 
+           color:red; 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <h1>hello world</h1>
 
+</body>
 
+</html>

+ 32 - 0
2_CSS/2_css选择器.html
Wyświetl plik 

@@ -0,0 +1,32 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        /* 标签选择器 通过标签名称选中要控制的元素 */
 
+        /* div{
 
+            color: red;
 
+        } */
 
+        /* 类选择器 通过类名选中要控制的元素  选择器前方要加上“.”*/
 
+        /* .div1{
 
+            color: red;
 
+        } */
 
+
 
+        /* id选择器 通过ID名称选中要控制的元素 选择器前方要加上“#” */
 
+        #box{
 
+            color: red;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- class 给当前标签添加类名（别名） -->
 
+     <!-- id 给标签赋值一个ID名称 并且不允许重复 -->
 
+    <div class="div1" id="box">hello world</div>
 
+    <div>你好世界</div>
 
+    <div class="div1">你好</div>
 
+    <!-- 行内样式(内联样式) 直接在标签中添加style属性  格式：style="属性名:属性值;" -->
 
+    <div style="color: blue;">世界</div>
 
+</body>
 
+</html>

+ 32 - 0
2_CSS/3_css控制文字.html
Wyświetl plik 

@@ -0,0 +1,32 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        div{
 
+            /* color 控制文本颜色 */
 
+            color: red;
 
+            /* font-size 控制字体大小 */
 
+            /* px 像素 css 最常用的一个单位 */
 
+            font-size: 50px;
 
+            /* font-weight 控制字体粗细 */
 
+            /* font-weight: 500; */
 
+            /* bold 加粗 */
 
+            /* font-weight: bold; */
 
+            font-weight: bolder;
 
+            /* text-align 控制文本在容器内的对齐方式 不仅可以控制文本还可以控制行元素 */
 
+            /* center 居中对齐 */
 
+            /* left 左对齐 */
 
+            /* right 右对齐 */
 
+            text-align: center;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    hello world
 
+    <div>hello world</div>
 
+
 
+</body>
 
+</html>