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

admin

fengchuanyu 3 months ago
parent
be18fa14f0
commit
019e2e9df7
10 changed files with 426 additions and 2 deletions
Split View Show Diff Stats
  1. 2 2
      5_DOM/19_节点操作.html
  2. 16 0
      7_阶段复习/bom.html
  3. 114 0
      7_阶段复习/es6.html
  4. 52 0
      7_阶段复习/html.html
  5. 114 0
      7_阶段复习/js.html
  6. 24 0
      7_阶段复习/main.css
  7. 39 0
      8_CSS3/1_CSS3新属性.html
  8. 34 0
      8_CSS3/2_CSS3位移.html
  9. 31 0
      8_CSS3/3_CSS3旋转.html
  10. BIN
      8_CSS3/img/image4.png

+ 2 - 2
5_DOM/19_节点操作.html
View File 

@@ -59,8 +59,8 @@
 
         // 向指定元素的末尾添加子元素
 
         // oBox.appendChild(oDiv);
 
         // 向指定元素的前面添加元素 两个参数第一个是添加的元素 第二个是添加到哪个元素的前面
 
-        oBox.insertBefore(oDiv,spanOne);
 
-
 
+        // oBox.insertBefore(oDiv,spanOne);
 
+        oBox.replaceChild(oDiv,spanOne);
 
         // console.log(oDiv);
 
     </script>
 
 </body>

+ 16 - 0
7_阶段复习/bom.html
View File 

@@ -0,0 +1,16 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        // console.log(window.location.href);
 
+        // window.location.href = "https://www.baidu.com";
 
+        // window.alert("hello");
 
+        window.confirm("hello");
 
+    </script>
 
+</body>
 
+</html>

+ 114 - 0
7_阶段复习/es6.html
View File 

@@ -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>
 
+</head>
 
+<body>
 
+    <script>
 
+        // let a = 10;
 
+        // if(true){
 
+        //     let b = 20;
 
+        // }
 
+        // console.log(b);
 
+
 
+        // function foo2(){
 
+        //     console.log(this);
 
+        // }
 
+        // foo2();
 
+
 
+        // let foo = () => {
 
+        //     console.log(this);
 
+        // };
 
+        // foo();
 
+
 
+        // let str = `dsfdd`
 
+        // let obj = {
 
+        //     age:18,
 
+        //     showAage:function(){
 
+        //         console.log(this.age);
 
+        //         let foo = ()=>{
 
+        //             console.log(this)
 
+        //         }
 
+        //         foo();
 
+        //     }
 
+        // }
 
+        // obj.showAage();
 
+
 
+        let obj = {
 
+            userName:"zhangsan",
 
+            age:18,
 
+        }
 
+        // let userName = obj.userName;
 
+        // let age = obj.age;
 
+        // let {userName,age} = obj;
 
+        // console.log(userName,age);
 
+
 
+        // let arr = [1,2,3,4,5];
 
+        // let a = arr[0];
 
+        // let b = arr[1];
 
+        // let [a,b,c,d,e] = arr;
 
+        // console.log(a,b,c,d,e);
 
+
 
+
 
+        // let arr = new Array(1,2,3,4,5);
 
+        // console.log(arr);
 
+        // let arr = [1,2,3,4,5];
 
+        // let arr2 = [6,7,8,9,10];
 
+        // let arr3 = [...arr,...arr2];
 
+        // console.log(arr3);
 
+
 
+        // function foo(a,...args){
 
+        //     console.log(a,args);
 
+
 
+        // }
 
+        // foo(1,2,3,4,5,6)
 
+
 
+        // let obj2 = {
 
+        //     name:"zhangsan",
 
+        //     age:18,
 
+        //     parent:{
 
+        //         name:"王五"
 
+        //     }
 
+        // }
 
+        // let obj3 = {
 
+        //     school:"黑大"
 
+        // }
 
+        // let obj4 = Object.assign({},obj2,obj3);
 
+        // console.log(obj4);
 
+        // let obj3 = {...obj2};
 
+        // obj2.name = "李四";
 
+        // obj2.parent.name = "赵六";
 
+        // console.log(obj3);
 
+
 
+        // let foo = () => {};
 
+        // let year = 2025;
 
+        // let month = 2;
 
+        // let day = 5;
 
+        // let str = `现在是${year} 年${month} 月${day} 日`;
 
+        // console.log(str);
 
+
 
+        // const obj3 = {
 
+        //     name:"zhangsan",
 
+        //     age:18,
 
+        // }
 
+
 
+        // let {age} = obj3;
 
+        // console.log(age);
 
+
 
+        let arr3 = [1,2,3,4,5];
 
+        let [a,b] = arr3;
 
+        console.log(a,b);
 
+        
+        
+
 
+        // obj3.name = "lisi";
 
+        // obj3 = {};
 
+        // console.log(obj3);
 
+
 
+        // const arr2 = [];
 
+        
+    </script>
 
+</body>
 
+</html>

+ 52 - 0
7_阶段复习/html.html
View File 

@@ -0,0 +1,52 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="main.css">
 
+</head>
 
+<body>
 
+    <span>world</span>
 
+    <ul>
 
+        <li></li>
 
+    </ul>
 
+    <ol>
 
+        <li></li>
 
+    </ol>
 
+    <img src="" alt="">
 
+
 
+    <hr>
 
+
 
+    <a href="https://www.baidu.com" target="_blank">百度</a>
 
+
 
+
 
+    <DIV></DIV>
 
+    <lovecoding></lovecoding>
 
+    <div id="box" style="font-size: 40px;">hello</div>
 
+
 
+
 
+    <table>
 
+        <thead>
 
+            <tr>
 
+                <th>1</th>
 
+                <td>a</td>
 
+            </tr>
 
+        </thead>
 
+        <tbody>
 
+            <tr>
 
+                <td>2</td>
 
+                <th>b</th>
 
+            </tr>
 
+        </tbody>
 
+    </table>
 
+
 
+
 
+    <script>
 
+        var a = 10;
 
+        // var A = 10;
 
+        var oBox = document.getElementById("box");
 
+        oBox.style.color = "green";
 
+    </script>
 
+</body>
 
+</html>

+ 114 - 0
7_阶段复习/js.html
View File 

@@ -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>
 
+</head>
 
+<body>
 
+    <div>你好</div>
 
+    <script>
 
+        var oBox = document.getElementsByTagName("div")[0];
 
+        // oBox.onclick = function(){
 
+        //     console.log("hello");
 
+        // }
 
+        // oBox.innerText = "<span>hello</span>";
 
+        // oBox.innerHTML = "<span>hello</span>";
 
+        oBox.remove();
 
+
 
+        // oBox.addEventListener("click",function(){
 
+        //     console.log("hello");
 
+        // });
 
+
 
+        // var a = 10;
 
+        // function foo(){
 
+        //     var a = 20;
 
+        // }
 
+        // var b = 10;
 
+        // var c = b;
 
+        // b = 20;
 
+        // console.log(c);
 
+
 
+        // var arr1 = [1,2,3,4,5];
 
+        // var arr2 = arr1;
 
+        // arr1[0] = "hello";
 
+        // console.log(arr2);
 
+
 
+        // function foo(){
 
+        //     console.log("hello");
 
+        // }
 
+        // foo();
 
+
 
+        // var foo = function(){
 
+        //     console.log("hello");
 
+        // }
 
+        // (function(){
 
+        //     console.log("hello");
 
+        // })();
 
+
 
+        // console.log("a"+1);
 
+
 
+        // var obj = {
 
+        //     name:"hello",
 
+        //     age:10
 
+        // }
 
+        // var arr = [1,2,3,4,5];
 
+        // var str = "hello";
 
+
 
+        // delete obj.name;
 
+        // console.log(obj);
 
+
 
+        // console.log(typeof null);
 
+        // console.log(typeof str);
 
+        // console.log(typeof obj);
 
+        // console.log(typeof arr);
 
+        
+        // for(var key in obj){
 
+        //     console.log(obj[key]);
 
+        // }
 
+
 
+        // console.log(Array.prototype);
 
+
 
+        // var a = 1;
 
+        // switch(a){
 
+        //     case a>1:console.log(1);break;
 
+        //     case a>2:console.log(2);break;
 
+        //     default:console.log("default");break;
 
+        // }
 
+        // var a = false;
 
+        // var d = 0;
 
+        // var c = d||a;//或运算用作赋值操作，如果第一个值为真，则返回第一个值，否则返回第二个值
 
+        // console.log(c);
 
+
 
+        // var b = a>1?"hello":"world";
 
+
 
+        // var a = 10;
 
+        // console.log(a.toString());
 
+        // console.log(a+"");
 
+        
+        // var arr = [1,2,3,4,5];
 
+        // arr.push(6);
 
+        // // arr[5] = 6;
 
+        // console.log(arr);
 
+
 
+        // var obj = {
 
+        //     name:"hello",
 
+        //     age:10,
 
+        //     name1:"world"
 
+        // }
 
+        // var a = 1;
 
+        // console.log(obj['name'+a]);
 
+
 
+        try {
 
+            console.log(abc);
 
+        } catch (error) {
 
+            console.log(
 
+                error
 
+            )
 
+        }
 
+        console.log("hello");
 
+        // console.log(aaa);
 
+        // console.log("world");
 
+    </script>
 
+</body>
 
+</html>

+ 24 - 0
7_阶段复习/main.css
View File 

@@ -0,0 +1,24 @@
 
+div{
 
+    color: red;
 
+    float: none;
 
+}
 
+#box{
 
+    color: blue !important;
 
+    height: 200px;
 
+    width: 200px;
 
+    border:1px solid red;
 
+    text-align: center;
 
+    font-size: 40px;
 
+}
 
+#box:hover{
 
+    font-weight: bolder;
 
+}
 
+#box::after{
 
+    /* content: "hello"; */
 
+}
 
+span{
 
+    text-align: center;
 
+    border-width: 1px;
 
+    border-style: solid;
 
+    border-color: red;
 
+}

+ 39 - 0
8_CSS3/1_CSS3新属性.html
View File 

@@ -0,0 +1,39 @@
 
+<!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: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+            border-radius: 20px;
 
+            box-shadow: 10px 10px 1px black;
 
+
 
+            text-wrap: nowrap;
 
+            overflow: hidden;
 
+            text-overflow: ellipsis;
 
+
 
+            text-shadow: 3px 3px 1px blue;
 
+        }
 
+        .box2{
 
+           width: 200px;
 
+           height: 200px;
 
+           border:1px solid black; 
+           /* background-image: url("./img/image4.png");
 
+           background-size: 100px 100px;
 
+           background-repeat: no-repeat;
 
+           background-position: right bottom; */
 
+           background:red url("./img/image4.png") no-repeat right bottom/100px 100px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- <div class="box">
 
+        四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
 
+    </div> -->
 
+    <div class="box2"></div>
 
+</body>
 
+</html>

+ 34 - 0
8_CSS3/2_CSS3位移.html
View File 

@@ -0,0 +1,34 @@
 
+<!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: 400px;
 
+            border:2px solid black;
 
+            position: relative;
 
+        }
 
+        .box1{
 
+            position: absolute;
 
+            top: 50%;
 
+            left: 50%;
 
+            /* margin-top: -50px;
 
+            margin-left: -50px; */
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+            transform: translate(-50%,-50%);
 
+            /* transform: translateY(100px) translateX(100px); */
 
+            /* transform: translate(50%,50%); */
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="box1"></div>
 
+    </div>
 
+</body>
 
+</html>

+ 31 - 0
8_CSS3/3_CSS3旋转.html
View File 

@@ -0,0 +1,31 @@
 
+<!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: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+            transform: rotate(45deg);
 
+            /* transform-origin: 0 0; */
 
+            /* transform-origin: left bottom; */
 
+            transform-origin: -10px -10px;
 
+
 
+        }
 
+        .div1{
 
+            margin:100px auto;
 
+            width: 100px;
 
+            height: 100px;
 
+            border:2px solid blue;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="div1">
 
+        <div class="box"></div>
 
+    </div>
 
+</body>
 
+</html>

BIN
8_CSS3/img/image4.png
View File