Ana Sayfa Keşfet Yardım
Giriş Yap
lovecoding
/
W250511
10
0
Çatalla 0
Dosyalar Sorunlar 0 Değişiklik İstekleri 0 Wiki
Kaynağa Gözat

admin

fengchuanyu 2 hafta önce
ebeveyn
1ff9237e5e
işleme
d18c0b9ee9
3 değiştirilmiş dosya ile 136 ekleme ve 0 silme
Birleşik Görünüm Farklılık Durumunu Göster
  1. 24 0
      2-CSS/28_补充选择器.html
  2. 63 0
      2-CSS/29_补充选择器2.html
  3. 49 0
      2-CSS/练习14_正方形.html

+ 24 - 0
2-CSS/28_补充选择器.html
Dosyayı Görüntüle 

@@ -0,0 +1,24 @@
 
+<!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>
 
+        /* 属性选择器 */
 
+        /* [value="abc"]{
 
+            border-color: red;
 
+        } */
 
+        [value]{
 
+            border-color: red;
 
+        } 
+    </style>
 
+</head>
 
+<body>
 
+    <input type="text" value="abc">
 
+    <input type="text" value="123">
 
+    <input type="text">
 
+
 
+    <a href="https://www.runoob.com/css/css-attribute-selectors.html">属性选择器</a>
 
+</body>
 
+</html>

+ 63 - 0
2-CSS/29_补充选择器2.html
Dosyayı Görüntüle 

@@ -0,0 +1,63 @@
 
+<!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.div1{
 
+            color: red;
 
+        }
 
+
 
+        /* + 选中紧跟在后边的兄弟元素 */
 
+        /* .li1+li{
 
+            color: red;
 
+        } */
 
+         /* ~ 选中后边所有的兄弟 */
 
+        .li1~li{
 
+            color: red;
 
+        }
 
+        .box2{
 
+            width: 400px;
 
+            height: 400px;
 
+            border:1px solid black
 
+        }
 
+        .box3{
 
+            width: 300px;
 
+            height: 300px;
 
+            border:1px solid red;
 
+        }
 
+        .box4{
 
+            width: 200px;
 
+            height: 200px;
 
+            border:1px solid blue;
 
+        }
 
+
 
+        /* > 子代选择器 */
 
+        .box2 > div{
 
+            border:1px solid green;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box div1"> hello world </div>
 
+    <div class="box"> 你好世界</div>
 
+    <div class="div1">爱扣钉</div>
 
+
 
+    <ul>
 
+        <li>项目一</li>
 
+        <li class="li1">项目二</li>
 
+        <li>项目三</li>
 
+        <li>项目四</li>
 
+        <li>项目五</li>
 
+        <li>项目六</li>
 
+    </ul>
 
+
 
+    <div class="box2">
 
+        <div class="box3">
 
+            <div class="box4"></div>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>

+ 49 - 0
2-CSS/练习14_正方形.html
Dosyayı Görüntüle 

@@ -0,0 +1,49 @@
 
+<!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: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+            margin-bottom: 10px;
 
+        }
 
+        .box2{
 
+            width: 100px;
 
+            margin-bottom: 10px;
 
+        }
 
+        .box2::after{
 
+            content: "";
 
+            display: block;
 
+            /* padding 百分比 相较于 父元素宽度 */
 
+            padding-top: 100%;
 
+            background-color: red;
 
+        }
 
+
 
+        .box3{
 
+            width: 100px;
 
+            height: 100px;
 
+            position: relative;
 
+        }
 
+        .box3::after{
 
+            content: "";
 
+            display: block;
 
+            position: absolute;
 
+            top:0;
 
+            left: 0;
 
+            right: 0;
 
+            bottom: 0;
 
+            background-color: red;
 
+        }
 
+
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box1"></div>
 
+    <div class="box2"></div>
 
+    <div class="box3"></div>
 
+</body>
 
+</html>