Muxi-Studio · zlt-1021 · Nov 22, 2025
diff --git a/js/分块数组.html b/js/分块数组.html
@@ -0,0 +1,22 @@
+<!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>
+
+</body>
+<script>
+    function chunkArr(arr,size) {
+    let  result =[];
+    for(let i =0;i <= arr.length;i+= size){
+        const chunk =arr.slice(i,i+size);
+        result.push(chunk)
+    }return result;
+    }
+
+
+</script>
+</html>
diff --git a/js/数组扁平化.html b/js/数组扁平化.html
@@ -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>
+</head>
+<body>
+
+</body>
+<script>
+    let result = []
+    function flatten(arr){
+        for(let i = 0;i <=arr.length;i++){
+            const items = arr[i];
+            if(arr.isArr(items)) {
+                result=result.concat(flatten(items))
+            }else{
+                result = result.push(items)
+            }
+        }return result;
+    }
+    console.log(result);
+
+
+</script>
+</html>
diff --git a/web/1.png b/web/1.png
diff --git a/web/2.png b/web/2.png
diff --git a/web/3.png b/web/3.png
diff --git a/web/4.png b/web/4.png
diff --git a/web/5.png b/web/5.png
diff --git a/web/in (1).png b/web/in (1).png
diff --git a/web/in (2).png b/web/in (2).png
diff --git a/web/in.png b/web/in.png
diff --git a/web/三角形.png b/web/三角形.png
diff --git a/web/专栏.png b/web/专栏.png
diff --git a/web/九个点.png b/web/九个点.png
diff --git a/web/人脉.png b/web/人脉.png
diff --git a/web/加好友.png b/web/加好友.png
diff --git a/web/反向圆角正方形.png b/web/反向圆角正方形.png
diff --git a/web/图片.png b/web/图片.png
diff --git a/web/收藏.png b/web/收藏.png
diff --git a/web/活动.png b/web/活动.png
diff --git a/web/消息.png b/web/消息.png
diff --git a/web/用户-群组-F.png b/web/用户-群组-F.png
diff --git a/web/编辑文章-copy.png b/web/编辑文章-copy.png
diff --git a/web/网页.html b/web/网页.html
@@ -0,0 +1,285 @@
+<!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>
+        * {
+            padding: 0;
+            margin: 0;
+            box-sizing: border-box;
+        }
+
+        .body {
+            font-family: Arial, sans-serif;
+            background-color: #f5f5f5;
+            color: #333;
+        }
+
+        .container {
+            width: 100%;
+            background-color: #fff;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .nav-list {
+            display: flex;
+            align-items: center;
+            text-align: center;
+            justify-content: center;
+
+        }
+
+        .nav-list li {
+            list-style: none;
+
+        }
+
+        img {
+            width: 50px;
+            height: 50px;
+        }
+
+        .nav-list ul {
+            list-style: none;
+            display: flex;
+            justify-content: center;
+            padding: 20px;
+        }
+
+        .nav-list {
+            margin: 30px;
+        }
+
+        .li.search {
+            width: 100px;
+            height: 100px;
+        }
+
+        .nav-list li {
+            transition: color 0.3s;
+
+        }
+
+        .aside {
+            position: absolute;
+            left: 50px;
+        }
+
+        .first {
+            border: 1px solid gray;
+            width: 300px;
+            height: 100%;
+            margin: 20px;
+            background-color: #f5f5f5;
+        }
+
+        .second {
+            border: 1px solid gray;
+            width: 300px;
+            height: 100%;
+            margin: 20px;
+            background-color: #f5f5f5;
+        }
+
+        .third {
+            border: 1px solid gray;
+            width: 300px;
+            height: 100%;
+            margin: 20px;
+            background-color: #f5f5f5;
+        }
+
+        .forth {
+            border: 1px solid gray;
+            width: 300px;
+            height: 100%;
+            margin: 20px;
+            background-color: #f5f5f5;
+            text-decoration: none;
+            list-style: none;
+
+        }
+
+        .middle {
+            width: 800px;
+            height: 100%;
+            border: 1px solid gray;
+            background-color: #f5f5f5;
+            position: absolute;
+            left: 400px;
+        }
+
+
+        .nav-list li:hover {
+            color: black;
+            border-top: 2px solid black;
+            padding-top: 3px;
+        }
+        .banner {
+            width: 800px;
+            height: 400px;
+            overflow: hidden;
+            position: relative;
+            margin: 50px auto;
+            border: 2px solid black;
+        }
+        #li-list li {
+            list-style: none;
+            display: flex;
+            width: 800px;
+            height: 400px;  
+        }
+        #li-list li img {
+            width: 800px;
+            height: 400px;
+
+        }
+        #li-list {
+            width: 4000px;
+            height: 400px;
+            display: flex;
+            top: 20px;
+            position: absolute;
+            animation: move 20s linear infinite;    
+        }
+        @keyframes move {
+            0% {
+                left: 0;
+            }
+            100% {
+                left: -3200px;
+            }
+        }
+        .banner:hover #li-list {
+            animation-play-state: paused;       
+            cursor: pointer;
+        }
+        .right {
+            width: 300px;
+            height: 1000px;
+            background-color: #f5f5f5;
+            position: absolute;
+            right: 100px;
+            border: 1px solid gray;
+        }
+        .game {
+            border: 1px solid gray;
+        }
+        .ad2 {
+            width: 100%;
+            height:30PX;
+            background-color: aqua;
+             transition: color 0.3s;
+        }
+        .ad2over {
+            color: rgb(5, 68, 195);
+            height:35px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <div class="header">
+            <div class="nav-list">
+                <ul>
+                    <img src="in.png" alt="in" class="logo">
+                    <input type="text" class="serach" value="搜索">
+                    <li><img src="首页.png" alt="首页"><br><span>首页</span></li>
+                    <li><img src="人脉.png" alt="人脉"><br><span>人脉</span></li>
+                    <li><img src="职位svg.png" alt="职位"><br><span>职位</span></li>
+                    <li><img src="消息.png" alt="消息"><br><span>消息</span></li>
+                    <li><img src="通知.png" alt="通知"><br><span>通知</span></li>
+                    <li><img src="账号圆.png" alt="无"><br><span>我</span></li>
+                    <li><img src="九个点.png" alt="商务"><br><span>商务</span></li>
+                    <li><img src="反向圆角正方形.png"><br><span>试用高级用户（HK$0）</span></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    </div>
+
+    <div class="aside">
+        <div class="first">
+            <img src="账号圆.png" alt="e">
+            <h2>姓名</h2>
+            <p>地区</p>
+            <P>公司</P>
+        </div>
+        <div class="second">
+            <h2>好友</h2>
+            <p>拓展职场人脉</p>
+        </div>
+        <div class="third">
+            <p>解锁高级账号工具与洞察</p>
+            <b>试用高级账号（HK$ 0）</b>
+        </div>
+        <div class="forth">
+            <ul>
+                <li><a href="#">我的收藏</a></li>
+                <li><a href="#">群组</a></li>
+                <li><a href="#">专栏</a></li>
+                <li><a href="#">活动</a></li>
+            </ul>
+        </div>
+    </div>
+
+    <div class="middle">
+        <div class="top">
+            <img src="账号圆.png">
+            <input type="text" class="shuru" value="发动态"><br>
+            <a href="#"><img src="视频.png"><span>视频</span></a>
+            <a href="#"><img src="图片.png"><span>图片</span></a>
+            <a href="#"><img src="编辑文章-copy.png"><span>写文章</span></a>
+
+
+        </div>
+        <div class="text">
+            <h2>我对前端</h2>
+            <p>有爱有恨，呜呜呜</p>
+        </div>
+        <div class="banner">
+            <ul id="li-list">
+                <li><img src="1.png" alt="wu"></li>
+                <li><img src="2.png" alt="wu"></li>
+                <li><img src="3.png" alt="smile"></li>
+                <li><img src="5.png" alt="smile"></li>
+                <li><img src="4.png" alt="smile"></li>
+                <li><img src="1.png" alt="wu"></li>
+            </ul>
+
+        </div>
+    </div>
+    <div class="right">
+        <h1>领英资讯</h1>
+        <h3>热门故事</h3>
+        <p>今天被试题痛扁</p>
+        <p>今天被试题痛扁</p>
+        <p>今天被试题痛扁</p>
+     <div class="game">
+        <h2>今日游戏</h2>
+        <p>感受绝望</p>
+        <p>感受绝望</p>
+        <p>感受绝望</p>
+        <p>感受绝望</p>
+     </div>
+    <div class="ad">
+        <button class="ad1"><a href="https://www.bilibili.com/video/BV1Y84y1L7Nn/?spm_id_from=333.337.search-card.all.click&vd_source=75361e6766a2ac06272893ee84ff67ac">广告...</a></button>
+        <h3>黑马程序员</h3>
+        <p>代码敲到烂，月薪能过万</p>
+        <button class="ad2">关注</button>
+    </div>
+
+ </div>
+
+
+
+
+
+
+</body>
+
+</html>
diff --git a/web/群组.png b/web/群组.png
diff --git a/web/职位svg.png b/web/职位svg.png
diff --git a/web/视频.png b/web/视频.png
diff --git a/web/账号圆.png b/web/账号圆.png
diff --git a/web/通知.png b/web/通知.png
diff --git a/web/首页.png b/web/首页.png