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

admin

fengchuanyu 2 өдөр өмнө
parent
e195014014
commit
c89e37ed6b
9 өөрчлөгдсөн 208 нэмэгдсэн , 1 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. BIN
      .DS_Store
  2. 1 0
      2_CSS/10_行_块_行块元素.html
  3. 2 0
      2_CSS/12_方向属性.html
  4. 5 0
      2_CSS/13_盒子模型2.html
  5. 55 0
      2_CSS/15_浮动.html
  6. 72 0
      2_CSS/16_伪类_伪元素选择器.html
  7. 1 1
      2_CSS/4_css盒子模型.html
  8. 1 0
      2_CSS/5_文本行高.html
  9. 71 0
      2_CSS/练习5_浮动练习.html

BIN
.DS_Store
Файл харах


+ 1 - 0
2_CSS/10_行_块_行块元素.html
Файл харах 

@@ -28,6 +28,7 @@
 
         /* 行内块元素 可以设置高度和宽度 */
 
         /* 行内块元素 可以设置高度和宽度 */
 
         /* 行内块元素 可以设置上下外边距 */
 
         /* 行内块元素 可以设置上下外边距 */
 
         /* 行内块元素 可以在同一行展示 */
 
         /* 行内块元素 可以在同一行展示 */
 
+        /* img button input seleclt 等都是行内块元素 */
 
         img{
 
         img{
 
             width: 200px;
 
             width: 200px;
 
         }
 
         }

+ 2 - 0
2_CSS/12_方向属性.html
Файл харах 

@@ -17,6 +17,8 @@
 
             /* margin-left: 20px; */
 
             /* margin-left: 20px; */
 
             /* 右外边距 */
 
             /* 右外边距 */
 
             /* margin-right: 20px; */
 
             /* margin-right: 20px; */
 
+
 
+            /* top left right bottom 同样适用于padding */
 
         }
 
         }
 
     </style>
 
     </style>
 
 </head>
 
 </head>

+ 5 - 0
2_CSS/13_盒子模型2.html
Файл харах 

@@ -13,11 +13,16 @@
 
             padding: 20px;
 
             padding: 20px;
 
         } */
 
         } */
 
 
 
+        /* 盒子模型：标准盒模型 和 怪异盒模型 */
 
+        /* 标准盒模型：实际宽度 = width + padding + border */
 
+        /* 怪异盒模型：实际宽度 = width */
 
+        /* 怪异盒模型 padding 和 border 不会导致元素的宽度和高度增加 */
 
         div{
 
         div{
 
             width: 200px;
 
             width: 200px;
 
             height: 200px;
 
             height: 200px;
 
             background-color: red;
 
             background-color: red;
 
             padding: 20px;
 
             padding: 20px;
 
+            /* box-sizing 可以切换盒模型的效果 border-box 怪异盒模型 content-box标准盒模型 */
 
             box-sizing: border-box;
 
             box-sizing: border-box;
 
         }
 
         }

+ 55 - 0
2_CSS/15_浮动.html
Файл харах 

@@ -0,0 +1,55 @@
 
+<!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>
 
+        .item{
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+
 
+            /* 元素的高度默认会被内容撑开 */
 
+
 
+            /* 如果容器内部元素浮动 容器的高度会消失 ：脱离文档流 */
 
+
 
+            /* 浮动属性可以块元素横向排列 left左浮动 right右浮动 */
 
+            float: left;
 
+
 
+            /* display: inline-block; */
 
+            /* 让元素变为行内块元素 */
 
+            /* 如果行块元素横向排列元素之间会有空隙 这个是空隙是回车符 */
 
+        }
 
+        .box{
 
+            width: 800px;
 
+            /* height: 100px; */
 
+            border:1px dashed black;
 
+            margin: 0 auto;
 
+        }
 
+        /* p{
 
+            /* 清除浮动 */
 
+            /* clear: both; */
 
+        /* }  */
 
+
 
+        /* 伪元素选择器 ::after */
 
+        /* 伪元素选择器可以实现向标签中加入一个虚假的标签 */
 
+        /* 通过伪元素选择器插入的假标签 属于行元素 */
 
+        .box::after{
 
+            /* content 属性 必须要写 他是负责向标签中插入假标签并填写内容的 */
 
+            content:"";
 
+            clear: both;
 
+            display: block;
 
+
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="item">1</div>
 
+        <div class="item">2</div>
 
+        <div class="item">3</div>
 
+        <!-- <p></p> -->
 
+    </div>
 
+</body>
 
+</html>

+ 72 - 0
2_CSS/16_伪类_伪元素选择器.html
Файл харах 

@@ -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{
 
+            width: 200px;
 
+            height: 200px;
 
+            border:2px solid black;
 
+        }
 
+
 
+        /* ::after 伪元素选择器 可以向当前容器的最后边添加标签 */
 
+        .box::after{
 
+            content: "hello world";
 
+            color: blue;
 
+        }
 
+        /* ::before 伪元素选择器 可以向当前容器的最前边添加标签 */
 
+        .box::before{
 
+            content: "你好 世界";
 
+            color: red;
 
+        }
 
+
 
+        /* 伪类选择器 */
 
+        /* 控制选中元素中的第一个 */
 
+        /* li:first-child{
 
+            color: red;
 
+        } */
 
+        /* 控制选中元素中的最后一个 */
 
+        /* li:last-child{
 
+            color: blue;
 
+        } */
 
+        /* 控制选中元素中的第n个 */
 
+        /* nth-child(n) 可以选中第n个元素 */
 
+        /* li:nth-child(3){
 
+            color: green;
 
+        } */
 
+
 
+        /* 选中元素中的 奇数(odd) 偶数(even) 元素 */
 
+        /* li:nth-child(even){
 
+            color: red;
 
+        } */
 
+         /* nth-child(2n)偶数 （2n+1)奇数  n从0开始一直到最后一个元素 */
 
+        li:nth-child(2n){
 
+            color: blue;
 
+        }
 
+        /* :hover 控制鼠标悬停在元素上时的样式 */
 
+        h1:hover{
 
+            color: red;
 
+            cursor: pointer;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        这是一个盒子
 
+    </div>
 
+
 
+    <ul>
 
+        <li>列表项1</li>
 
+        <li>列表项2</li>
 
+        <li>列表项3</li>
 
+        <li>列表项4</li>
 
+        <li>列表项5</li>
 
+        <li>列表项6</li>
 
+        <li>列表项7</li>
 
+    </ul>
 
+
 
+    <h1>hello world</h1>
 
+</body>
 
+</html>

+ 1 - 1
2_CSS/4_css盒子模型.html
Файл харах 

@@ -14,7 +14,7 @@
 
             /* border: 边框宽度 边框样式 边框颜色 */
 
             /* border: 边框宽度 边框样式 边框颜色 */
 
             border:1px solid red;
 
             border:1px solid red;
 
             /* padding 内边距 边框离内部元素的距离 */
 
             /* padding 内边距 边框离内部元素的距离 */
 
-            /* padding:10; 上 右 下 左 全都是10像素 */
 
+            /* padding: 10; 上 右 下 左 全都是10像素 */
 
             padding: 10px;
 
             padding: 10px;
 
             /* margin 外边距 边框离外部元素的距离 */
 
             /* margin 外边距 边框离外部元素的距离 */
 
             /* margin:10px; 上 右 下 左 全都是10像素 */
 
             /* margin:10px; 上 右 下 左 全都是10像素 */

+ 1 - 0
2_CSS/5_文本行高.html
Файл харах 

@@ -17,6 +17,7 @@
 
     <!-- <div>您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
 
     <!-- <div>您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
 
 在本教程中，您将学习如何使用 HTML 来创建站点。</div> -->
 
 在本教程中，您将学习如何使用 HTML 来创建站点。</div> -->
 
 
 
+<!-- 实现文本垂直方向居中 其实利用了行高等于高度的特性 因为文本会在它所在的这一个行居中展示 -->
 
 <div>hello world</div>
 
 <div>hello world</div>
 
 </body>
 
 </body>
 
 </html>
 
 </html>

+ 71 - 0
2_CSS/练习5_浮动练习.html
Файл харах 

@@ -0,0 +1,71 @@
 
+<!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:1px solid black;
 
+            margin-bottom: 20px;
 
+        }
 
+        .item1{
 
+            background-color: blue;
 
+
 
+            float: left;
 
+        }
 
+        /* 清除浮动 工具类 */
 
+        .clearfix::after{
 
+            content: "";
 
+            display: block;
 
+            clear: both;
 
+        }
 
+        .item2{
 
+            background-color: red;
 
+            float: right;
 
+        }
 
+        .item{
 
+            width: 100px;
 
+            height: 100px;
 
+            color: white;
 
+            font-size: 50px;
 
+            font-weight: bold;
 
+            margin:10px;
 
+            text-align: center;
 
+            line-height: 100px;
 
+        }
 
+        .item3{
 
+            background-color: green;
 
+            float: left;
 
+        }
 
+        .item4{
 
+            background-color: orange;
 
+            margin:10px auto;
 
+        }
 
+        .item5{
 
+            background-color: green;
 
+            float: right;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 一个标签中可以写多个类名 -->
 
+    <div class="box clearfix">
 
+        <div class="item1 item">1</div>
 
+        <div class="item1 item">2</div>
 
+        <div class="item1 item">3</div>
 
+    </div>
 
+    <div class="box clearfix">
 
+        <div class="item2 item">1</div>
 
+        <div class="item2 item">2</div>
 
+        <div class="item2 item">3</div>
 
+    </div>
 
+    <div class="box">
 
+        <div class="item3 item">左</div>
 
+        <div class="item5 item">右</div>
 
+        <div class="item4 item">中</div>
 
+    </div>
 
+</body>
 
+</html>