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

new

zsydgithub 1 year ago
parent
3e3403e421
commit
32194bc8ea
6 changed files with 364 additions and 0 deletions
Split View Show Diff Stats
  1. 77 0
      Dom/21_下落的树叶/index.html
  2. 23 0
      css3/1_index.html
  3. 33 0
      css3/2_文本样式.html
  4. 85 0
      css3/3_奥运五环.html
  5. 83 0
      css3/4_弹性盒模型.html
  6. 63 0
      css3/5_弹性盒模型的效果.html

+ 77 - 0
Dom/21_下落的树叶/index.html
View File 

@@ -0,0 +1,77 @@
 
+<!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>
 
+    img {
 
+      position: absolute;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <script>
 
+    //获取屏幕的宽高
 
+    var screenWidth = document.body.clientWidth || document.documentElement.clientWidth
 
+    var screenHeight = document.body.clientHeight || document.documentElement.clientHeight
 
+
 
+    //构造函数  写属性
 
+    function leaf() {
 
+      //图片宽度
 
+      this.width = Math.random() * 100 + 100
 
+      //图片位置
 
+      this.xLeft = Math.random() * (screenWidth - this.width)
 
+      //距离顶部
 
+      this.xTop = 0
 
+      //图片的路径
 
+      //img/1.png
 
+      this.bg = 'img/' + Math.floor(Math.random() * 4 + 1) + '.png'
 
+    }
 
+    //原型对象下面  写方法
 
+    leaf.prototype.init = function () {
 
+      //创建img标签
 
+      var oImg = document.createElement('img')
 
+      //赋值属性
 
+      oImg.src = this.bg
 
+      oImg.style.width = this.width + 'px'
 
+      oImg.style.left = this.xLeft + 'px'
 
+      oImg.style.top = this.xTop + 'px'
 
+      document.body.appendChild(oImg)
 
+      this.img = oImg
 
+    }
 
+    //下落的方法
 
+    leaf.prototype.fall = function () {
 
+      //叶子起始下落时间
 
+      // console.log(this)
 
+      setTimeout(function () {
 
+        console.log(this)
 
+        //一直下落的时间
 
+        this.timer = setInterval(function () {
 
+          if (this.img.offsetTop < screenHeight - this.img.offsetHeight) {
 
+            this.img.style.top = this.img.offsetTop + 10 + 'px'
 
+          } else {
 
+            clearInterval(this.timer)
 
+          }
 
+        }.bind(this), 20)
 
+      }.bind(this), Math.random() * 2000)
 
+    }
 
+    var leafArr = []
 
+    for (var i = 0; i < 20; i++) {
 
+      //创建实例化对象
 
+      var leaf1 = new leaf()
 
+      leafArr.push(leaf1)
 
+      leaf1.init()
 
+    }
 
+    document.onclick = function () {
 
+      for (var i = 0; i < leafArr.length; i++) {
 
+        leafArr[i].fall()
 
+      }
 
+    }
 
+  </script>
 
+</body>
 
+
 
+</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: 5px  为了兼容chrome浏览器 或者safari 浏览器*/
 
+      /* -moz-border-radius: 5px   兼容火狐浏览器*/
 
+      /* -o-border-radius: 5px  兼容欧鹏浏览器*/
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+</body>
 
+</html>

+ 33 - 0
css3/2_文本样式.html
View File 

@@ -0,0 +1,33 @@
 
+<!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: orange;
 
+
 
+      /* overflow: hidden;
 
+      white-space: nowrap; */
 
+      /* 文本溢出 */
 
+      /* text-overflow: ellipsis; */
 
+
 
+      /* 文本阴影 左右  上下  清晰度  颜色*/
 
+      /* text-shadow: 5px 5px 5px red; */
 
+
 
+      border-radius: 5px;
 
+      box-shadow: 2px 10px 20px rgba(0, 0, 0, 0.5);
 
+      
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1">
 
+    哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈
 
+  </div>
 
+</body>
 
+</html>

+ 85 - 0
css3/3_奥运五环.html
View File 

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

+ 83 - 0
css3/4_弹性盒模型.html
View File 

@@ -0,0 +1,83 @@
 
+<!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 {
 
+      height: 500px;
 
+      background: black;
 
+      display: flex;
 
+    }
 
+
 
+    #div2 {
 
+      width: 200px;
 
+      height: 200px;
 
+      background: red;
 
+    }
 
+
 
+    #div3 {
 
+      height: 200px;
 
+      background: blue;
 
+      flex: 1;
 
+      /* 占据剩余空间的一份 */
 
+    }
 
+
 
+    #div4 {
 
+      height: 200px;
 
+      background: orange;
 
+      flex: 2;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <div id="div1">
 
+    <div id="div2"></div>
 
+    <div id="div3"></div>
 
+    <div id="div4"></div>
 
+  </div>
 
+  <!-- 
+    display: flex  父元素设置
 
+
 
+    flex-direction  决定主轴的方向
 
+      row(默认值): 主轴是水平方向,起点在左侧
 
+      row-reverse: 主轴是水平方向，起点在右侧
 
+      column: 主轴为垂直方向，起点在上方
 
+      column-reverse: 主轴是垂直方向，起点在下方
 
+
 
+    flex-wrap 是否应该对 flex 项目换行
 
+      nowrap(默认值) 规定将不对 flex 项目换行 
+      wrap  换行，第一行在上方
 
+      wrap-reverse 换行，第一行在下方
 
+
 
+    justify-content 对齐 flex 项目
 
+      flex-start: 左对齐(默认值)
 
+      flex-end: 右对齐
 
+      center: 居中
 
+      space-between: 两端对齐，项目之间的间隔相等
 
+      space-around: 每个项目环绕的距离相等
 
+
 
+    align-items 用于垂直对齐 flex 项目
 
+      flex-start: 上对齐
 
+      flex-end: 下对齐
 
+      center: 居中
 
+      stretch 值拉伸 flex 项目以填充容器（默认）
 
+      baseline 值使 flex 项目基线对齐
 
+
 
+    align-content 属性用于对齐弹性线
 
+      space-between 值显示的弹性线之间有相等的间距
 
+      stretch 值拉伸弹性线以占据剩余空间（默认）
 
+      center 值在容器中间显示弹性线
 
+      flex-start 值在容器开头显示弹性线
 
+      flex-end 值在容器的末尾显示弹性线
 
+
 
+
 
+
 
+  -->
 
+</body>
 
+
 
+</html>

+ 63 - 0
css3/5_弹性盒模型的效果.html
View File 

@@ -0,0 +1,63 @@
 
+<!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;
 
+    }
 
+    ul{
 
+      list-style: none;
 
+      display: flex;
 
+      flex-wrap: wrap;
 
+    }
 
+    li{
 
+      width: 20%;
 
+      height: 100px;
 
+      background: red;
 
+      border: 1px solid green;
 
+      box-sizing: border-box; 
+      /* 怪异盒模型 */
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <!--  
+    标准盒子宽度 = width + padding(左右) + margin (左右) + border(左右)
 
+
 
+    怪异盒模型宽度 = width + margin(左右)  width里面包含了padding和border
 
+
 
+
 
+    box-sizing: content-box  盒模型 正常的标准
 
+    box-sizing: border-box  怪异盒模型  (IE)盒模型
 
+
 
+  -->
 
+  <ul>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    <li></li>
 
+    
+  </ul>
 
+</body>
 
+</html>