Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
lovecoding
/
VIP28
9
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

fix:day3

e 1 жил өмнө
parent
428c1447e2
commit
ace21c5b45
4 өөрчлөгдсөн 158 нэмэгдсэн , 0 устгасан
Өөрчлөлтийг ялгаж харах Өөрчлөлтийн статистик харах
  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
Файл харах 

@@ -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
Файл харах 

@@ -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
Файл харах 

@@ -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
Файл харах 

@@ -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>