day04--->html day05--->js基本语法

hwq2017 · Apr 19, 2017 · 6dd851a · 6dd851a
1 parent 6fecbd2
commit 6dd851a
Show file tree

Hide file tree

Showing 15 changed files with 554 additions and 0 deletions.
diff --git a/day04/01.center.html b/day04/01.center.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>子元素在父元素中居中设置</title>
+  <style media="screen">
+  /*在不改变父元素大小的情况下，让子元素居中*/
+    .f{
+      width: 500px;
+      height: 300px;
+      background: yellow;
+      margin: 50px auto;
+
+     /*第一种 居中方法 */
+      /*为让子盒子居中，设置padding后，父的宽高做相应变化400,200，保证父最后宽高不改变*/
+      /*padding-left: 100px;
+      padding-top: 100px;*/
+
+
+      position: relative;
+    }
+    .s{
+      width: 300px;
+      height: 100px;
+      background: red;
+
+     /*第二种方法*/
+     /*分别在父子元素设置定位属性，通过调节子元素里的px值 */
+      position: absolute;
+      /*top: 93px;
+      left: 99px;*/
+
+      /*第三种方法*/
+      top: 50%;  /* 50% 是相对于父元素*/
+      margin-top: -50px; /*向上移动元素本身高度的一半*/
+      left: 50%;
+      margin-left: -150px;
+
+    }
+     .d {
+       width: 500px;
+       height: 300px;
+       background: yellow;
+       padding-top: 1px;
+     }
+
+  .d  .v{
+      width: 300px;
+      height: 100px;
+      background: red;
+      /*margin: 00px auto;*/
+      margin-top: 100px;
+    }
+  </style>
+</head>
+<body>
+  <div class="f">
+    <div class="s"></div>
+  </div>
+  <div class="d">
+    <div class="v"></div>
+  </div>
+</body>
+</html>
diff --git a/day04/02.clearfix.html b/day04/02.clearfix.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>居中设置</title>
+  <style media="screen">
+
+    .f {
+      width: 500px;
+      height: 300px;
+      background: red;
+      position: absolute;
+      top: 100px;
+      left: 100px;
+      float: left;
+    }
+    .s {
+      width: 300px;
+      height: 100px;
+      background: yellow;
+      position:absolute;
+
+      /*需知道父元素的大小*/
+      /*top: 100px;
+      left: 100px;*/
+      /*只知道自己本身宽高就可以*/
+      top: 50%;
+      margin-top: -50px;
+    }
+  </style>
+</head>
+<body>
+  <div class="f">
+    <div class="s"></div>
+  </div>
+</body>
+</html>
diff --git a/day04/03.sprint.html b/day04/03.sprint.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>精灵图</title>
+</head>
+<body>
+  <!--精灵图的使用，尽量让元素和要显示的精灵图的大小一致  -->
+  <div class="hotel"></div>
+</body>
+</html>
diff --git a/day04/04.weiyuansu.html b/day04/04.weiyuansu.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+  <style media="screen">
+
+
+    .f::before{
+      content: "显示在span前面";
+    }
+    .f::after{
+      content: "显示在span后面";
+    }
+  </style>
+</head>
+<body>
+  <div class="f">
+    <span>闪客帝国几十块登录</span>
+  </div>
+</body>
+</html>
diff --git a/day04/05.display.html b/day04/05.display.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+  <style media="screen">
+
+    /*display属性可以让块元素和行元素互相转换*/
+    /*将俩个元素设置为行内块元素时，会底部在统一水平线水平对齐*/
+    .f{
+      width: 100px;
+      height: 100px;
+      background: blue;
+
+      /*将块元素转化为行元素，如果块元素里没有内容，此时转化成的行元素就为空，会被后面的元素覆盖*/
+      /*display: inline;  */
+
+      display: inline-block;
+    }
+    .s{
+      width: 100px;
+      height: 200px;
+      background: red;
+      display: inline-block;
+    }
+    .c {
+      width: 300px;
+      height: 100px;
+      background: pink;
+      display: block;
+    }
+
+  </style>
+</head>
+<body>
+  <div class="f"></div>
+  <div class="s"></div>
+  <span class="c">行变块</span>
+</body>
+</html>
diff --git a/day04/06.hidden.html b/day04/06.hidden.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+  <style media="screen">
+  .f{
+    width: 100px;
+    height: 100px;
+    background: blue;
+    /* 隐藏一个元素，占据页面空间 */
+    /*visibility: hidden;*/
+
+    /*隐藏一个元素，不占据页面空间*/
+    display: none;
+  }
+  .s{
+    width: 100px;
+    height: 200px;
+    background: red;
+    display: inline-block;
+  }
+  </style>
+</head>
+<body>
+  <div class="f"></div>
+  <div class="s"></div>
+  <p class="p">dkgjlsdakgjlkfsdg</p>
+</body>
+</html>
diff --git a/day04/07.index.html b/day04/07.index.html
@@ -0,0 +1,73 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+  <style media="screen">
+  .f1{
+    width: 100px;
+    height: 100px;
+    background: blue;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    /*用于设置元素的层级，可以是任意整数*/
+                /*默认情况下，设置定位的元素的层级都比普通元素的层级要高，是大于0，但是小于1*/
+    			/*z-index: -1;*/
+  }
+
+
+  .f2{
+    width: 300px;
+    height: 200px;
+    background: red;
+
+    /*
+			z-index的设置只对设置过定位的元素有效
+			*/
+
+    z-index: 1;
+    position: relative;
+  }
+  .l{
+    width: 300px;
+    height: 100px;
+
+    list-style: none;
+  }
+
+  /*
+		浮动排列在一行的所有元素，默认情况下，元素的层级从左到右逐渐增大，
+		从0开始无限接近于1
+		*/
+
+  .l li{
+    width: 50px;
+    height: 50px;
+
+    margin-right: -1px;/*将相邻两个盒子边框显示为一条，*/
+    border: 1px solid red;
+    float: left;
+  }
+  .l li:hover{
+    border-color: yellow;
+
+    /*通过设置z-index,但同时必须设置position .当点击盒子边框时，盒子所有边框都变色*/
+    z-index: 2;
+    position: relative;
+  }
+  </style>
+</head>
+<body>
+  <div class="f1"></div>
+  <div class="f2"></div>
+  <ul class="l">
+    <li></li>
+    <li></li>
+    <li></li>
+    <li></li>
+  </ul>
+</body>
+</html>
diff --git a/day04/1.html b/day04/1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+  <style media="screen">
+    .f {
+      width: 200px;
+      height: 100px;
+      border: 1px solid red;
+    }
+    .f1 {
+      margin-left: 50px;
+    }
+  </style>
+</head>
+<body>
+  <div class="f"></div>
+  <div class="f f1"></div>
+</body>
+</html>
diff --git a/day05/01.js.html b/day05/01.js.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>js的基本语法</title>
+</head>
+<body>
+  <script type="text/javascript">
+    var a = 1;
+    var b = "hello";
+    var c = "world";
+
+
+
+    if(1)
+    {
+      var d = "hihihi";
+    }
+    //可以访问到if里的变量d，说明普通{}是不区分作用域的
+
+    console.log(a,b,c,d); // 输出变量类型不一样时，就会区分显示，字符串就加""
+  </script>
+</body>
+</html>
diff --git a/day05/02.js.html b/day05/02.js.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>js</title>
+</head>
+<body>
+
+  <script type="text/javascript">
+    var a = 2;
+    var b = "huang";
+
+
+   // 在函数中定义变量，外面无法访问到，说明函数中定义的变量是局部变量，全局无法访问
+
+  /*  function fun() {
+       var c = "kdjg";
+       }
+      console.log(c); */ //报错
+
+
+    //可以访问到if里的变量d，说明普通{}是不区分作用域的
+    if(1)
+    {
+      var d = "hihihi";
+    }
+
+     console.log(d);
+
+  </script>
+</body>
+</html>