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

admin

fengchuanyu 3 tuần trước cách đây
mục cha
c851d8f8b2
commit
19b28f2a02
5 tập tin đã thay đổi với 76 bổ sung và 1 xóa
View chưa được định nghĩa Hiển thị tình trạng sai khác
  1. BIN
      2_CSS/.DS_Store
  2. 1 0
      2_CSS/17_阴影.html
  3. 2 0
      2_CSS/18_透明度.html
  4. 4 1
      2_CSS/27_浮动.html
  5. 69 0
      2_CSS/练习8_伪类练习.html

BIN
2_CSS/.DS_Store
Xem Tập Tin


+ 1 - 0
2_CSS/17_阴影.html
Xem Tập Tin 

@@ -11,6 +11,7 @@
 
             margin:100px auto;
 
             margin:100px auto;
 
             background-color: red;
 
             background-color: red;
 
             /* 阴影效果 */
 
             /* 阴影效果 */
 
+            /* 阴影的水平偏移量 垂直偏移量 模糊半径 阴影颜色  */
 
             box-shadow: 10px 10px 10px rgb(0, 0, 0);
 
             box-shadow: 10px 10px 10px rgb(0, 0, 0);
 
         }
 
         }
 
     </style>
 
     </style>

+ 2 - 0
2_CSS/18_透明度.html
Xem Tập Tin 

@@ -13,6 +13,8 @@
 
             /* 用颜色控制透明度 */
 
             /* 用颜色控制透明度 */
 
             /* rgba(红,绿,蓝,透明度) 透明度 0-1 0 完全透明 1 完全不透明 */
 
             /* rgba(红,绿,蓝,透明度) 透明度 0-1 0 完全透明 1 完全不透明 */
 
             /* background-color: rgba(255, 0, 0,0.2); */
 
             /* background-color: rgba(255, 0, 0,0.2); */
 
+
 
+            /* 控制整个元素的透明度 */
 
             /* opacity 透明度 0-1 0 完全透明 1 完全不透明 */
 
             /* opacity 透明度 0-1 0 完全透明 1 完全不透明 */
 
             opacity: 0.2;
 
             opacity: 0.2;
 
         }
 
         }

+ 4 - 1
2_CSS/27_浮动.html
Xem Tập Tin 

@@ -16,11 +16,14 @@
 
             /* display: inline-block; */
 
             /* display: inline-block; */
 
             /* float 表示浮动 可以将块元素横向排列 两个值：left向左 right向右 none不浮动 */
 
             /* float 表示浮动 可以将块元素横向排列 两个值：left向左 right向右 none不浮动 */
 
             float: right;
 
             float: right;
 
-            
+
 
         }
 
         }
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
+    <!-- 浮动元素会脱离文档流 -->
 
+     <!-- 文档流：正常的文档排列顺序 -->
 
+      <!-- 脱离文档流会导致父元素高度塌陷 -->
 
     <div class="box">1</div>
 
     <div class="box">1</div>
 
     <div class="box">2</div>
 
     <div class="box">2</div>
 
     <div class="box">3</div>
 
     <div class="box">3</div>

+ 69 - 0
2_CSS/练习8_伪类练习.html
Xem Tập Tin 

@@ -0,0 +1,69 @@
 
+<!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>
 
+        .header{
 
+            text-align: center;
 
+        }
 
+        .header::after{
 
+            content: "";
 
+            display: block;
 
+            height: 2px;
 
+            background-color: blue;
 
+        }
 
+        .content{
 
+            width: 400px;
 
+            margin: 0 auto;
 
+        }
 
+        ul{
 
+            list-style:none;
 
+        }
 
+        li{
 
+            background-color: #999;
 
+            margin-bottom: 10px;
 
+            /* height: 50px;
 
+            line-height: 50px; */
 
+            padding:20px;
 
+            border-radius: 10px;
 
+            color: white;
 
+
 
+        }
 
+        
+        li:nth-child(odd){
 
+            background-color: #333;
 
+        }
 
+        li:first-child{
 
+            background-color: blue;
 
+        }
 
+        li:hover{
 
+            background-color: blue;
 
+        }
 
+        li:last-child:hover::after{
 
+            content: "这是最后一个列表项";
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div class="header">
 
+        <h1>我的简单网页</h1>
 
+    </div>
 
+    <div class="content">
 
+        <p>以下是一些列表项：</p>
 
+        <ul>
 
+            <li>列表项1</li>
 
+            <li>列表项2</li>
 
+            <li>列表项3</li>
 
+            <li>列表项4</li>
 
+            <li>列表项5</li>
 
+            <li>列表项6</li>
 
+            <li>列表项7</li>
 
+        </ul>
 
+    </div>
 
+</body>
 
+
 
+</html>