Home Verkennen Help
Inloggen
lovecoding
/
W260426
10
0
Vork 0
Bestanden Issues 0 Pull-aanvragen 0 Wiki
Bladeren bron

admin

fengchuanyu 20 uur geleden
bovenliggende
61541ae10f
commit
c851d8f8b2
4 gewijzigde bestanden met toevoegingen van 194 en 0 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 47 0
      2_CSS/28_浮动2.html
  2. 23 0
      2_CSS/29_伪元素.html
  3. 52 0
      2_CSS/30_伪类选择器.html
  4. 72 0
      2_CSS/练习7_浮动练习.html

+ 47 - 0
2_CSS/28_浮动2.html
Bestand weergeven 

@@ -0,0 +1,47 @@
 
+<!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>
 
+        .box{
 
+            border: 3px solid black;
 
+            /* height: 200px; */
 
+        }
 
+        .item{
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: red;
 
+            float: left;
 
+        }
 
+        .box2{
 
+            height: 300px;
 
+            width: 300px;
 
+            background-color: blue;
 
+        }
 
+        /* p{
 
+            clear: both;
 
+        } */
 
+         /* ::after 伪元素 */
 
+         /* 在当前元素中最后面添加一个伪元素（假的标签） */
 
+        .box::after{
 
+            /* content 伪元素的内容 必须要有  伪元素默认为行元素*/
 
+            content: "";
 
+            /* display 块级元素 */
 
+            display: block;
 
+            /* clear 清除浮动. 必须作用于块级元素上 */
 
+            clear: both;
 
+        } 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="item">1</div>
 
+        <div class="item">2</div>
 
+        <div class="item">3</div>
 
+        <!-- <p></p> -->
 
+    </div>
 
+    <div class="box2"></div>
 
+</body>
 
+</html>

+ 23 - 0
2_CSS/29_伪元素.html
Bestand weergeven 

@@ -0,0 +1,23 @@
 
+<!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>
 
+        /* ::after在当前元素的最后面添加一个伪元素（假的标签） */
 
+        .box::after{
 
+            content: "world";
 
+        }
 
+        /* ::before在当前元素的前面添加一个伪元素（假的标签） */
 
+        .box::before{
 
+            content: "hello";
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+       123456
 
+    </div>
 
+</body>
 
+</html>

+ 52 - 0
2_CSS/30_伪类选择器.html
Bestand weergeven 

@@ -0,0 +1,52 @@
 
+<!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>
 
+        /* 伪类选择器 */
 
+        /* :hover 鼠标悬停在元素上时触发 */
 
+        h1:hover{
 
+            color: red;
 
+            /* 鼠标效果 pointer手型 */
 
+            cursor: pointer;
 
+        }
 
+        /* :nth-child 选择第n个子元素 */
 
+        /* li:nth-child(2){
 
+            color: red;
 
+        } */
 
+
 
+        /* n 表示任意次数 n从0开始 */
 
+        /* 选择所有偶数子元素 2n 或者 even */
 
+        /* li:nth-child(even){
 
+            color: red;
 
+        } */
 
+        /* 选择所有奇数子元素 2n+1 或者 odd */
 
+        /* li:nth-child(odd){
 
+            color: blue;
 
+        } */
 
+
 
+        /* 选择第一个子元素 */
 
+        li:first-child{
 
+            color: red;
 
+        }
 
+        /* 选择最后一个子元素 */
 
+        li:last-child{
 
+            color: blue;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <h1>hello world</h1>
 
+    <ul>
 
+        <li>列表项1</li>
 
+        <li>列表项2</li>
 
+        <li>列表项3</li>
 
+        <li>列表项4</li>
 
+        <li>列表项5</li>
 
+        <li>列表项6</li>
 
+        <li>列表项7</li>
 
+    </ul>
 
+</body>
 
+</html>

+ 72 - 0
2_CSS/练习7_浮动练习.html
Bestand weergeven 

@@ -0,0 +1,72 @@
 
+<!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>
 
+        .box {
 
+            border: 3px solid black;
 
+            height: 200px;
 
+            padding: 20px;
 
+            margin-bottom: 20px;
 
+        }
 
+
 
+        .box div {
 
+            width: 200px;
 
+            height: 200px;
 
+            text-align: center;
 
+            line-height: 200px;
 
+            color: white;
 
+            font-size: 50px;
 
+        }
 
+
 
+        .box .item {
 
+            background-color: red;
 
+            float: left;
 
+            margin-right: 20px;
 
+        }
 
+
 
+        .box .item2 {
 
+            background-color: blue;
 
+            float: right;
 
+            margin-left: 20px;
 
+        }
 
+        .box .item3{
 
+            background-color: green;
 
+        }
 
+        .box .item-left{
 
+            float: left;
 
+        }
 
+        .box .item-right{
 
+            float: right;
 
+        }
 
+        .box .item-center{
 
+            background-color: yellow;
 
+            margin: 0 auto;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div class="box">
 
+        <div class="item">1</div>
 
+        <div class="item">2</div>
 
+        <div class="item">3</div>
 
+    </div>
 
+
 
+    <div class="box">
 
+        <div class="item2">1</div>
 
+        <div class="item2">2</div>
 
+        <div class="item2">3</div>
 
+    </div>
 
+
 
+    <div class="box">
 
+        <div class="item3 item-left">左</div>
 
+        <div class="item3 item-right">右</div>
 
+        <div class="item3 item-center">中</div>
 
+    </div>
 
+</body>
 
+
 
+</html>