Inicio Explorar Axuda
Iniciar sesión
lovecoding
/
vipAllDay
10
0
Fork 0
Ficheiros Incidencias 0 Pull Requests 0 Wiki
Explorar o código

css3

e hai 11 meses
pai
488986fa88
achega
4b976effc9
Modificáronse 9 ficheiros con 374 adicións e 51 borrados
Dividir vista Mostrar estatísticas de Diff
  1. 45 0
      css3/10.上中下布局.html
  2. 59 0
      css3/11.上中下左侧定宽.html
  3. 65 0
      css3/12.左侧定宽右侧上中下.html
  4. 51 0
      css3/13.上中下布局顶部固定.html
  5. 25 0
      css3/6.左侧固定右侧自适应.html
  6. 25 0
      css3/7.左侧固定右侧自适应.html
  7. 25 0
      css3/8.左侧固定右侧自适应.html
  8. 28 0
      css3/9.左侧固定右侧自适应.html
  9. 51 51
      js/js高阶/8.数组的扩展方法.html

+ 45 - 0
css3/10.上中下布局.html
Ver ficheiro 

@@ -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: 1000px;
 
+            height: 800px;
 
+            border:3px solid #f00;
 
+            display: flex;
 
+            flex-direction: column;
 
+        }
 
+        #header {
 
+            width: 100%;
 
+            /* flex: 2; */
 
+            height: 80px;
 
+            background: #0f0;
 
+        }
 
+        #main {
 
+            width: 100%;
 
+            flex: 6;
 
+            background: #00f;
 
+        }
 
+        #footer {
 
+            width: 100%;
 
+            flex: 2;
 
+            background: #ccc;
 
+        }
 
+
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box">
 
+        <div id="header">
 
+
 
+        </div>
 
+        <div id="main">
 
+
 
+        </div>
 
+        <div id="footer"></div>
 
+    </div>
 
+</body>
 
+</html>

+ 59 - 0
css3/11.上中下左侧定宽.html
Ver ficheiro 

@@ -0,0 +1,59 @@
 
+<!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: 1600px;
 
+            height: 880px;
 
+            display: flex;
 
+            flex-direction: column;
 
+            border:3px solid #000;
 
+        }
 
+        #header {
 
+            width: 100%;
 
+            height: 100px;
 
+            background: #f00;
 
+        }
 
+        #main {
 
+            width: 100%;
 
+            flex: 1;
 
+            background: plum;
 
+            display: flex;
 
+        }
 
+        #main .left {
 
+            flex: 1;
 
+            /* width: 280px; */
 
+            height: 100%;
 
+            background: #ff0;
 
+        }
 
+        #main .right {
 
+            flex: 8;
 
+            height: 100%;
 
+            background: hotpink;
 
+            margin-left: 20px;
 
+        }
 
+        #footer {
 
+            width: 100%;
 
+            height: 180px;
 
+            background: #ccc;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box">
 
+        <div id="header"></div>
 
+        <div id="main">
 
+            <div class="left">
 
+
 
+            </div>
 
+            <div class="right">
 
+
 
+            </div>
 
+        </div>
 
+        <div id="footer"></div>
 
+    </div>
 
+</body>
 
+</html>

+ 65 - 0
css3/12.左侧定宽右侧上中下.html
Ver ficheiro 

@@ -0,0 +1,65 @@
 
+<!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: 1200px;
 
+            height: 888px;
 
+            border:3px solid #000;
 
+            display: flex;
 
+        }
 
+        #box .left {
 
+            width: 200px;
 
+            height: 100%;
 
+            background: #f00;
 
+        }
 
+
 
+        #box .right {
 
+            flex: 1;
 
+            height: 100%;
 
+            background: #ff0;
 
+            margin-left: 30px;
 
+            display: flex;
 
+            flex-direction: column;
 
+        }
 
+
 
+        .right .header {
 
+            width: 100%;
 
+            height: 120px;
 
+            background: #0f0;
 
+        }
 
+        .right .mid {
 
+            width: 100%;
 
+            flex: 1;
 
+            background: palevioletred;
 
+        }
 
+        .right .bottom {
 
+            width: 100%;
 
+            height: 180px;
 
+            background: rgb(22, 150, 186);
 
+        }
 
+        
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box">
 
+        <div class="left">
 
+
 
+        </div>
 
+        <div class="right">
 
+            <div class="header">
 
+
 
+            </div>
 
+            <div class="mid">
 
+
 
+            </div>
 
+            <div class="bottom">
 
+                
+            </div>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>

+ 51 - 0
css3/13.上中下布局顶部固定.html
Ver ficheiro 

@@ -0,0 +1,51 @@
 
+<!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: 1400px;
 
+            height: 1300px;
 
+            display: flex;
 
+            flex-direction: column;
 
+        }
 
+        .con {
 
+            width: 1400px;
 
+            height: 100px;
 
+        }
 
+        .top {
 
+            width: 1400px;
 
+            height: 100px;
 
+            position: fixed;
 
+            top: 0;
 
+            background: #f00;
 
+        }
 
+        .mid {
 
+            width: 100%;
 
+            flex: 1;
 
+            background: #ff0;
 
+            /* margin-top: 100px; */
 
+        }
 
+        .bottom {
 
+            width: 100%;
 
+            height: 140px;
 
+            background: #0f0;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box">
 
+        <div class="con">
 
+            <div class="top">
 
+
 
+            </div>
 
+        </div>
 
+        <div class="mid">
 
+
 
+        </div>
 
+        <div class="bottom"></div>
 
+    </div>
 
+</body>
 
+</html>

+ 25 - 0
css3/6.左侧固定右侧自适应.html
Ver ficheiro 

@@ -0,0 +1,25 @@
 
+<!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>
 
+        #box1 {
 
+            width: 200px;
 
+            height: 400px;
 
+            background: #00f;
 
+        }
 
+        #box2 {
 
+            height: 200px;
 
+            background: #ff0;
 
+            margin-left: 200px;
 
+            margin-top: -400px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box1"></div>
 
+    <div id="box2"></div>
 
+</body>
 
+</html>

+ 25 - 0
css3/7.左侧固定右侧自适应.html
Ver ficheiro 

@@ -0,0 +1,25 @@
 
+<!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>
 
+        #box1 {
 
+            width: 200px;
 
+            height: 400px;
 
+            background: #f0f;
 
+            position: absolute;
 
+        }
 
+        #box2 {
 
+            height: 200px;
 
+            background: #00f;
 
+            margin-left: 210px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box1"></div>
 
+    <div id="box2"></div>
 
+</body>
 
+</html>

+ 25 - 0
css3/8.左侧固定右侧自适应.html
Ver ficheiro 

@@ -0,0 +1,25 @@
 
+<!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>
 
+        #box1 {
 
+            width: 200px;
 
+            height: 400px;
 
+            background: #f00;
 
+            float: left;
 
+        }
 
+        #box2 {
 
+            height: 200px;
 
+            background: #ff0;
 
+            margin-left: 210px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box1"></div>
 
+    <div id="box2"></div>
 
+</body>
 
+</html>

+ 28 - 0
css3/9.左侧固定右侧自适应.html
Ver ficheiro 

@@ -0,0 +1,28 @@
 
+<!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>
 
+        body {
 
+            display: flex;
 
+        }
 
+        #box1 {
 
+            width: 400px;
 
+            height: 400px;
 
+            background: purple;
 
+        }
 
+        #box2 {
 
+            flex: 1;
 
+            height: 200px;
 
+            background: #ff0;
 
+            margin-left: 10px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box1"></div>
 
+    <div id="box2"></div>
 
+</body>
 
+</html>

+ 51 - 51
js/js高阶/8.数组的扩展方法.html
Ver ficheiro 

@@ -13,57 +13,57 @@
 
       <li>aaa</li>
 
     </ul>
 
     <script>
 
-        var arr4 = document.querySelectorAll("ul li");
 
-        var arr = [1, 2, 3, 6, -12, true, 12];
 
-        // 1.forEach
 
-        // item 代表每一项 index 代表下标
 
-        // arr.forEach((item,index)=>{
 
-        //     console.log(item,index)
 
-        // })
 
-        // 2.for of
 
-        // 不能循环对象 用于循环数组
 
-        // key代表每一项
 
-        let obj = {
 
-          a: "1",
 
-          b: 2,
 
-        };
 
-        // for(let key of arr) {
 
-        //     console.log(i)
 
-        // }
 
-        // 3.for in
 
-        // 可以循环对象  key代表对象中每一项的属性名
 
-        // 可以循环数组 key代表数组中的每一项的下标
 
-        // for(let key in arr) {
 
-        //     console.log(key)
 
-        // }
 
-        // 4.map 映射出完成操作的数组
 
-        //    let newArr = arr.map((ele,index)=>{
 
-        //         // console.log(ele,index)
 
-        //         if(0<ele<3){
 
-        //             return ele*2;
 
-        //         }
 
-        //     })
 
-        //     console.log(newArr)
 
-        //     console.log(arr)
 
-        //  5.filter 过滤
 
-        //   let newArr = arr.filter((ele) => {
 
-        //     console.log(ele);
 
-        //     if (ele < 3) {
 
-        //       return ele;
 
-        //     }
 
-        //   });
 
-        //   console.log(newArr);
 
-        //   console.log(arr);
 
-        //   6.some 条件全部为假 才为假 一个为真 则为真
 
-        //   let news = arr.some((ele) => {
 
-        //     return ele > 10;
 
-        //   });
 
-        //   console.log(news);
 
-        // 7.every 条件全部为真 才为真 一个为假 则为假
 
-        // let news = arr.every((ele) => {
 
-        //     return ele > -10;
 
-        //   });
 
-        //   console.log(news);
 
+      var arr4 = document.querySelectorAll("ul li");
 
+      var arr = [1, 2, 3, 6, -12, true, 12];
 
+      // 1.forEach
 
+      // item 代表每一项 index 代表下标
 
+      // arr.forEach((item,index)=>{
 
+      //     console.log(item,index)
 
+      // })
 
+      // 2.for of
 
+      // 不能循环对象 用于循环数组
 
+      // key代表每一项
 
+      let obj = {
 
+        a: "1",
 
+        b: 2,
 
+      };
 
+      // for(let key of arr) {
 
+      //     console.log(i)
 
+      // }
 
+      // 3.for in
 
+      // 可以循环对象  key代表对象中每一项的属性名
 
+      // 可以循环数组 key代表数组中的每一项的下标
 
+      // for(let key in arr) {
 
+      //     console.log(key)
 
+      // }
 
+      // 4.map 映射出完成操作的数组
 
+      //    let newArr = arr.map((ele,index)=>{
 
+      //         // console.log(ele,index)
 
+      //         if(0<ele<3){
 
+      //             return ele*2;
 
+      //         }
 
+      //     })
 
+      //     console.log(newArr)
 
+      //     console.log(arr)
 
+      //  5.filter 过滤
 
+      //   let newArr = arr.filter((ele) => {
 
+      //     console.log(ele);
 
+      //     if (ele < 3) {
 
+      //       return ele;
 
+      //     }
 
+      //   });
 
+      //   console.log(newArr);
 
+      //   console.log(arr);
 
+      //   6.some 条件全部为假 才为假 一个为真 则为真
 
+      //   let news = arr.some((ele) => {
 
+      //     return ele > 10;
 
+      //   });
 
+      //   console.log(news);
 
+      // 7.every 条件全部为真 才为真 一个为假 则为假
 
+      // let news = arr.every((ele) => {
 
+      //     return ele > -10;
 
+      //   });
 
+      //   console.log(news);
 
       //   8.reduce 从左到右进行运算
 
       // let arr1 = arr.reduce((ele,i) => {
 
       //     return ele * i;