Inicio Explorar Axuda
Iniciar sesión
lovecoding
/
web0715
10
0
Fork 0
Ficheiros Incidencias 0 Wiki
Explorar o código

add

fengchuanyu hai 9 meses
pai
37fb32d165
achega
9ea8115ae9
Modificáronse 4 ficheiros con 129 adicións e 0 borrados
Dividir vista Mostrar estatísticas de Diff
  1. 7 0
      2_css/13_解决浮动问题.html
  2. 38 0
      2_css/15_行块转换.html
  3. 51 0
      2_css/16_行级块元素.html
  4. 33 0
      2_css/17_百分比取值.html

+ 7 - 0
2_css/13_解决浮动问题.html
Ver ficheiro 

@@ -30,10 +30,17 @@
 
         /* span{
 
             clear: both;
 
         } */
 
+        .box::after{
 
+            /* 伪元素插入的元素 为行级元素 */
 
+            content: "";
 
+            display: block;
 
+            clear: both;
 
+        }
 
     </style>
 
 </head>
 
 <body>
 
     <div class="box">
 
+
 
         <div class="box2"></div>
 
         <div class="box3"></div>
 
         <!-- <span>hello</span> -->

+ 38 - 0
2_css/15_行块转换.html
Ver ficheiro 

@@ -0,0 +1,38 @@
 
+<!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{
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color:red;
 
+            /* 块元素转行元素 */
 
+            display: inline;
 
+        }
 
+        .span1{
 
+            height: 100px;
 
+            width: 100px;
 
+            background-color: blue;
 
+            /* 块元素转换行元素 */
 
+            display: block;
 
+        }
 
+        .span2{
 
+            background-color: yellow;
 
+            margin-top: 100px;
 
+            margin-right: 100px;
 
+        }
 
+        .span3{
 
+            background-color:purple;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">world</div>
 
+    <span class="span1">hello</span>
 
+    <span class="span2">你好</span>
 
+    <span class="span3">世界</span>
 
+</body>
 
+</html>

+ 51 - 0
2_css/16_行级块元素.html
Ver ficheiro 

@@ -0,0 +1,51 @@
 
+<!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{
 
+            font-size: 0;
 
+            width: 300px;
 
+            height: 300px;
 
+            border:2px solid black;
 
+        } */
 
+        /* span{
 
+            font-size: 20px;
 
+            background-color: blue;
 
+        } */
 
+        img{
 
+            width: 300px;
 
+        }
 
+        ul{
 
+            border:2px solid black;
 
+        }
 
+        li{
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: blue;
 
+            margin:10px;
 
+            /* 转换为行级块元素 */
 
+            display: inline-block;
 
+
 
+            /* float: left; */
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- <div>
 
+        <span>hello</span>
 
+        <span>world</span>
 
+    </div> -->
 
+    <!-- 行级块元素 -->
 
+    <img src="./img/img4.jpg">
 
+    <img src="./img/img1.jpg">
 
+
 
+    <ul>
 
+        <li>a</li>
 
+        <li>b</li>
 
+        <li>c</li>
 
+    </ul>
 
+</body>
 
+</html>

+ 33 - 0
2_css/17_百分比取值.html
Ver ficheiro 

@@ -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>
 
+        .box{
 
+            border:2px solid black;
 
+            width: 400px;
 
+            height: 100px;
 
+        }
 
+        .box1{
 
+            height: 100px;
 
+            background-color: red;
 
+            width: 50%;
 
+            float: left;
 
+        }
 
+        .box2{
 
+            float: left;
 
+            width: 50%;
 
+            height: 100px;
 
+            background-color: blue;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="box1"></div>
 
+        <div class="box2"></div>
 
+    </div>
 
+</body>
 
+</html>