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

admin

fengchuanyu 2 долоо хоног өмнө
parent
4152dabeda
commit
58e7975b0b
9 өөрчлөгдсөн 296 нэмэгдсэн , 0 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. BIN
      2-CSS/.DS_Store
  2. 1 0
      2-CSS/18_定位.html
  3. 26 0
      2-CSS/19_透明度.html
  4. 61 0
      2-CSS/复习/伪元素练习.html
  5. 66 0
      2-CSS/复习/定位.html
  6. 51 0
      2-CSS/复习/定位2.html
  7. 36 0
      2-CSS/复习/定位3.html
  8. 54 0
      2-CSS/练习12_定位练习.html
  9. 1 0
      2-CSS/练习9_浮动2.html

BIN
2-CSS/.DS_Store
Файл харах


+ 1 - 0
2-CSS/18_定位.html
Файл харах 

@@ -45,6 +45,7 @@
 
             top: 200px;
 
             top: 200px;
 
             left: 200px;
 
             left: 200px;
 
             z-index: 2; /* 设置层级  数字越大越在上面 */
 
             z-index: 2; /* 设置层级  数字越大越在上面 */
 
+            opacity: 0.5;
 
         }
 
         }
 
     </style>
 
     </style>
 
 </head>
 
 </head>

+ 26 - 0
2-CSS/19_透明度.html
Файл харах 

@@ -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>
 
+        .box{
 
+            width: 100px;
 
+            height: 100px;
 
+            /* rgb 3位 0-255 第四个值 0-1 透明度 0完全透明 1不透明*/
 
+            /* rgba 透明度仅作用于颜色 */
 
+            background-color: rgb(5, 5, 105,0.5);
 
+            /* background-color: blue; */
 
+            /* 设置透明度 0-1 0完全透明 1不透明*/
 
+            /* 用作于整个标签 */
 
+            /* opacity: 0.5; */
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        hello world
 
+    </div>
 
+</body>
 
+</html>

+ 61 - 0
2-CSS/复习/伪元素练习.html
Файл харах 

@@ -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>
 
+        .container h1{
 
+            text-align: center;
 
+            border-bottom: 1px solid blue;
 
+            padding-bottom: 20px;
 
+        }
 
+        .container .content{
 
+            width: 400px;
 
+            margin:0 auto;
 
+        }
 
+        .content ul li{
 
+            list-style: none;
 
+            width: 350px;
 
+            background-color: #999;
 
+            margin-bottom: 20px;
 
+            height: 80px;
 
+            color: #fff;
 
+            font-size: 23px;
 
+            line-height: 80px;
 
+            padding-left: 20px;
 
+            border-radius: 10px;
 
+        }
 
+        .content ul li:nth-child(2n){
 
+            background-color: #555;
 
+        }
 
+
 
+        .content ul li:first-child{
 
+            background-color: #307df7;
 
+        }
 
+
 
+        .content ul li:hover{
 
+            background-color: #307df7;
 
+            cursor: pointer;
 
+        }
 
+        .content ul li:last-child:hover::after{
 
+            content: "这是最后一个列表项";
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <h1>我的简单网页</h1>
 
+        <div class="content">
 
+            <p>以下是一些列表项：</p>
 
+            <ul>
 
+                <li>列表项 1</li>
 
+                <li>列表项 2</li>
 
+                <li>列表项 3</li>
 
+                <li>列表项 4</li>
 
+                <li>列表项 5</li>
 
+            </ul>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>

+ 66 - 0
2-CSS/复习/定位.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>
 
+        .box{
 
+            width: 400px;
 
+            height: 400px;
 
+            border: 5px solid black;
 
+            position: relative; /* 设置为相对定位 */
 
+        }
 
+        .div1{
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+            /* margin-top: -20px;  向上移动20px  负数向相反方向移动*/ 
+            /* 相对定位 相对于原来的位置 */
 
+            /*position: relative;  设置为相对定位 */
 
+            /* top: 300px;
 
+            left:300px; */
 
+            
+            /* 相对于最近的已定位祖先元素 */
 
+            /* absolute 定位 需要满足两个条件 */
 
+            /* 第一个必须是他的祖先元素 */
 
+            /* 第二个必须使用定位 */
 
+            position: absolute; /* 设置为绝对定位 */
 
+            right: 20px;
 
+            bottom: 0;
 
+        }
 
+        
+        .div2{
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: blue;
 
+            /* 相对于浏览器窗口 */
 
+            position: fixed; /* 设置为固定定位 */
 
+            right: 50px;
 
+            bottom: 50px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="div1"></div>
 
+    </div>
 
+     <div class="box">
 
+        <div class="div1"></div>
 
+    </div>
 
+     <div class="box">
 
+        <div class="div1"></div>
 
+    </div>
 
+     <div class="box">
 
+        <div class="div1"></div>
 
+    </div>
 
+     <div class="box">
 
+        <div class="div1"></div>
 
+    </div>
 
+     <div class="box">
 
+        <div class="div1"></div>
 
+    </div>
 
+
 
+    <div class="div2"></div>
 
+</body>
 
+</html>

+ 51 - 0
2-CSS/复习/定位2.html
Файл харах 

@@ -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: 400px;
 
+            height: 400px;
 
+            border: 5px solid black;
 
+            position: relative;
 
+            /* 设置为相对定位 */
 
+        }
 
+
 
+        .div1 {
 
+            position: absolute;
 
+            left: 0;
 
+            top:0;
 
+            background-color: red;
 
+            z-index: 1; /* 设置层级  数字越大越在上面 */
 
+
 
+        }
 
+
 
+        .div2 {
 
+            position: absolute;
 
+            right: 100px;
 
+            top: 0;
 
+            background-color: blue;
 
+            z-index: 2; /* 设置层级  数字越大越在上面 */
 
+        }
 
+
 
+        /* 分组选择器 用"，"间隔*/
 
+        .div1,.div2 {
 
+            width: 200px;
 
+            height: 200px;
 
+            /* float: left; */
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <!-- 文档流 -->
 
+    <div class="box">
 
+        <div class="div1"></div>
 
+        <div class="div2"></div>
 
+    </div>
 
+</body>
 
+
 
+</html>

+ 36 - 0
2-CSS/复习/定位3.html
Файл харах 

@@ -0,0 +1,36 @@
 
+<!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: 400px;
 
+            height: 400px;
 
+            border: 5px solid black;
 
+            position: relative; /* 设置为相对定位 */
 
+        }
 
+        .div1{
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: blue;
 
+            /* margin: 0 auto;  水平居中 
+            margin-top: 100px; */
 
+
 
+            position: absolute;
 
+            left: 50%;
 
+            top: 50%;
 
+
 
+            margin-top: -100px;
 
+            margin-left: -100px;
 
+
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="div1"></div>
 
+    </div>
 
+</body>
 
+</html>

+ 54 - 0
2-CSS/练习12_定位练习.html
Файл харах 

@@ -0,0 +1,54 @@
 
+<!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>
 
+        body{
 
+            background-color: #f0f4c3;
 
+        }
 
+
 
+        .content{
 
+            width: 600px;
 
+            height: 600px;
 
+            background-color: #fff;
 
+            position: absolute;
 
+            top: 50%;
 
+            left: 50%;
 
+            margin-top: -300px;
 
+            margin-left: -300px;
 
+            border-radius: 20px;
 
+            box-shadow: 0 0 10px rgba(0,0,0,0.5);
 
+            padding-top: 20px;
 
+        }
 
+        .content-info h1{
 
+            text-align: center;
 
+            color: #689f38;
 
+        }
 
+        .content-info .info-center{
 
+            width: 300px;
 
+            margin: 0 auto;
 
+            text-align: center;
 
+        }
 
+        .content-info .info-bottom{
 
+            text-align: center;
 
+            color: #999;
 
+            font-size: 12px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <div class="content">
 
+            <div class="content-info">
 
+                <h1>趣味气泡 Position 练习</h1>
 
+                <p class="info-center"><strong>任务：</strong> 观察并理解气泡的定位方式，鼠标悬停气泡试试看！</p>
 
+                <p class="info-bottom">（气泡用 absolute，气泡区用 relative，底部说明条用 fixed）</p>
 
+            </div>
 
+            <div class="content-bubble"></div>
 
+        </div>
 
+        <div class="footer"></div>
 
+    </div>
 
+</body>
 
+</html>

+ 1 - 0
2-CSS/练习9_浮动2.html
Файл харах 

@@ -106,6 +106,7 @@
 
                     <h2>文字环绕图片</h2>
 
                     <h2>文字环绕图片</h2>
 
                     <img src="./image/img1.jpg" alt="">
 
                     <img src="./image/img1.jpg" alt="">
 
                     <span> 这是一个使用浮动实现文字环绕图片的示例。通过将图片向左浮动，文本会自然地环绕在图片的右侧。浮动元素会脱离正常文档流，但文本内容会感知到浮动元素的存在并进行环绕。
 
                     <span> 这是一个使用浮动实现文字环绕图片的示例。通过将图片向左浮动，文本会自然地环绕在图片的右侧。浮动元素会脱离正常文档流，但文本内容会感知到浮动元素的存在并进行环绕。
 
+浮动元素会尽可能地向左或向右移动，直到碰到容器边缘或另一个浮动元素。在这个例子中，图片被设置为向左浮动，所以文本会出现在图片的右侧。这是一个使用浮动实现文字环绕图片的示例。通过将图片向左浮动，文本会自然地环绕在图片的右侧。浮动元素会脱离正常文档流，但文本内容会感知到浮动元素的存在并进行环绕。
 
 浮动元素会尽可能地向左或向右移动，直到碰到容器边缘或另一个浮动元素。在这个例子中，图片被设置为向左浮动，所以文本会出现在图片的右侧。</span>
 
 浮动元素会尽可能地向左或向右移动，直到碰到容器边缘或另一个浮动元素。在这个例子中，图片被设置为向左浮动，所以文本会出现在图片的右侧。</span>
 
                 </div>
 
                 </div>
 
                 <div class="right-bottom">
 
                 <div class="right-bottom">