Etusivu Tutki Apua
Kirjaudu sisään
lovecoding
/
W0407
10
0
Fork 0
Tiedostot Ongelmat 0 Pull-pyynnöt 0 Wiki
Selaa lähdekoodia

js

zheng 3 päivää sitten
vanhempi
53bcb4a008
commit
1cd91f8ec1
11 muutettua tiedostoa jossa 570 lisäystä ja 28 poistoa
Jaettu näkymä Näytä diff tilastot
  1. 27 0
      css3/1.浏览器的内核.html
  2. 57 0
      css3/10.左侧固定右侧上中下.html
  3. 114 0
      css3/2.弹性布局.html
  4. 107 0
      css3/3.弹性布局.html
  5. 35 0
      css3/4.左侧固定右侧自适应.html
  6. 32 0
      css3/5.左侧固定右侧自适应.html
  7. 35 0
      css3/6.左侧固定右侧自适应.html
  8. 32 0
      css3/7.左侧固定右侧自适应.html
  9. 45 0
      css3/8.上中下布局.html
  10. 58 0
      css3/9.上中下加左侧固定.html
  11. 28 28
      js高级/25.EventLoop.html

+ 27 - 0
css3/1.浏览器的内核.html
Näytä tiedosto 

@@ -0,0 +1,27 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        div {
 
+            width: 200px;
 
+            height: 200px;
 
+            border-radius: 50%;
 
+            background: #f00;
 
+            /* 谷歌浏览器 -webkit */
 
+            -webkit-border-radius:50%;
 
+            /* 火狐浏览器 -moz */
 
+            -moz-border-radius:50%;
 
+            /* IE浏览器 -ms */
 
+            -ms-border-radius:50%;
 
+            /* 欧鹏浏览器 -o */
 
+            -o-border-radius:50%;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div></div>
 
+</body>
 
+</html>

+ 57 - 0
css3/10.左侧固定右侧上中下.html
Näytä tiedosto 

@@ -0,0 +1,57 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        body {
 
+            display: flex;
 
+        }
 
+        #box1 {
 
+            width: 300px;
 
+            height: 900px;
 
+            background: #00f;
 
+        }
 
+        #box2 {
 
+            flex: 1;
 
+            height: 900px;
 
+            background: #0ff;
 
+            margin-left: 10px;
 
+            display: flex;
 
+            flex-direction: column;
 
+        }
 
+        #header {
 
+            width: 100%;
 
+            height: 100px;
 
+            background: #00f;
 
+        }
 
+        #main {
 
+            width: 100%;
 
+            flex: 8;
 
+            /* height: 100px; */
 
+            background: #ff0;
 
+        }
 
+        #footer {
 
+            width: 100%;
 
+            flex: 1;
 
+            background: #0f0;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div id="box1"></div>
 
+    <div id="box2">
 
+        <div id="header"></div>
 
+        <div id="main"></div>
 
+        <div id="footer"></div>
 
+    </div>
 
+</body>
 
+
 
+</html>

+ 114 - 0
css3/2.弹性布局.html
Näytä tiedosto 

@@ -0,0 +1,114 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        #box {
 
+            width: 800px;
 
+            height: 900px;
 
+            border: 3px solid #000;
 
+            /* 开启弹性盒 */
 
+            display: flex;
 
+            justify-content: center;
 
+            /* flex-wrap: wrap; */
 
+            align-items: center;
 
+            /* flex-flow: row-reverse wrap; */
 
+            /* flex-wrap: wrap-reverse; */
 
+            /* flex-direction: column-reverse; */
 
+            /* display: inline-flex; */
 
+            /* display: -webkit-flex; */
 
+        }
 
+        #box1,#box2,#box3 {
 
+            width: 200px;
 
+            height: 300px;
 
+        }
 
+        #box1 {
 
+            background: #00f;
 
+            /* display: flex; */
 
+        }
 
+        #box2 {
 
+            background: #0ff;
 
+        }
 
+        #box3 {
 
+            background: #0f0;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+        <!-- 
+        Flex 弹性布局
 
+        Flex属性分为两部分，一部分作用于容器称""容器属性"",另一部分作用于项目称为""项目属性"";
 
+        display:flex; 开启弹性盒
 
+        display:-webkit-flex; 开启对应内核浏览器的弹性盒
 
+        display:inline-flex; 开启行内的弹性盒
 
+        注意:设置为flex布局后，子元素的float、clear、vertical-align属性将失效;
 
+
 
+        容器属性：
 
+            1.flex-direction
 
+                决定主轴的方向(项目的排列方向)
 
+                .box {
 
+                    flex-direction:row|row-reverse|column|column-reverse;
 
+                }
 
+                row(默认) 从左向右排列,主轴为水平方向，起点在左端
 
+                row-reverse 从右向左排列,主轴为水平方向,起点在右端
 
+                column 从上向下排列,起点在上沿
 
+                column-reverse 从下向上排列,起点在下沿
 
+            2.flex-wrap
 
+                默认情况下，Flex项目都排在一条线上，又称"轴线"上；
 
+                我们可以通过flex-wrap属性设置，让Flex项目换行排列；
 
+                .box {
 
+                    flex-wrap:nowrap|wrap|warp-reverse;
 
+                }
 
+                    nowrap(默认):不换行;所有Flex项目单行排列：
 
+                    wrap:换行,第一行在上方;所有Flex项目多行排列,按从上到下的顺序;
 
+                    wrap-reverse:换行,第一行在下方;所有Flex项目多行排列,按从下到上的顺序;
 
+            3. flex-flow
 
+                    是flex-direction属性和flex-wrap属性的间歇性是，默认值为row nowrap;
 
+                    .box {
 
+                        flex-flow:<flex-direction><flex-wrap>;
 
+                    }
 
+            4. justify-content属性定义了项目在主轴上的对齐方式;
 
+                    .box {
 
+                        justify-content:flex-start|flex-end|center|space-between|space-around;
 
+                    }
 
+                    flex-start(默认):左对齐;
 
+                    flex-end:右对齐;
 
+                    center:居中;
 
+                    space-between:两端对齐，项目之间间隔相等;
 
+                    space-around：项目均匀分布，每一个项目两侧有相同的留白空间，相邻项目之间的距  离是两个项目之间留白的和;
 
+                    space-evenly：项目均匀分布，所有项目之间及项目与边框之间距离相等;
 
+            5. align-items
 
+                    属性定义项目在交叉轴上的对齐方式。
 
+                    .box {
 
+                        align-items: stretch | flex-start | flex-end | center | baseline;
 
+                    }
 
+                    stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
 
+                    flex-start：交叉轴的起点对齐。
 
+                    flex-end：交叉轴的终点对齐。
 
+                    center：交叉轴的中点对齐。
 
+                    baseline: 项目的第一行文字的基线对齐。
 
+            注意: Internet Explorer 10 及更早版本浏览器不支持 align-content 属性。
 
+            注意: Safari 7.0 及更新版本通过 -webkit-align-content 属性支持该属性。
 
+            注意:Internet Explorer, Firefox, 和 Safari 浏览器不支持 align-content 属性。
 
+
 
+     -->
 
+        <div id="box">
 
+            <div id="box1">
 
+                <p>1</p>
 
+                <p>2</p>
 
+                <p>3</p>
 
+            </div>
 
+            <!-- <div id="box2">2222</div>
 
+            <div id="box3">3333</div>
 
+            <div id="box1">
 
+                <p>1</p>
 
+                <p>2</p>
 
+                <p>3</p>
 
+            </div>
 
+            <div id="box2">2222</div> -->
 
+            <!-- <div id="box3">3333</div> -->
 
+        </div>
 
+</body>
 
+</html>

+ 107 - 0
css3/3.弹性布局.html
Näytä tiedosto 

@@ -0,0 +1,107 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        #box {
 
+            width: 400px;
 
+            height: 900px;
 
+            border: 3px solid #000;
 
+            /* 开启弹性盒 */
 
+            display: flex;
 
+        }
 
+
 
+        #box1,
 
+        #box2,
 
+        #box3 {
 
+            height: 300px;
 
+            font-size: 40px;
 
+            color: #fff;
 
+        }
 
+
 
+        #box1 {
 
+            width: 150px;
 
+            background: #00f;
 
+            flex-basis: auto;
 
+            /* flex-shrink: 1; */
 
+            /* flex: 1; */
 
+            /* flex-grow: 1; */
 
+            /* order: 2; */
 
+            /* display: flex; */
 
+        }
 
+
 
+        #box2 {
 
+            width: 100px;
 
+            background: #0ff;
 
+            /* flex-shrink: 1; */
 
+            /* flex: 1; */
 
+            /* order: 1; */
 
+            /* flex-shrink: 1; */
 
+        }
 
+
 
+        #box3 {
 
+            width: 200px;
 
+            background: #0f0;
 
+            /* flex-shrink: 0; */
 
+            /* flex:4; */
 
+            /* order: 3; */
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <!-- 
+    
+      Flex项目属性
 
+            1.order
 
+                属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
 
+                按order值从小到大顺序排列，可以为负值，默认为0。
 
+                默认情况下，Flex项目是按照在代码中出现的先后顺序排列的。然而order属性可以控制项目在容器中的先后顺序。
 
+
 
+                .item {
 
+                order: <integer>可伸缩的值;
 
+                }
 
+            2.flex-grow
 
+                属性定义项目的放大比例，flex-grow 值是一个单位的正整数，表示放大的比例。默认为0，即如果存在额外空间，也不放大，负值无效。
 
+                如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
 
+                .item {
 
+                    flex-grow: <number>; /* 默认 0 */
 
+                }
 
+            3.flex-shrink
 
+                属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。0表示不缩小，负值无效。
 
+                如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
 
+                .item {
 
+                    flex-shrink: <number>; /* 默认 1 */
 
+                }
 
+            4.flex-basis
 
+                属性定义项目在分配额外空间之前的缺省尺寸。属性值可以是长度（20%，10rem等）或者关键字auto。它的默认值为auto，即项目的本来大小。
 
+                .item {
 
+                    flex-basis: <length> | auto; /* 默认 auto */
 
+                }
 
+            5.flex
 
+                    属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
 
+                    .item {
 
+                        flex: none | [ <'flex-grow'> <'flex-shrink'><'flex-basis'> ]
 
+                    }
 
+                    该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
 
+                    建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
 
+                     -->
 
+    <div id="box">
 
+        <div id="box1">11111</div>
 
+        <div id="box2">2</div>
 
+        <div id="box3">3333</div>
 
+        <!-- 
+            <div id="box1">
 
+                <p>1</p>
 
+                <p>2</p>
 
+                <p>3</p>
 
+            </div>
 
+            <div id="box2">2222</div> -->
 
+        <!-- <div id="box3">3333</div> -->
 
+    </div>
 
+</body>
 
+
 
+</html>

+ 35 - 0
css3/4.左侧固定右侧自适应.html
Näytä tiedosto 

@@ -0,0 +1,35 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        body {
 
+            display: flex;
 
+        }
 
+        #box1 {
 
+            width: 300px;
 
+            height: 300px;
 
+            background: #00f;
 
+        }
 
+        #box2 {
 
+            flex: 1;
 
+            height: 300px;
 
+            background: #0ff;
 
+            margin-left: 10px;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div id="box1"></div>
 
+    <div id="box2"></div>
 
+</body>
 
+
 
+</html>

+ 32 - 0
css3/5.左侧固定右侧自适应.html
Näytä tiedosto 

@@ -0,0 +1,32 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        #box1 {
 
+            width: 300px;
 
+            height: 300px;
 
+            background: #00f;
 
+            float: left;
 
+        }
 
+        #box2 {
 
+            height: 300px;
 
+            background: #f00;
 
+            margin-left: 320px;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div id="box1"></div>
 
+    <div id="box2"></div>
 
+</body>
 
+
 
+</html>

+ 35 - 0
css3/6.左侧固定右侧自适应.html
Näytä tiedosto 

@@ -0,0 +1,35 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        body {
 
+            /* position: relative; */
 
+        }
 
+        #box1 {
 
+            width: 300px;
 
+            height: 300px;
 
+            background: #00f;
 
+            position: absolute;
 
+        }
 
+        #box2 {
 
+            height: 300px;
 
+            background: #f00;
 
+            margin-left: 320px;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div id="box1"></div>
 
+    <div id="box2"></div>
 
+</body>
 
+
 
+</html>

+ 32 - 0
css3/7.左侧固定右侧自适应.html
Näytä tiedosto 

@@ -0,0 +1,32 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        #box1 {
 
+            width: 300px;
 
+            height: 300px;
 
+            background: #00f;
 
+        }
 
+        #box2 {
 
+            height: 300px;
 
+            background: #f00;
 
+            margin-left: 320px;
 
+            margin-top: -300px;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div id="box1"></div>
 
+    <div id="box2"></div>
 
+</body>
 
+
 
+</html>

+ 45 - 0
css3/8.上中下布局.html
Näytä tiedosto 

@@ -0,0 +1,45 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        #box {
 
+            width: 100%;
 
+            height: 900px;
 
+            display: flex;
 
+            flex-direction: column;
 
+        }
 
+        #header {
 
+            width: 100%;
 
+            height: 100px;
 
+            background: #00f;
 
+        }
 
+        #main {
 
+            width: 100%;
 
+            flex: 8;
 
+            /* height: 100px; */
 
+            background: #ff0;
 
+        }
 
+        #footer {
 
+            width: 100%;
 
+            flex: 1;
 
+            background: #0ff;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box">
 
+        <div id="header">
 
+            
+        </div>
 
+        <div id="main">
 
+            
+        </div>
 
+        <div id="footer">
 
+            
+        </div>
 
+    </div>
 
+</body>
 
+</html>

+ 58 - 0
css3/9.上中下加左侧固定.html
Näytä tiedosto 

@@ -0,0 +1,58 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        #box {
 
+            width: 100%;
 
+            height: 900px;
 
+            display: flex;
 
+            flex-direction: column;
 
+        }
 
+        #header {
 
+            width: 100%;
 
+            height: 100px;
 
+            background: #00f;
 
+        }
 
+        #main {
 
+            width: 100%;
 
+            flex: 8;
 
+            /* height: 100px; */
 
+            background: #ff0;
 
+            display: flex;
 
+        }
 
+        #sideBar {
 
+            width: 200px;
 
+            height: 100%;
 
+            background: red;
 
+        }
 
+        #article {
 
+            flex: 1;
 
+            height: 100%;
 
+            margin-left: 10px;
 
+            background: purple;
 
+        }
 
+        #footer {
 
+            width: 100%;
 
+            flex: 1;
 
+            background: #0ff;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box">
 
+        <div id="header">
 
+            
+        </div>
 
+        <div id="main">
 
+            <div id="sideBar"></div>
 
+            <div id="article"></div>
 
+        </div>
 
+        <div id="footer">
 
+            
+        </div>
 
+    </div>
 
+</body>
 
+</html>

+ 28 - 28
js高级/25.EventLoop.html
Näytä tiedosto 

@@ -40,34 +40,34 @@
 
         // console.log("4");
 
 
 
-        // console.log(1)
 
-        // setTimeout(function () {
 
-        //     console.log(2);
 
-        //     let promise = new Promise(function (resolve, reject) {
 
-        //         console.log(7);
 
-        //         resolve()
 
-        //     }).then(function () {
 
-        //         console.log(8)
 
-        //     });
 
-        // }, 1000);
 
-        // setTimeout(function () {
 
-        //     console.log(10);
 
-        //     let promise = new Promise(function (resolve, reject) {
 
-        //         console.log(11);
 
-        //         resolve()
 
-        //     }).then(function () {
 
-        //         console.log(12)
 
-        //     });
 
-        // }, 0);
 
-        // let promise = new Promise(function (resolve, reject) {
 
-        //     console.log(3);
 
-        //     resolve()
 
-        // }).then(function () {
 
-        //     console.log(4)
 
-        // }).then(function () {
 
-        //     console.log(9)
 
-        // });
 
-        // console.log(5)
 
+        console.log(1)
 
+        setTimeout(function () {
 
+            console.log(2);
 
+            let promise = new Promise(function (resolve, reject) {
 
+                console.log(7);
 
+                resolve()
 
+            }).then(function () {
 
+                console.log(8)
 
+            });
 
+        }, 1000);
 
+        setTimeout(function () {
 
+            console.log(10);
 
+            let promise = new Promise(function (resolve, reject) {
 
+                console.log(11);
 
+                resolve()
 
+            }).then(function () {
 
+                console.log(12)
 
+            });
 
+        }, 0);
 
+        let promise = new Promise(function (resolve, reject) {
 
+            console.log(3);
 
+            resolve()
 
+        }).then(function () {
 
+            console.log(4)
 
+        }).then(function () {
 
+            console.log(9)
 
+        });
 
+        console.log(5)