Acasă Explorează Ajutor
Autentificare
lovecoding
/
VIP28
9
0
Bifurcare 0
Fisiere Probleme 0 Trageți solicitările 0 Wiki
Răsfoiți Sursa

fix:day3

e 1 an în urmă
părinte
428c1447e2
comite
ace21c5b45
4 a modificat fișierele cu 158 adăugiri și 0 ștergeri
Vizualizare divizată Arată Statisticile Diff
  1. 10 0
      day4/2.盒模型.html
  2. 57 0
      day4/3.浮动.html
  3. 66 0
      day4/4.解决浮动问题.html
  4. 25 0
      day4/5.省略号.html

+ 10 - 0
day4/2.盒模型.html
Vizualizați fișierul 

@@ -50,6 +50,12 @@
 
             background: #f00;
 
             margin: 30px;
 
         }
 
+        .pictures {
 
+            width: 300px;
 
+            height: 200px;
 
+            border: 1px solid #000;
 
+            background-image: url("../day1/images/img01.gif");
 
+        }
 
     </style>
 
 </head>
 
 <body>
 
@@ -63,5 +69,9 @@
 
     <div class="content">
 
         <div class="main"></div>
 
     </div>
 
+    <img src="../day1/images/1.jpg" alt="">
 
+    <div class="pictures">
 
+
 
+    </div>
 
 </body>
 
 </html>

+ 57 - 0
day4/3.浮动.html
Vizualizați fișierul 

@@ -0,0 +1,57 @@
 
+<!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>
 
+        .main {
 
+            border: 2px solid #000;
 
+        }
 
+        .one {
 
+            background: #f00;
 
+            float: left;
 
+            width: 200px;
 
+            height: 200px;
 
+            font-size: 30px;
 
+            color: #fff;
 
+        }
 
+        .two {
 
+            background: #0f0;
 
+            float: left;
 
+            width: 200px;
 
+            height: 200px;
 
+            font-size: 30px;
 
+            color: #fff;
 
+        }
 
+        .three {
 
+            background: #00f;
 
+            float: left;
 
+            width: 200px;
 
+            height: 200px;
 
+            font-size: 30px;
 
+            color: #fff;
 
+        }
 
+        img {
 
+            float: left;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- <img src="../day1/images/img01.gif" alt="">
 
+    <img src="../day1/images/img01.gif" alt="">
 
+    <img src="../day1/images/img01.gif" alt=""> -->
 
+    <!-- 
+        为什么使用浮动：想让元素在一行显示
 
+        float:left/right;
 
+        问题：浮动会导致父元素高度塌陷
 
+        因为浮动会让元素脱离文档流 不占位
 
+     -->
 
+     <div class="main">
 
+        <div class="one">1</div>
 
+        <div class="two">2</div>
 
+        <div class="three">3</div>
 
+        我是一段话
 
+     </div>
 
+</body>
 
+</html>

+ 66 - 0
day4/4.解决浮动问题.html
Vizualizați fișierul 

@@ -0,0 +1,66 @@
 
+<!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>
 
+        .main {
 
+            border: 2px solid #000;
 
+            /* overflow: auto; */
 
+        }
 
+        .one {
 
+            background: #f00;
 
+            float: left;
 
+            width: 200px;
 
+            height: 200px;
 
+            font-size: 30px;
 
+            color: #fff;
 
+        }
 
+        .two {
 
+            background: #0f0;
 
+            float: left;
 
+            width: 200px;
 
+            height: 200px;
 
+            font-size: 30px;
 
+            color: #fff;
 
+        }
 
+        .three {
 
+            background: #00f;
 
+            float: left;
 
+            width: 200px;
 
+            height: 200px;
 
+            font-size: 30px;
 
+            color: #fff;
 
+        }
 
+        /* .empty {
 
+            clear: both;
 
+        } */
 
+        .clearfix::after {
 
+            content: "";
 
+            display: block;
 
+            clear: both;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 
+        1.溢出隐藏法：在高度塌陷的父级元素上 添加一个属性 overflow:hidden/auto;
 
+        2.额外标签法: 在子集添加一个空标签 并添加属性clear:both/left/right; clear:none;
 
+        3.伪元素清浮动：
 
+        .clearfix::after {
 
+            content: "";
 
+            display: block;
 
+            clear: both;
 
+        }
 
+        把样式名clearfix添加到对应高度塌陷的父元素上
 
+     -->
 
+    <div class="main clearfix">
 
+        <div class="one">1</div>
 
+        <div class="two">2</div>
 
+        <div class="three">3</div>
 
+        <!-- <div class="empty"></div> -->
 
+        我是一段话
 
+     </div>
 
+</body>
 
+</html>

+ 25 - 0
day4/5.省略号.html
Vizualizați fișierul 

@@ -0,0 +1,25 @@
 
+<!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{
 
+            width: 300px;
 
+            height: 300px;
 
+            border: 1px solid #000;
 
+            /* 关键代码 */
 
+            /* 强制不换行 */
 
+            white-space: nowrap;
 
+            /* 溢出隐藏 */
 
+            overflow: hidden;
 
+            /* 变成省略号 */
 
+            text-overflow: ellipsis;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</div>
 
+</body>
 
+</html>