Página Principal Explorar Ajuda
Iniciar Sessão
lovecoding
/
VIP24
6
0
Fork 0
Ficheiros Problemas 0 Pull Requests 0 Wiki
Ver Fonte

new

zsydgithub há 1 ano atrás
pai
a8075fb5e6
commit
f7a876c321
7 ficheiros alterados com 353 adições e 0 exclusões
Visão Dividida Mostrar Estatísticas Diff
  1. 83 0
      12_sass/list.css
  2. 1 0
      12_sass/list.min.css
  3. 99 0
      12_sass/list.scss
  4. BIN
      test/1.jpg
  5. BIN
      test/2.jpg
  6. 65 0
      test/home.html
  7. 105 0
      test/page2.html

+ 83 - 0
12_sass/list.css
Ver Ficheiro 

@@ -0,0 +1,83 @@
 
+@charset "UTF-8";
 
+/* 
+sass使用 $ 符号来标识变量
 
+*/
 
+/*! sass有作用域 */
 
+/* 
+  多行注释 会在css文件里生成 但是不会再min.css文件里生成
 
+  单行注释 不会在css文件里生成
 
+  强制注释 会在css和min.css文件里生成
 
+*/
 
+/* 
+  插值语句 
+  变量 属性名如果是变量可以使用这种
 
+  一般 不建议这么操作
 
+*/
 
+div {
 
+  width: 100px;
 
+  height: 100px;
 
+  background: #ff0000;
 
+  color: #ff0000;
 
+}
 
+
 
+div2 {
 
+  width: 200px;
 
+  height: 200px;
 
+  background: #ff0000;
 
+}
 
+
 
+#list {
 
+  width: 100px;
 
+  height: 100px;
 
+}
 
+
 
+#list li {
 
+  font-size: 12px;
 
+}
 
+
 
+#list li p {
 
+  padding-top: 20px;
 
+  padding-left: 40px;
 
+}
 
+
 
+#list-inner {
 
+  color: #ff0000;
 
+}
 
+
 
+.link {
 
+  color: #ff0000;
 
+}
 
+
 
+.link:hover {
 
+  color: #ccc;
 
+}
 
+
 
+.login-btn {
 
+  width: 100px;
 
+  height: 40px;
 
+  line-height: 40px;
 
+  text-align: center;
 
+  border-radius: 5px;
 
+  color: #000000;
 
+  background: #ff0000;
 
+}
 
+
 
+.submit-btn {
 
+  width: 50px;
 
+  height: 30px;
 
+  line-height: 100px;
 
+  text-align: center;
 
+  border-radius: 5px;
 
+  color: #000000;
 
+  background: #ff0000;
 
+}
 
+
 
+.del-btn {
 
+  width: 200px;
 
+  height: 100px;
 
+  line-height: 100px;
 
+  text-align: center;
 
+  border-radius: 5px;
 
+  color: #000000;
 
+  background: #ff0000;
 
+}

+ 1 - 0
12_sass/list.min.css
Ver Ficheiro 

@@ -0,0 +1 @@
 
+/*! sass有作用域 */div{width:100px;height:100px;background:red;color:red}div2{width:200px;height:200px;background:red}#list{width:100px;height:100px}#list li{font-size:12px}#list li p{padding-top:20px;padding-left:40px}#list-inner{color:red}.link{color:red}.link:hover{color:#ccc}.login-btn{width:100px;height:40px;line-height:40px;text-align:center;border-radius:5px;color:#000;background:red}.submit-btn{width:50px;height:30px;line-height:100px;text-align:center;border-radius:5px;color:#000;background:red}.del-btn{width:200px;height:100px;line-height:100px;text-align:center;border-radius:5px;color:#000;background:red}

+ 99 - 0
12_sass/list.scss
Ver Ficheiro 

@@ -0,0 +1,99 @@
 
+$bgcolor: #ff0000;
 
+$keyName: 'color';
 
+$whiteColor: #000000;
 
+/* 
+sass使用 $ 符号来标识变量
 
+*/
 
+//sass变量可以存储以下信息：字符串、数字
 
+//、颜色值、布尔值、列表null值
 
+/*! sass有作用域 */
 
+/* 
+  多行注释 会在css文件里生成 但是不会再min.css文件里生成
 
+  单行注释 不会在css文件里生成
 
+  强制注释 会在css和min.css文件里生成
 
+*/
 
+/* 
+  插值语句 
+  #{变量} 属性名如果是变量可以使用这种
 
+  一般 不建议这么操作
 
+*/
 
+div{
 
+  width: 100px;
 
+  height: 100px;
 
+  background: $bgcolor;
 
+  #{$keyName}: $bgcolor;
 
+}
 
+div2{
 
+  width: 200px;
 
+  height: 200px;
 
+  background: $bgcolor;
 
+}
 
+
 
+//选择器的嵌套
 
+
 
+#list{
 
+  width: 100px;
 
+  height: 100px;
 
+  li{
 
+    font-size: 12px;
 
+    p{
 
+      // padding-top: 20px;
 
+      // padding-left: 30px;
 
+      //属性嵌套 : 和 { 中间一定要有一个空格
 
+      padding: {
 
+        top: 20px; 
+        left: 40px
 
+      }
 
+    }
 
+  }
 
+  //& 引用父选择器
 
+  &-inner{
 
+    color: $bgcolor;
 
+  }
 
+}
 
+.link{
 
+  color: $bgcolor;
 
+  &:hover{
 
+    color: #ccc;
 
+  }
 
+}
 
+
 
+// .login-btn{
 
+//   width: 100px;
 
+//   height: 40px;
 
+//   line-height: 40px;
 
+//   text-align: center;
 
+//   border-radius: 5px;
 
+//   color: $whiteColor;
 
+//   background: $bgcolor;
 
+// }
 
+// .submit-btn{
 
+//   width: 50px;
 
+//   height: 20px;
 
+//   line-height: 20px;
 
+//   text-align: center;
 
+//   border-radius: 5px;
 
+//   color: $whiteColor;
 
+//   background: $bgcolor;
 
+// }
 
+//定义的一个混合宏
 
+//定义的时候可以带有参数  参数 也可以设置默认值
 
+@mixin logo-btn($width: 200px,$height: 100px,$lheight: 100px){
 
+  width: $width;
 
+  height: $height;
 
+  line-height: $lheight;
 
+  text-align: center;
 
+  border-radius: 5px;
 
+  color: $whiteColor;
 
+  background: $bgcolor;
 
+}
 
+//通过@include 去调用设置的混合宏
 
+.login-btn{
 
+  @include logo-btn(100px,40px,40px)
 
+}
 
+.submit-btn{
 
+  @include logo-btn(50px,30px)
 
+}
 
+.del-btn{
 
+  @include logo-btn()
 
+}

BIN
test/1.jpg
Ver Ficheiro


BIN
test/2.jpg
Ver Ficheiro


+ 65 - 0
test/home.html
Ver Ficheiro 

@@ -0,0 +1,65 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    @keyframes rotate {
 
+      0% {
 
+        transform: rotate(0deg);
 
+      }
 
+
 
+      100% {
 
+        transform: rotate(360deg);
 
+      }
 
+    }
 
+
 
+    .inner {
 
+      transform-origin: center center;
 
+      width: 15rem;
 
+      height: 15rem;
 
+    }
 
+
 
+    .inner img {
 
+      width: 15rem;
 
+    }
 
+
 
+    #small-img {
 
+      width: 16rem;
 
+      position: absolute;
 
+      top: 0;
 
+      left: 0;
 
+      background: rgba(0, 0, 0, transparent);
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <div class="container">
 
+    <div class="inner">
 
+      <img src="1.jpg" alt="" id="big-img">
 
+      <!-- <img src="2.jpg" alt="" id="small-img"> -->
 
+    </div>
 
+  </div>
 
+  <!-- <button id="start">开始</button>
 
+  <button id="stop">停止</button> -->
 
+  <script>
 
+    window.onload = function () {
 
+      setTimeout(() => {
 
+        var inner = document.querySelector(".inner");
 
+        inner.style.animation = "rotate 5s linear infinite";
 
+        setTimeout(function () {
 
+          inner.style.animation = "";
 
+        }, 5000);
 
+        setTimeout(()=>{
 
+          window.location.href= "page2.html"
 
+        },3000)
 
+      }, 2000)
 
+    }
 
+  </script>
 
+</body>
 
+
 
+</html>

+ 105 - 0
test/page2.html
Ver Ficheiro 

@@ -0,0 +1,105 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+      box-sizing: border-box;
 
+    }
 
+    .container{
 
+      padding: 1rem;
 
+      width: 100%;
 
+    }
 
+    label {
 
+      font-size: 1rem;
 
+      color: #666666;
 
+      display: block;
 
+    }
 
+    input {
 
+      display: block;
 
+      width: 80vw;
 
+      height: 2.3rem;
 
+      border: 1px solid #E5E5E5;
 
+      border-radius: 4px;
 
+      font-size: 0.8rem;
 
+      padding:0.5rem;
 
+      line-height: 2.3rem;
 
+      color: #cccccc;
 
+      margin: .3rem 0;
 
+    }
 
+    .btn {
 
+      width: 80vw;
 
+      height: 2.3rem;
 
+      background: #FF0000;
 
+      color: #ffffff;
 
+      text-align: center;
 
+      line-height: .3rem;
 
+      font-size: 1rem;
 
+    }
 
+    .telCode {
 
+      display: inline-block;
 
+      width: 40vw;
 
+    }
 
+    .code {
 
+      width: 40vw;
 
+      height: 2.3rem;
 
+      background: #f00;
 
+      color: #fff;
 
+      display: inline-block;
 
+      border: none;
 
+      text-align: center;
 
+      line-height: .3rem;
 
+      border-radius: 4px;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <form action="" class="container">
 
+    <div>
 
+      <label>收货人姓名</label>
 
+      <input type="text" placeholder="收货人姓名">
 
+    </div>
 
+    <div>
 
+      <label>手机号码</label>
 
+      <input type="tel" placeholder="请输入您的手机号码" maxlength="11">
 
+    </div>
 
+    <div>
 
+      <label>手机验证码</label>
 
+      <input type="text" placeholder="手机验证码" class="telCode">
 
+      <button class="code">获取验证码</button>
 
+    </div>
 
+    <div>
 
+      <label>选择地区</label>
 
+      <input type="text" list="list1" placeholder="请选择省份">
 
+      <datalist id="list1" place>
 
+        <option value="黑龙江"></option>
 
+        <option value="黑龙江"></option>
 
+        <option value="黑龙江"></option>
 
+      </datalist>
 
+    </div>
 
+    <div>
 
+      <input type="text" list="list2" placeholder="请选择城市">
 
+      <datalist id="list2" place>
 
+        <option value="哈尔滨"></option>
 
+        <option value="哈尔滨"></option>
 
+        <option value="哈尔滨"></option>
 
+      </datalist>
 
+    </div>
 
+    <div>
 
+      <label>详细地址</label>
 
+      <input type="text" placeholder="例如XX街道XX号">
 
+    </div>
 
+    <input type="button" class="btn" value="提交订单">
 
+
 
+
 
+  </form>
 
+</body>
 
+
 
+</html>