Home Explore Help
Sign In
lovecoding
/
VIP30
9
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

new

zsydgithub 1 year ago
parent
e3d12d675f
commit
e1c3373cde
5 changed files with 235 additions and 0 deletions
Split View Show Diff Stats
  1. 23 0
      CSS3/1_index.html
  2. 36 0
      CSS3/2_文本样式.html
  3. 89 0
      CSS3/3_奥运五环.html
  4. 68 0
      HTML5/9_本地存储.html
  5. 19 0
      HTML5/9_本地存储2.html

+ 23 - 0
CSS3/1_index.html
View File 

@@ -0,0 +1,23 @@
 
+<!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>
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: red;
 
+      border-radius: 50%;
 
+      /* -webkit-border-radios: 50%  兼容chrome浏览器 */  
+      /* -moz-border-radios: 50% 兼容火狐浏览器 */
 
+      /* -o-border-radios: 50% 兼容欧朋浏览器 */
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+</body>
 
+</html>

+ 36 - 0
CSS3/2_文本样式.html
View File 

@@ -0,0 +1,36 @@
 
+<!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>
 
+    div{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: aqua;
 
+
 
+      /* 强制不换行 */
 
+      white-space: nowrap;
 
+      overflow: hidden;
 
+      /* 文本溢出 */
 
+      text-overflow: ellipsis;
 
+
 
+
 
+      /* 文本阴影 左右 上下 清晰度 */
 
+      /* text-shadow: 5px 5px 5px red; */
 
+
 
+
 
+      border-radius: 5px;
 
+      /* 盒子阴影  左右 上下  清晰度 */
 
+      box-shadow: 5px 10px 20px  rgba(0, 0, 0, 0.5);
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div>
 
+    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
 
+  </div>
 
+</body>
 
+</html>

+ 89 - 0
CSS3/3_奥运五环.html
View File 

@@ -0,0 +1,89 @@
 
+<!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;
 
+    }
 
+    div{
 
+      width: 200px;
 
+      height: 200px;
 
+      /* border: 10px solid black; */
 
+      border-width: 10px;
 
+      border-style: solid;
 
+      border-radius: 50%;
 
+      position: absolute;
 
+    }
 
+    #blue{
 
+      border-color: blue;
 
+      left: 0;
 
+      top: 0;
 
+    }
 
+    div::after{
 
+      content: "";
 
+      position: absolute;
 
+      width: 200px;
 
+      height: 200px;
 
+      border-width: 10px;
 
+      border-style: solid;
 
+      border-radius: 50%;
 
+      left: -10px;
 
+      top: -10px;
 
+    }
 
+    #blue::after{
 
+      border-color: blue;
 
+      z-index: 1;
 
+      border-bottom-color: transparent;
 
+    }
 
+    #black{
 
+      border-color: black;
 
+      left: 220px;
 
+    }
 
+    #black::after{
 
+      border-color: black;
 
+      z-index: 1;
 
+      border-left-color: transparent;
 
+    }
 
+    #red{
 
+      border-color: red;
 
+      left: 440px;
 
+    }
 
+    #red::after{
 
+      border-color: red;
 
+      z-index: 1;
 
+      border-left-color: transparent;
 
+    }
 
+    #orange{
 
+      border-color: orange;
 
+      left: 110px;
 
+      top: 110px;
 
+    }
 
+    #orange::after{
 
+      border-color: orange;
 
+    }
 
+    #green{
 
+      border-color: green;
 
+      left: 330px;
 
+      top: 110px;
 
+    }
 
+    #green::after{
 
+      border-color: green;
 
+      z-index: 1;
 
+      border-top-color: transparent;
 
+      border-right-color: transparent;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="blue"></div>
 
+  <div id="black"></div>
 
+  <div id="red"></div>
 
+  <div id="orange"></div>
 
+  <div id="green"></div>
 
+</body>
 
+</html>

+ 68 - 0
HTML5/9_本地存储.html
View File 

@@ -0,0 +1,68 @@
 
+<!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>
 
+</head>
 
+
 
+<body>
 
+  <script>
 
+    /* cookie 浏览器 4k 可以设置过期时间 */
 
+    document.cookie = "name = 'xiaoming'"
 
+
 
+    var date = new Date()
 
+    date.setDate(date.getDate() + 1)
 
+    console.log(date.toUTCString())
 
+
 
+    document.cookie = "password = '123';expires= " + date.toUTCString()
 
+
 
+
 
+    function setCookie(key, value, expires) {
 
+      var date = new Date()
 
+      date.setDate(date.getDate() + expires)
 
+
 
+      document.cookie = key + '=' + value + ';expires=' + date.toUTCString()
 
+    }
 
+    setCookie('address', 'harbin', 4)
 
+
 
+
 
+
 
+    function getCookie(key) {
 
+      var cookie = document.cookie
 
+      console.log(cookie.split(';'))
 
+
 
+      /* 
+      .split 方法 去拆分字符串
 
+      */
 
+      var arr = cookie.split(';')
 
+      console.log(arr)
 
+
 
+      for (var i = 0; i < arr.length; i++) {
 
+        var tmp = arr[i].split('=')
 
+        console.log(tmp)
 
+
 
+        /* trim() */
 
+        if (tmp[0].trim() == key) {
 
+          return tmp[1]
 
+        }
 
+      }
 
+    }
 
+    getCookie()
 
+
 
+    console.log(getCookie('address'))
 
+
 
+
 
+
 
+    function delCookie(key) {
 
+      var date = new Date()
 
+      date.setDate(date.getDate() - 1)
 
+      document.cookie = key + '=null;expires=' + date.toUTCString()
 
+    }
 
+    delCookie('password')
 
+  </script>
 
+</body>
 
+
 
+</html>

+ 19 - 0
HTML5/9_本地存储2.html
View File 

@@ -0,0 +1,19 @@
 
+<!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>
 
+</head>
 
+<body>
 
+  <script>
 
+    // localStorage.login = true
 
+    /* localStorage  大小为5M  除非手动删除 */
 
+
 
+
 
+    // sessionStorage.age = 18
 
+    /*sessionStorage 大小为5M  窗口关闭失效  */
 
+  </script>
 
+</body>
 
+</html>