Начало Каталог Помощ
Вход
lovecoding
/
web0715
10
0
Разклонения 0
Файлове Задачи 0 Уики
Преглед на файлове

add

fengchuanyu преди 9 месеца
родител
518b3384b2
ревизия
648a5e8235
променени са 7 файла, в които са добавени 175 реда и са изтрити 0 реда
Обединен изглед Покажи статистика за разликите
  1. 16 0
      1_html/3_行块元素.html
  2. 16 0
      2_css/1_css.html
  3. 27 0
      2_css/2_选择器.html
  4. 33 0
      2_css/3_属性选择器.html
  5. 28 0
      2_css/4_类选择器.html
  6. 26 0
      2_css/5_伪元素选择器.html
  7. 29 0
      2_css/6_层叠样式.html

+ 16 - 0
1_html/3_行块元素.html
Целия файл 

@@ -0,0 +1,16 @@
 
+<!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>
 
+    <!-- 多个标签在一行内展示 称为行元素 -->
 
+    <span>hello</span>
 
+    <span>world</span>
 
+    <!-- 多个标签换行展示  称为块元素-->
 
+    <div>世界</div>
 
+    <div>你好</div>
 
+</body>
 
+</html>

+ 16 - 0
2_css/1_css.html
Целия файл 

@@ -0,0 +1,16 @@
 
+<!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;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div>hello world!</div>
 
+</body>
 
+</html>

+ 27 - 0
2_css/2_选择器.html
Целия файл 

@@ -0,0 +1,27 @@
 
+<!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选择器 且是唯一的 */
 
+        #divid{
 
+            color: red;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="div1" id="divid">hello</div>
 
+    <div>world</div>
 
+    <div class="div1">你好</div>
 
+    <div style="color:blue">世界</div>
 
+</body>
 
+</html>

+ 33 - 0
2_css/3_属性选择器.html
Целия файл 

@@ -0,0 +1,33 @@
 
+<!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>
 
+        /* .a{
 
+            color: red;
 
+        }
 
+        .b{
 
+            font-size:40px ;
 
+        } */
 
+        /* li[class]{
 
+            color: red;
 
+        } */
 
+        /* li[class=a]{
 
+            color: red;
 
+        } */
 
+        li[class~=a]{
 
+            color: red;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <ul>
 
+        <li class="a">hello</li>
 
+        <li class="ab">world</li>
 
+        <li class="b a">你好</li>
 
+        <li>世界</li>
 
+    </ul>
 
+</body>
 
+</html>

+ 28 - 0
2_css/4_类选择器.html
Целия файл 

@@ -0,0 +1,28 @@
 
+<!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>
 
+        /* 伪类选择器 */
 
+        li:first-child{
 
+            color: red;
 
+        }
 
+        li:last-child{
 
+            color: blue;
 
+        }
 
+        li:nth-child(3){
 
+            color: yellow;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <ul>
 
+        <li>hello</li>
 
+        <li>world</li>
 
+        <li>你好</li>
 
+        <li>世界</li>
 
+    </ul>
 
+</body>
 
+</html>

+ 26 - 0
2_css/5_伪元素选择器.html
Целия файл 

@@ -0,0 +1,26 @@
 
+<!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::after{
 
+            content: "lovecoding";
 
+            color: blue;
 
+        }
 
+        div::before{
 
+            content: "web";
 
+            color: red;
 
+        }
 
+        /* 伪类选择器 */
 
+        div:hover{
 
+            color: yellow;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div>1</div>
 
+</body>
 
+</html>

+ 29 - 0
2_css/6_层叠样式.html
Целия файл 

@@ -0,0 +1,29 @@
 
+<!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>
 
+        .div1{
 
+            color: red;
 
+            font-size: 40px;
 
+        }
 
+        .div2{
 
+            color: blue;
 
+        }
 
+        .div3{
 
+            color: yellow;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="div1">
 
+        hello
 
+        <div class="div2">
 
+            world
 
+            <div class="div3">你好</div>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>