From 1956fa9de67f20aa3f1ca77a3376bd8b90451afa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B1=9F=E6=96=87=E6=B7=AF?=
 <14131014+jiang-wenyu0212@user.noreply.gitee.com>
Date: Mon, 11 Nov 2024 16:44:38 +0800
Subject: [PATCH 1/2] 1107

---
 .../20241106-flex\350\241\245\345\205\205.md" |   0
 ...31\346\200\201\347\275\221\347\253\231.md" | 337 ++++++++++++++++++
 .../20241107-\345\270\203\345\261\200.md"     |  14 +
 3 files changed, 351 insertions(+)
 rename "\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/2024110~-flex\350\241\245\345\205\205.md" => "\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/20241106-flex\350\241\245\345\205\205.md" (100%)
 create mode 100644 "\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/20241106-\351\235\231\346\200\201\347\275\221\347\253\231.md"
 create mode 100644 "\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/20241107-\345\270\203\345\261\200.md"

diff --git "a/\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/2024110~-flex\350\241\245\345\205\205.md" "b/\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/20241106-flex\350\241\245\345\205\205.md"
similarity index 100%
rename from "\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/2024110~-flex\350\241\245\345\205\205.md"
rename to "\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/20241106-flex\350\241\245\345\205\205.md"
diff --git "a/\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/20241106-\351\235\231\346\200\201\347\275\221\347\253\231.md" "b/\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/20241106-\351\235\231\346\200\201\347\275\221\347\253\231.md"
new file mode 100644
index 00000000..bd7d33c3
--- /dev/null
+++ "b/\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/20241106-\351\235\231\346\200\201\347\275\221\347\253\231.md"
@@ -0,0 +1,337 @@
+## 没有采用任何程序开发的网站
+- 静态网站是没有采用任何程序开发的网站，纯粹采用HTML语言编写，不要求懂太多网站制作知识，使用一般的软件就可以制作网页了1。通俗的来讲，静态页面是随着HTML代码的生成，页面的内容和显示效果就基本不会发生变化（除非修改页面代码）2。静态网页适用于不经常更改内容的网站，加载速度快，但缺乏个性化和实时交互功能3。
+播放器
+ .i1{
+           width: 150px;
+           height: 150px;
+           background: url(../图片素材/flex-01.jpg);
+           border-radius: 10px;
+       }
+       .i2{
+           width: 150px;
+           height: 150px;
+           background: url(../图片素材/flex-02.jpg);
+           border-radius: 10px;
+       }
+       .i3{
+           width: 150px;
+           height: 150px;
+           background: url(../图片素材/flex-03.jpg);
+           border-radius: 10px;
+       }
+       .i4{
+           width: 150px;
+           height: 150px;
+           background: url(../图片素材/flex-04.jpg);
+           border-radius: 10px;
+       }
+       .i5{
+           width: 150px;
+           height: 150px;
+           background: url(../图片素材/flex-05.jpg);
+           border-radius: 10px;
+       }
+       .i6{
+           width: 150px;
+           height: 150px;
+           background: url(../图片素材/flex-06.jpg);
+           border-radius: 10px;
+       }
+       .i7{
+           width: 150px;
+           height: 150px;
+           background: url(../图片素材/flex-07.jpg);
+           border-radius: 10px;
+       }
+       .i8{
+           width: 150px;
+           height: 150px;
+           background: url(../图片素材/flex-08.jpg);
+           border-radius: 10px;
+       }
+       
+       .t1{
+           display: flex;
+           flex-direction: row;
+       }
+       .t2{
+           display: flex;
+           flex-direction: row;
+       }
+       .d1{
+           width: 48%;
+           margin: 2%;
+           float: left;
+           box-sizing: border-box;
+           margin-top: 20px;
+           
+           padding-top: 2px;
+           position: relative;
+       }
+       span{
+           position: absolute;
+           top: 120px;
+           left: 5px;
+           color: white;
+           font-size: small;
+       }
+       p{
+           width: 150px;
+           margin-top: 5px;
+           font-size: small;
+       }
+       @media only screen and (max-width:500px) and (min-width：0px){
+           .d1{
+               
+               margin:0 20px 0 0;
+               float: none;
+           }
+       }
+   </style>
+视频
+<style>
+       *{
+           margin: 0;
+           padding: 0;
+       }
+       .all{
+           width: 550px;
+           height: 700px;
+       }
+       
+       .top{
+           position: relative;
+           
+           height: 70px;
+           margin: 10px;
+       }
+       .img1{
+           width: 45px;
+           position: absolute;
+           top: 5px;
+           left: 0px;
+       }
+       .top1{
+           position: absolute;
+           top: 0px;
+           left: 55px;
+           font-size: 38px;
+           font-weight: 350px;
+       }
+       .img2{
+           width: 30px;
+           position: absolute;
+           top: 17px;
+           right: 80px;
+       }
+       .top2{
+           position: absolute;
+           top: 13px;
+           right: 5px;
+           font-size: 25px;
+           font-weight: 300;
+           color: red;
+       }
+       .middle{
+           margin: 10px;
+       }
+       .d1{
+           position: relative;
+           height: 180px;
+           
+       }
+       .syximg{
+           width: 250px;
+       }
+       .text{
+           
+           position: absolute;
+           top: 0;
+           right: 0px;
+       }
+       .t1{
+           width: 250px;
+           font-size: 24px;
+           font-weight: 400;
+       }
+       .t2{
+           width: 80px;
+           height: 30px;
+           position: absolute;
+           top: 75px;
+           left: 0;
+           background-color: rgb(168, 223, 245);
+           color: blue;
+           text-align: center;
+           line-height: 30px;
+           border-radius: 10%;
+       }
+       .mb1{
+           position: absolute;
+           top: 125px;
+           left: 0;
+       }
+       .mb2{
+           position: absolute;
+           top: 125px;
+           right: 0;
+       }
+   </style>
+笔记
+协议 http\https 主机地址 端口（默认为:80，个人为:8080或:8088） 访问路径 虚拟参数
+
+静态网站搭建必备条件
+
+具有公网IP地址的主机（服务器） 已经通过备案的域名
+
+在主机上部署网站 web服务器 nginx apache 已经写好的网站
+
+## 作业
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width= , initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .d0{
+            width: 550px;
+            height: 800px;
+            margin: 0 auto;
+            background-color: blueviolet;
+        }
+        .d0 .b1{
+            height: 55px;
+            display: flex;
+            line-height: 68px;
+        }
+        .p1{
+            width: 36px;
+            height: 37px;
+            margin: 15px;
+            margin-left: 0px;
+        }
+        .p1+span{
+            font-size: 30px;
+        }
+        .p2{
+            margin: 4px;
+            margin-top: 22px;
+            margin-left: 240px;
+            width: 26px;
+            height: 26px;
+        }
+        .p2+span{
+            font-size: 26px;
+            color: red;
+        }
+        .p3{
+            width: 210px;
+            height: 150px;
+            object-fit: cover;
+            margin: 1px;
+            margin-top: 28px;
+        }
+        .d2{
+            width: 280px;
+            height: 40px;
+            float: right;
+            font-size: 25px;
+            margin: 1px;
+            margin-top: 28px;
+            margin-right: 45px;
+        }
+        .d3{
+            color: red;
+            float: right;
+            width: 70px;
+            height: 26px;
+            background-color: rgb(252, 191, 191);
+            margin-top: -75px;
+            margin-right: 253px;
+        }
+        .d4{
+            font-size: 19px;
+            color: #999;
+            float: right;
+            margin-top: -35px;
+            margin-right: 80px;
+        }
+        .d4 span:last-child {
+            margin-left: 60px;
+        }
+    </style>
+</head>
+<body>
+    <div class="d0">
+    <div class="b1">
+        <img src="./img/icon-play.png" alt="" class="p1">
+        <span>热门视频</span>
+        <img src="./img/icon-sx2.png" alt="" class="p2">
+        <span>换一换</span>
+    </div>
+    <div class="d1">
+        <img src="./img/toutiao-02.jpg" alt="" class="p3">
+        <div class="d2"><span>无论做什么鱼：最忌放盐和料酒腌制</span></div>
+        <div class="d3">1万评论</div>
+        <div class="d4"><span>148万次观看</span><span>司马南频道</span></div>
+    </div>
+    </div>
+</body>
+</html>
+1. 经典圣杯布局
+<style>
+        *{
+            margin: 0;
+            padding: 0;
+        }
+        .top{
+            width: 100%;
+            height: 80px;
+            background-color: wheat;
+            text-align: center;
+        }
+        .mid{
+            width: 100%;
+            height: 500px;
+            background-color: red;
+            display: flex;
+            text-align: center;
+        }
+        .left{
+            width: 25%;
+            height: 500px;
+            background-color: green;
+        }
+        .middle{
+            width: 50%;
+            height: 500px;
+            background-color: white;
+            
+        }
+        .right{
+            width: 25%;
+            height: 500px;
+            background-color: purple;
+        }
+        @media  (max-width:500px) {
+            .mid{
+                display: grid;
+                
+            }
+            .middle{
+                width: 100%;
+                height: 300px;
+                
+                order: -1;
+            }
+            .left{
+                width: 100%;
+                height: 100px;
+            }
+            .right{
+                width: 100%;
+                height: 100px;
+            }
+        }
+    </style>
\ No newline at end of file
diff --git "a/\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/20241107-\345\270\203\345\261\200.md" "b/\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/20241107-\345\270\203\345\261\200.md"
new file mode 100644
index 00000000..4f258e19
--- /dev/null
+++ "b/\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/20241107-\345\270\203\345\261\200.md"
@@ -0,0 +1,14 @@
+## 网站布局
+- 大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。
+
+- 大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
+
+- lamp	虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。
+## HTML 布局 - 使用表格
+- 使用 HTML <table> 标签是创建布局的一种简单的方式。
+
+- 大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观
+- HTML 布局 - 有用的提示
+- Tip: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。如需学习更多有关 CSS 的知识，请访问我们的CSS 教程。
+
+- Tip: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。
\ No newline at end of file
-- 
Gitee


From 57528b996cda9777fe2e40b48afaf4d875456388 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B1=9F=E6=96=87=E6=B7=AF?=
 <14131014+jiang-wenyu0212@user.noreply.gitee.com>
Date: Mon, 11 Nov 2024 16:47:30 +0800
Subject: [PATCH 2/2] 1107

---
 .../flex\345\270\203\345\261\2002.html"       | 103 ++++++++++++++++++
 .../20241104-flex\350\241\245\345\205\205.md" |   0
 2 files changed, 103 insertions(+)
 create mode 100644 "\346\261\237\346\226\207\346\267\257/\344\275\234\344\270\232/flex\345\270\203\345\261\2002.html"
 rename "\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/20241106-flex\350\241\245\345\205\205.md" => "\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/20241104-flex\350\241\245\345\205\205.md" (100%)

diff --git "a/\346\261\237\346\226\207\346\267\257/\344\275\234\344\270\232/flex\345\270\203\345\261\2002.html" "b/\346\261\237\346\226\207\346\267\257/\344\275\234\344\270\232/flex\345\270\203\345\261\2002.html"
new file mode 100644
index 00000000..a421d3a4
--- /dev/null
+++ "b/\346\261\237\346\226\207\346\267\257/\344\275\234\344\270\232/flex\345\270\203\345\261\2002.html"
@@ -0,0 +1,103 @@
+<!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: 0px auto;
+            padding: 0px;
+        }
+        .box{
+            height: 664px;
+            width: 390px;
+            border: 1px solid;
+        }
+        .qwe{
+            height: 43px;
+            width: 390px;
+            border: 1px solid;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+        }
+        .shousuo{
+            width: 290px;
+            height: 22px;
+            border: 1px solid;
+        }
+        .my{
+            width: 30px;
+            height: 30px;
+            border: 1px solid;
+        }
+        .gaotie{
+            height: 80px;
+            width: 390px;
+            border: 1px solid;
+            background-image: url('Snipaste_2024-11-07_10-43-20.png');
+            background-size: cover;
+        }
+        .jd{
+            height: 72px;
+            width: 390px;
+            border: 1px solid;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+        .jdd{
+            height: 30px;
+            width: 30px;
+            border: 1px solid;
+        }
+        .zi{
+            width: 45px;
+            height: 15px;
+            border: 1px solid;
+            display: flex;
+        }
+        .jiudian{
+            height: 270px;
+            width: 390px;
+            border: 1px solid;
+        }
+        .wifi{
+            width: 390px;
+            height: 120px;
+            border: 1px solid;
+        }
+        .huodong{
+            width: 390px;
+            height: 70px;
+            border: 1px solid;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">
+        <div class="qwe">
+            <div class="shousuo"></div>
+            <div class="my"></div>
+        </div>
+        <div class="gaotie"></div>
+        <div class="jd">
+            <div class="jdd"></div>
+            <div class="jdd"></div>
+            <div class="jdd"></div>
+            <div class="jdd"></div>
+            <div class="jdd"></div>
+            <div class="zi"></div>
+            <div class="zi"></div>
+            <div class="zi"></div>
+            <div class="zi"></div>
+            <div class="zi"></div>
+        </div>
+        <div class="jiudian"></div>
+        <div class="wifi"></div>
+        <div class="huodong"></div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/20241106-flex\350\241\245\345\205\205.md" "b/\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/20241104-flex\350\241\245\345\205\205.md"
similarity index 100%
rename from "\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/20241106-flex\350\241\245\345\205\205.md"
rename to "\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/20241104-flex\350\241\245\345\205\205.md"
-- 
Gitee