Trang chủ Khám phá Trợ giúp
Đăng nhập
lovecoding
/
VIP30
9
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu kéo về 0 Wiki
Browse Source

day4

e 1 năm trước cách đây
mục cha
53910b91e3
commit
e9e95fa53a
6 tập tin đã thay đổi với 265 bổ sung và 0 xóa
Split View Hiển thị tình trạng sai khác
  1. 47 0
      day4/1.css基本语法.html
  2. 26 0
      day4/2.超出一行显示省略号.html
  3. 46 0
      day4/3.元素转换.html
  4. 50 0
      day4/4.外边距.html
  5. 52 0
      day4/5.内边距.html
  6. 44 0
      day4/6.盒模型.html

+ 47 - 0
day4/1.css基本语法.html
Xem Tập Tin 

@@ -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>
 
+        div {
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+            color: #ff0;
 
+            /* 
+                圆角边框 border-radius
 
+                50% 圆形
 
+                右下border-bottom-right-radius
 
+                右上border-top-right-radius
 
+                左下border-bottom-left-radius
 
+                左上border-top-left-radius
 
+            */
 
+            /* border-radius: 50%; */
 
+            border-bottom-right-radius: 10px;
 
+        }
 
+        input {
 
+            /* 取消边框 */
 
+            /* border:none; */
 
+            border:1px solid #f00;
 
+            /* 
+                outline 轮廓
 
+                    none 取消轮廓
 
+            */
 
+            outline: none;
 
+            outline: 2px solid #00f;
 
+        }
 
+        /* 
+            ::before ::after css3的语法
 
+            :before :after css2的语法
 
+        */
 
+    </style>
 
+</head>
 
+<body>
 
+    <div>
 
+        <div>你点我啊</div>
 
+        <input type="text">
 
+    </div>
 
+</body>
 
+</html>

+ 26 - 0
day4/2.超出一行显示省略号.html
Xem Tập Tin 

@@ -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 {
 
+            width: 300px;
 
+            height: 300px;
 
+            border:1px solid #333;
 
+            /* 强制不换行 */
 
+            white-space: nowrap;
 
+            /* 溢出隐藏 */
 
+            overflow: hidden;
 
+            /* 显示省略号 */
 
+            text-overflow: ellipsis;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div>
 
+        这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容
 
+    </div>
 
+</body>
 
+</html>

+ 46 - 0
day4/3.元素转换.html
Xem Tập Tin 

@@ -0,0 +1,46 @@
 
+<!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: 600px;
 
+            height: 800px;
 
+            border:1px solid #000;
 
+        }
 
+        .header {
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+            /* 将元素转成行内块元素 */
 
+            /* display: inline-block; */
 
+            /* 将元素转成行内元素 */
 
+            display: inline;
 
+        }
 
+        .main {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #00f;
 
+            /* display: inline-block; */
 
+            display: inline;
 
+        }
 
+        span {
 
+            width: 100px;
 
+            height: 100px;
 
+            background: #00f;
 
+            /* 将元素变成块元素 */
 
+            display: block;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="header">11111</div>
 
+        <div class="main">2222</div>
 
+        <span>今天天气真好</span>
 
+        <span>明天吃铁锅炖</span>
 
+    </div>
 
+</body>
 
+</html>

+ 50 - 0
day4/4.外边距.html
Xem Tập Tin 

@@ -0,0 +1,50 @@
 
+<!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 {
 
+        overflow: hidden;
 
+      }
 
+      #container {
 
+        width: 500px;
 
+        height: 500px;
 
+        background: #f00;
 
+        float: left;
 
+        /* margin-top: 50px;
 
+        margin-left: 30px;
 
+        margin-bottom: 50px;
 
+        margin-right: 10px; */
 
+        margin: 10px 30px 50px 100px;
 
+        /* 
+                外边距 margin
 
+                    一个值 上下左右
 
+                    两个值 上下 左右
 
+                    三个值 上 左右 下
 
+                    四个值 上 右 下 左
 
+                
+            */
 
+      }
 
+      .main1 {
 
+        width: 200px;
 
+        height: 200px;
 
+        background: #ff0;
 
+      }
 
+      .main2 {
 
+        width: 200px;
 
+        height: 200px;
 
+        background: #f0f;
 
+        float: left;
 
+      }
 
+    </style>
 
+  </head>
 
+  <body>
 
+    <div class="box">
 
+      <div id="container"></div>
 
+      <div class="main2"></div>
 
+    </div>
 
+    <div class="main1"></div>
 
+  </body>
 
+</html>

+ 52 - 0
day4/5.内边距.html
Xem Tập Tin 

@@ -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>
 
+        .box {
 
+            width: 600px;
 
+            height: 600px;
 
+            background: #00f;
 
+            color: #fff;
 
+        }
 
+        ul {
 
+            width: 300px;
 
+            background: #f00;
 
+            height: 400px;
 
+            padding-top: 10px;
 
+            padding-left: 30px;
 
+            list-style: none;
 
+            /* padding-bottom */
 
+            /* padding-right: 50px; */
 
+        /* 
+                内边距 padding
 
+                    一个值 上下左右
 
+                    两个值 上下 左右
 
+                    三个值 上 左右 下
 
+                    四个值 上 右 下 左
 
+                
+            */
 
+        }
 
+        ul li {
 
+            /* padding-top: 10px;
 
+            padding-left: 30px;
 
+            padding-bottom: 40px;
 
+            padding-right: 15px; */
 
+            padding: 10px 30px 50px 100px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <ul>
 
+            <li>明天休息</li>
 
+            <li>吃铁锅炖</li>
 
+            <li>看电影</li>
 
+            <li>一会去吃火锅</li>
 
+            <li>看无价之宝</li>
 
+        </ul>
 
+    </div>
 
+</body>
 
+</html>

+ 44 - 0
day4/6.盒模型.html
Xem Tập Tin 

@@ -0,0 +1,44 @@
 
+<!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>
 
+        * {
 
+            /* 
+                盒模型
 
+                    怪异盒模型(IE盒模型)：box-sizing:border-box;
 
+                    width:内容宽度（width+padding+border）
 
+                    标准盒模型：box-sizing:content-box;
 
+                    width:内容宽度（width）+padding+border
 
+            */
 
+            box-sizing: border-box;
 
+            list-style: none;
 
+            text-decoration: none;
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        .box {
 
+            width: 600px;
 
+            height: 600px;
 
+            background: #00f;
 
+            color: #fff;
 
+        }
 
+        .main {
 
+            padding: 30px;
 
+            width: 200px;
 
+            height: 200px;
 
+            border: 6px solid #f00;
 
+            background: #0f0;
 
+            /* 已知宽高盒子已到页面中间 */
 
+            margin: 0 auto;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="main">一闪一闪亮晶晶一闪一闪亮晶晶一闪一闪亮晶晶一闪一闪亮晶晶一闪一闪亮晶晶</div>
 
+    </div>
 
+</body>
 
+</html>