Home Explore Help
Sign In
lovecoding
/
W250511
10
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

admin

fengchuanyu 1 day ago
parent
e85f630946
commit
a9b9948328
5 changed files with 252 additions and 0 deletions
Split View Show Diff Stats
  1. 51 0
      2-CSS/14_浮动.html
  2. 29 0
      2-CSS/15_伪元素.html
  3. 61 0
      2-CSS/练习6_图形练习.html
  4. 88 0
      2-CSS/练习7_浮动.html
  5. 23 0
      2-CSS/练习8-伪元素.html

+ 51 - 0
2-CSS/14_浮动.html
View File 

@@ -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>
 
+        .box {
 
+            width: 800px;
 
+            /* height: 200px; */
 
+            border: 3px solid black
 
+        }
 
+
 
+        /* float 浮动元素 会让元素横向依次排列 */
 
+        .box div {
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: blue;
 
+            margin-left: 10px;
 
+            float: right;
 
+            color: white;
 
+            font-size: 30px;
 
+            font-weight: bolder;
 
+            text-align: center;
 
+            line-height: 100px;
 
+        }
 
+
 
+        p {
 
+            /* clear 清除浮动元素 */
 
+            clear: both;
 
+        }
 
+
 
+        /* span {
 
+            clear: both;
 
+        } */
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div class="box">
 
+        <div class="div1">1</div>
 
+        <div class="div2">2</div>
 
+        <div class="div3">3</div>
 
+        <div class="div4">4</div>
 
+        <p></p>
 
+        <!-- <span>hello</span> -->
 
+    </div>
 
+</body>
 
+
 
+</html>

+ 29 - 0
2-CSS/15_伪元素.html
View File 

@@ -0,0 +1,29 @@
 
+<!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>
 
+        /* 伪元素 ::after 向页面指定的标签后边添加内容 */
 
+        div::after{
 
+            content: "";
 
+            color: red;
 
+            font-size: 30px;
 
+            background-color: blue;
 
+            height: 100px;
 
+            width: 200px;
 
+            display: block;
 
+        }
 
+        /* 伪元素 ::before 向页面指定的标签前面添加内容 */
 
+        div::before{
 
+              content: "你好";  
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div>
 
+        <span>hello</span>
 
+    </div>
 
+</body>
 
+</html>

+ 61 - 0
2-CSS/练习6_图形练习.html
View File 

@@ -0,0 +1,61 @@
 
+<!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>
 
+        .box1{
 
+            width: 400px;
 
+            height: 400px;
 
+            background-color: red;
 
+            /* border-radius: 200px; */
 
+            /* border-radius: 200px; */
 
+            /* 百分比相较于 父元素宽高 */
 
+            border-radius: 50%; 
+        }
 
+        .box2{
 
+            width: 0px;
 
+            height: 0px;
 
+            /* background-color: blue; */
 
+            /* transparent 透明 */
 
+            border-top:50px solid transparent;
 
+            border-right:50px solid transparent;
 
+            border-bottom:50px solid yellow;
 
+            border-left:50px solid transparent;
 
+        }
 
+        .box3{
 
+            width: 200px;
 
+            height: 200px;
 
+            /* rgb(0,0,0) 三个值取值范围0-255 */
 
+            /* background-color: rgb(0,0,0); */
 
+            /* rgba(0,0,0,0) 三个值取值范围0-255  第四个值代表透明度 取值范围0-1 */
 
+            background-color: rgba(0,0,0,0.5);
 
+
 
+        }
 
+        .box4{
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: yellow;
 
+        }
 
+        .box5{
 
+            width: 0;
 
+            border:100px solid black
 
+        }
 
+        .box6{
 
+            width: 200px;
 
+            background-color: blue;
 
+            /* padding:100px 0; */
 
+            padding-top: 200px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+   <div class="box1"></div> 
+   <div class="box2"></div> 
+   <div class="box3"></div>
 
+   <div class="box4"></div>
 
+   <div class="box5"></div>
 
+   <div class="box6"></div>
 
+</body>
 
+</html>

+ 88 - 0
2-CSS/练习7_浮动.html
View File 

@@ -0,0 +1,88 @@
 
+<!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>
 
+        .box1 div{
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: blue;
 
+            color: white;
 
+            font-size: 30px;
 
+            font-weight: bolder;
 
+            margin:10px;
 
+            text-align: center;
 
+            /* line-height 值控制行元素的行高 行元素默认在他所在这一行中垂直居中 */
 
+            line-height: 100px;
 
+            float: left;
 
+        }
 
+        .box2 .div2{
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+            margin: 10px;
 
+            color: white;
 
+            font-size: 30px;
 
+            font-weight: bolder;
 
+            text-align: center;
 
+            line-height: 100px;
 
+            float: right;
 
+        }
 
+        .box3 .div3{
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: green;
 
+            margin: 10px;
 
+            color: white;
 
+            font-size: 30px;
 
+            font-weight: bolder;
 
+            text-align: center;
 
+            line-height: 100px;
 
+        }
 
+        .box1,.box2,.box3{
 
+            border: 3px solid black;
 
+            height: 150px;
 
+        }
 
+        .box3 .left{
 
+            float: left;
 
+            /* background-color: rgba(0,255,0,0.2); */
 
+            /* margin-top: 100px; */
 
+        }
 
+        .box3 .center{
 
+            color: black;
 
+            /* margin-left: 100px; */
 
+            margin:10px auto;
 
+        }
 
+
 
+        
+        .right{
 
+            float: right;
 
+        }
 
+
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 浮动元素会脱离文档流 释放之前占用的位置 会覆盖其他元素 -->
 
+    <div class="box1">
 
+        <div class="div1">
 
+            <span>1</span>
 
+        </div>
 
+        <div class="div1">2</div>
 
+        <div class="div1">3</div>
 
+    </div>
 
+
 
+    <div class="box2">
 
+        <div class="div2">1</div>
 
+        <div class="div2">2</div>
 
+        <div class="div2">3</div>
 
+    </div>
 
+    <div class="box3">
 
+        <div class="div3 left">左</div>
 
+        <!-- <div class="div3 center">中</div> -->
 
+        <div class="div3 right">右</div>
 
+        <div class="div3 center"> 中 </div>
 
+    </div>
 
+</body>
 
+</html>

+ 23 - 0
2-CSS/练习8-伪元素.html
View File 

@@ -0,0 +1,23 @@
 
+<!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:3px solid black
 
+        }
 
+        .box .div1{
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: blue;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="div1"></div>
 
+    </div>
 
+</body>
 
+</html>