Startsida Utforska Hjälp
Logga in
lovecoding
/
Vip4.0W
10
0
Fork 0
Filer Ärenden 0 Pull-förfrågningar 0 Wiki
Bläddra i källkod

正则

zheng 16 timmar sedan
förälder
d542ef58c0
incheckning
9df15ba88e
7 ändrade filer med 100 tillägg och 6 borttagningar
Delad Vy Visa Diff Statistik
  1. 20 1
      14.scss/index.css
  2. 2 0
      14.scss/index.html
  3. 1 1
      14.scss/index.min.css
  4. 70 4
      14.scss/index.scss
  5. 3 0
      14.scss/reset.css
  6. 1 0
      14.scss/reset.min.css
  7. 3 0
      14.scss/reset.scss

+ 20 - 1
14.scss/index.css
Visa fil 

@@ -1,5 +1,9 @@
 
 @charset "UTF-8";
 
 /* 哈哈哈哈 */
 
+h1 {
 
+  color: red;
 
+}
 
+
 
 h2 {
 
   width: 400px;
 
   height: 300px;
 
@@ -9,5 +13,20 @@ h2 {
 
 }
 
 
 ul li {
 
-  color: purple !important;
 
+  color: red;
 
+  font-size: 40px;
 
+  font-weight: bold;
 
+}
 
+
 
+ul li:first-child {
 
+  color: #0f0;
 
+}
 
+
 
+.one {
 
+  width: 400px;
 
+  height: 400px;
 
+  color: #f00;
 
+  background: #ff0;
 
+  border-radius: 20px;
 
+  box-shadow: 55px 40px 30px blue;
 
 }

+ 2 - 0
14.scss/index.html
Visa fil 

@@ -8,12 +8,14 @@
 
 </head>
 
 <body>
 
     <div>
 
+        <h1>哈哈哈哈哈</h1>
 
         <h2>你好</h2>
 
         <ul>
 
             <li>哈哈哈</li>
 
             <li>哈哈哈</li>
 
             <li>哈哈哈</li>
 
         </ul>
 
+        <div class="one">你好呀</div>
 
     </div>
 
 </body>
 
 </html>

+ 1 - 1
14.scss/index.min.css
Visa fil 

@@ -1 +1 @@
 
-h2{width:400px;height:300px;color:purple !important;color:blue;border:2px solid red}ul li{color:purple !important}
 
+h1{color:red}h2{width:400px;height:300px;color:purple !important;color:blue;border:2px solid red}ul li{color:red;font-size:40px;font-weight:bold}ul li:first-child{color:#0f0}.one{width:400px;height:400px;color:#f00;background:#ff0;border-radius:20px;box-shadow:55px 40px 30px blue}

+ 70 - 4
14.scss/index.scss
Visa fil 

@@ -1,10 +1,13 @@
 
 $aa: blue;
 
-$bb:2px solid #f00;
 
+$bb: 2px solid #f00;
 
 $cc: 400 !default;
 
 // $dd: purple !global;
 
 $dd: purple !important;
 
 // 这是h2标签的样式
 
 /* 哈哈哈哈 */
 
+// @import url(reset.css);
 
+@import './reset.scss';
 
+
 
 h2 {
 
     width: $cc + px;
 
     height: 300px;
 
@@ -13,6 +16,69 @@ h2 {
 
     border: $bb;
 
 }
 
 
-ul li {
 
-    color: $dd;
 
-}
 
+ul {
 
+    li {
 
+        color: red;
 
+        &:first-child {
 
+            color: #0f0;
 
+        }
 
+        font: {
 
+            size: 40px;
 
+            weight: bold;
 
+        };
 
+    }
 
+}
 
+
 
+// 不带参的混合宏
 
+// @mixin x {
 
+//     color: #f00;
 
+//     background: #ff0;
 
+//     border-radius: 20px;
 
+// }
 
+
 
+// .one {
 
+//     width: $cc + px;
 
+//     height: $cc + px;
 
+//     @include x;
 
+// }
 
+
 
+// 带参混合宏
 
+// (带参 不带值)
 
+// @mixin x($cccc) {
 
+//     color: #f00;
 
+//     background: #ff0;
 
+//     border-radius: $cccc + px;
 
+// }
 
+
 
+// .one {
 
+//     width: $cc + px;
 
+//     height: $cc + px;
 
+//     @include x(50);
 
+// }
 
+
 
+// // (带参 带值)
 
+// @mixin x($cccc:50%) {
 
+//     color: #f00;
 
+//     background: #ff0;
 
+//     border-radius: $cccc;
 
+// }
 
+
 
+// .one {
 
+//     width: $cc + px;
 
+//     height: $cc + px;
 
+//     @include x;
 
+// }
 
+
 
+// 带参 多值
 
+@mixin x($c...) {
 
+    color: #f00;
 
+    background: #ff0;
 
+    border-radius: 20px;
 
+    box-shadow: $c;
 
+}
 
+
 
+.one {
 
+    width: $cc + px;
 
+    height: $cc + px;
 
+    @include x(55px 40px 30px blue);
 
+}

+ 3 - 0
14.scss/reset.css
Visa fil 

@@ -0,0 +1,3 @@
 
+h1 {
 
+  color: red;
 
+}

+ 1 - 0
14.scss/reset.min.css
Visa fil 

@@ -0,0 +1 @@
 
+h1{color:red}

+ 3 - 0
14.scss/reset.scss
Visa fil 

@@ -0,0 +1,3 @@
 
+h1 {
 
+    color: red;
 
+}