diff --git "a/\346\235\250\346\210\220\350\261\252/css/20241106-\346\220\272\347\250\213\346\211\213\346\234\272\347\253\257.css" "b/\346\235\250\346\210\220\350\261\252/css/20241106-\346\220\272\347\250\213\346\211\213\346\234\272\347\253\257.css"
new file mode 100644
index 0000000000000000000000000000000000000000..2a874b569231407d9e40bb3c26581bcceea95b88
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/css/20241106-\346\220\272\347\250\213\346\211\213\346\234\272\347\253\257.css"
@@ -0,0 +1,307 @@
+.total{
+    display: flex;
+    justify-content: center;
+}
+.all{
+    width: 389px;
+    height: 1110px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-left: -1px;
+}
+.one{
+    width: 389px;
+    height: 55px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid rgb(211,212,212);
+    background-color: rgb(244,244,244);
+    position: fixed;
+    top:0px;
+}
+.one1{
+    width: 309px;
+    height: 25px;
+    margin-left: 20px;
+    box-shadow: 0 0 5px rgb(170, 166, 166);
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.o1{
+    width: 20px;
+    height: 20px;
+    background-image: url(../img/20241104/14.png);
+    background-position: 65.934% 89.03%;
+    background-repeat: no-repeat;
+    background-size: 125px;
+    margin-left: 10px;
+}
+.o2{
+    width: 260px;
+    height: 26px;
+    color: rgb(139,139,139);
+    margin-left: 10px;
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+}
+.one2{
+    width: 40px;
+    height: 50px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.o3{
+    width: 30px;
+    height: 30px;
+    background-image: url(../img/20241104/14.png);
+    background-repeat: no-repeat;
+    background-position: 72.561% 63.98%;
+    background-size: 125px;
+}   
+.o4{
+    width: 30px;
+    font-size: 12px;
+    color: rgb(14,159,220);
+    font-weight: bolder;
+}
+.two{
+    width: 389px;
+    height: 85px;
+    background-image: url(../img/20241104/24.jpg);
+    background-size: 430px;
+    background-repeat: no-repeat;
+    margin-top: 48px;
+}
+
+.three{
+    width: 389px;
+    height: 100px;
+    display: flex;
+    justify-content: space-around;
+}
+.t1{
+    width: 60px;
+    height: 100px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+}
+.t2{
+    width: 40px;
+    height: 40px;
+    background-image: url(../img/20241104/15.png);
+    background-repeat: no-repeat;
+    background-size: 40px;
+    margin-top: 15px;
+}
+.t3{
+    width: 60px;
+    height: 40px;
+    font-size: 14px;
+}
+
+.four{
+    width: 389px;
+    height: 110px;
+    display: flex;
+    background:linear-gradient(to right,rgb(250,91,86),rgb(251,149,78));
+    border-radius: 20px 20px 0 0;
+}
+.four1{
+    flex: 129;
+    height: 110px;
+    display: flex;
+    flex-direction: column;
+}
+.f1{
+    width: 129px;
+    height: 55px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 15px;
+    color: white;
+}
+.f2{
+    width: 129px;
+    height: 55px;
+    background-image: url(../img/20241104/16.png);
+    background-size: 120px;
+    background-repeat: no-repeat;
+    background-position: 5px 0;
+}
+.four2{
+    flex: 1;
+    height: 110px;
+    background-color: white;
+}
+.four3{
+    flex: 129;
+    height: 110px;
+    display: flex;
+    flex-direction: column;
+}
+.f3{
+    flex: 64;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    font-size: 15px;
+}
+.f4{
+    flex: 1;
+    background-color: white;
+}
+.five{
+    width: 389px;
+    height: 110px;
+    display: flex;
+    background:linear-gradient(to right,rgb(76,147,236),rgb(83,186,237));
+    margin-top: 3.05px;
+}
+.six{
+    width: 389px;
+    height: 110px;
+    display: flex;
+    background:linear-gradient(to right,rgb(58,196,166),rgb(105,211,95));
+    border-radius: 0 0 20px 20px;
+    margin-top: 3.05px;
+}
+.seven{
+    width: 389px;
+    height: 162px;
+    display: flex;
+    flex-direction: column;
+}
+.seven1{
+    width: 389px;
+    height: 70px;
+    display: flex;
+    justify-content: space-around;
+    margin-top: 20px;
+}
+.seven2{
+    width: 389px;
+    height: 70px;
+    display: flex;
+    justify-content: space-around;
+}
+.s1{
+    width: 50px;
+    height: 60px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+.s2{
+    width: 38px;
+    height: 32px;
+    background-image: url(../img/20241104/13.png);
+    background-size: 40px;
+}
+.s3{
+    width: 42px;
+    height: 20px;
+    font-size: 14px;
+}
+.eight{
+    width: 389px;
+    height: 65px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 0 5px rgb(170, 166, 166);
+}
+.eight1{
+    width: 85px;
+    height: 25px;
+    margin-left: 20px;
+    background-image: url(../img/20241104/17.png);
+    background-position: 0 45.882%;
+    background-size: 90px;
+    background-repeat: no-repeat;
+}
+.eight2{
+    width: 130px;
+    height: 30px;
+    margin-right: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: linear-gradient(to right,rgb(248,86,116),rgb(252,106,183));
+    border-radius: 20px;
+    color: white;
+    padding-left: 5px;
+}
+.nine{
+    width: 389px;
+    height: 310px;
+    display: flex;
+    border-bottom: 1px solid rgb(244,244,244);
+}
+.nine1{
+    flex: 194;
+}
+.nine2{
+    flex: 1;
+    background-color: rgb(244,244,244);
+}
+.n1{
+    width: 194px;
+    height: 135px;
+    background-size: 195px;
+}
+.n2{
+    width: 194px;
+    height: 1px;
+    background-color: rgb(244,244,244);
+}
+.n3{
+    width: 194px;
+    height: 85px;
+    background-size: 195px;
+    background-repeat: no-repeat;
+}
+.img1{
+    background-position: 0 0;
+}
+.img2{
+    background-position: 0 -40px;
+}
+.img3{
+    background-position: 0 -80px;
+}
+.img4{
+    background-position: 0 -120px;
+}
+.img5{
+    background-position: 0 -160px;
+} 
+.img6{
+    background-image: url(../img/20241104/18.jpg);
+}
+.img7{
+    background-image: url(../img/20241104/19.jpg);
+}
+.img8{
+    background-image: url(../img/20241104/20.jpg);
+}
+.img9{
+    background-image: url(../img/20241104/22.jpg);
+}
+.img10{
+    background-image: url(../img/20241104/21.jpg);
+}
+.img11{
+    background-image: url(../img/20241104/23.jpg);
+}
+
diff --git "a/\346\235\250\346\210\220\350\261\252/css/20241107-\344\272\254\344\270\234.css" "b/\346\235\250\346\210\220\350\261\252/css/20241107-\344\272\254\344\270\234.css"
new file mode 100644
index 0000000000000000000000000000000000000000..a020adc1e1d9029249b7e30155b215a6ca6060ba
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/css/20241107-\344\272\254\344\270\234.css"
@@ -0,0 +1,382 @@
+* {
+    margin: 0px;
+    padding: 0px;
+}
+
+.content {
+    width: 389px;
+    height: 930px;
+    display: flex;
+    flex-direction: column;
+}
+
+.navigation {
+    width: 389px;
+    height: 45px;
+    background-color: rgb(51, 52, 51);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.n1 {
+    width: 12px;
+    height: 12px;
+    background-image: url(../img/20241106/22.png);
+    background-size: 12px;
+    margin-left: 10px;
+}
+
+.n2 {
+    width: 34px;
+    height: 34px;
+    background-image: url(../img/20241106/18.png);
+    background-size: 34px;
+}
+
+.n3 {
+    color: white;
+    font-size: 13px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.n4 {
+    width: 100px;
+    height: 45px;
+    color: white;
+    font-size: 14px;
+    background-color: rgb(244, 53, 21);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.search {
+    width: 389px;
+    height: 40px;
+    background-color: rgb(195, 10, 11);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: sticky;
+    top: 0px;
+}
+
+.search1 {
+    width: 24px;
+    height: 22px;
+    background-image: url(../img/20241106/19.png);
+    background-size: 25px;
+    margin-left: 20px;
+    background-repeat: no-repeat;
+}
+
+.search2 {
+    width: 290px;
+    height: 30px;
+    background-color: rgb(255, 255, 255);
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    border-radius: 25px;
+}
+
+.search3 {
+    width: 27px;
+    height: 18px;
+    color: white;
+    font-size: 12px;
+    margin-right: 7px;
+}
+
+.s1 {
+    width: 22px;
+    height: 18px;
+    background-image: url(../img/20241106/20.png);
+    background-size:22px;
+    background-repeat: no-repeat;
+    margin-left: 14px;
+}
+
+.s2 {
+    width:2px;
+    height: 18px;
+    background-color: rgb(232,232,232);
+    margin-left: 8px;
+}
+
+.s3 {
+    width: 18px;
+    height: 18px;
+    background-image: url(../img/20241106/21.png);
+    background-position: 44.892%  0;
+    background-size: 245px;
+    margin-left: 10px;
+    background-repeat: no-repeat;
+}
+
+.s4 {
+    color: rgb(136, 133, 135);
+    margin-left: 5px;
+    font-size: 12px;
+}
+
+.ad {
+    width: 389px;
+    height: 278px;
+    background-color: rgb(195,10,11);
+}
+
+.ad1{
+    width: 389px;
+    height: 155px;
+    background-image: url(../img/20241106/29.png);
+    background-size: 390px;
+    background-repeat: no-repeat;
+    box-shadow: 0 0 5px white;
+}
+.ad2{
+    width: 389px;
+    height: 123px;
+    display: flex;
+    justify-content: center;
+    padding-top: 5px;
+}
+.ad3{
+    width: 95px;
+    height: 123px;
+    background-repeat: no-repeat;
+    background-size: 94px;
+    background-image: url(../img/20241106/4.png);
+}
+.ad4{
+    width: 203px;
+    height: 123px;
+    background-size: 203px;
+    background-repeat: no-repeat;
+    background-image: url(../img/20241106/2.png);
+}
+.ad5{
+    background-size: 94px;
+    background-repeat: no-repeat;
+    width: 95px;
+    height: 123px;
+    background-image: url(../img/20241106/1.png);
+}
+.supermarket {
+    width: 389px;
+    height: 150px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+.s6{
+    width: 389px;
+    height: 60px;
+    display: flex;
+    justify-content: space-around;
+}
+.s7{
+    width: 40px;
+    height: 60px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+}
+.s8{
+    width: 32px;
+    height: 32px;
+    background-size: 33px;
+}
+.s9{
+    width: 50px;
+    height: 25px;
+    color: rgb(200,197,195);
+    font-size: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.price {
+    width: 389px;
+    height: 140px;
+    display: flex;
+    flex-direction: column;
+}
+.p1{
+    width: 389px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.p3{
+    width: 90px;
+    height: 30px;
+    font-size: 12px;
+    font-weight: bolder;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: -4px;
+}
+.p11{
+    width: 167px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    margin-left: -120px;
+}
+.p4{
+    width: 30px;
+    height: 20px;
+    font-size: 12px;
+    font-weight: bolder;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 0px;
+}
+.p5{
+    width: 30px;
+    height: 30px;
+    background-repeat: no-repeat;
+    background-size: 30px;
+    background-image: url(../img/20241106/16.png);
+    margin-left: 0px;
+}
+.p6{
+    width: 90px;
+    height: 30px;
+    font-size: 12px;
+    font-weight: bolder;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 0px;
+}
+.p7{
+    width: 17px;
+    height: 17px;
+    background-repeat: no-repeat;
+    background-size: 16px;
+    background-image: url(../img/20241106/15.png);
+    margin-right: 8px;
+}
+.p2{
+    width: 389px;
+    height: 100px;
+    display: flex;
+    justify-content: space-between;
+}
+.p8{
+    width: 64px;
+    height: 90px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+.p9{
+    width: 64px;
+    height: 64px;
+    background-size: 63px;
+}
+.p10{
+    width: 64px;
+    height: 20px;
+    color: red;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    font-weight: bolder;
+}
+.commodity {
+    width: 389px;
+    height: 190px;
+    display: flex;
+}
+.c1{
+    flex: 1;
+    height: 100%;
+    background-image: url(../img/20241106/23.webp);
+    background-size: 190px;
+}
+.c2{
+    flex: 1;
+    height: 100%;
+    background-image: url(../img/20241106/24.webp);
+    background-size: 190px;
+}
+.directory {
+    width: 389px;
+    height: 125px;
+    position: fixed;
+    bottom: 0px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    background-color: rgb(255,255,255);
+    box-shadow: 0 -2px 5px rgb(203, 201, 200) ;
+}
+.d1{
+    width: 76px;
+    height: 30px;
+    color: rgb(140,138,137);
+    font-size: 16px;
+    font-weight: bolder;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.img1{
+    background-image: url(../img/20241106/14.png);
+}
+.img2{
+    background-image: url(../img/20241106/12.png);
+}
+.img3{
+    background-image: url(../img/20241106/11.png);
+}
+.img4{
+    background-image: url(../img/20241106/10.png);
+}
+.img5{
+    background-image: url(../img/20241106/9.png);
+}
+.img6{
+    background-image: url(../img/20241106/8.png);
+}
+.img7{
+    background-image: url(../img/20241106/7.png);
+}
+.img8{
+    background-image: url(../img/20241106/6.png);
+}
+.img9{
+    background-image: url(../img/20241106/5.png);
+}
+.img10{
+    background-image: url(../img/20241106/13.png);
+}
+.img11{
+    background-image: url(../img/20241106/31.jpg);
+}
+.img12{
+    background-image: url(../img/20241106/32.jpg);
+}
+.img13{
+    background-image: url(../img/20241106/33.jpg);
+}
+.img14{
+    background-image: url(../img/20241106/34.jpg);
+}
+.img15{
+    background-image: url(../img/20241106/35.jpg);
+}
+.img16{
+    background-image: url(../img/20241106/36.jpg);
+}
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241104/1.png" "b/\346\235\250\346\210\220\350\261\252/img/20241104/1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c87d350f3ef7dcd681ca0d640852d52b6e6146a9
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241104/1.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241104/10.png" "b/\346\235\250\346\210\220\350\261\252/img/20241104/10.png"
new file mode 100644
index 0000000000000000000000000000000000000000..90397f22a7692bd8d87b1c55c11acccee885aced
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241104/10.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241104/11.png" "b/\346\235\250\346\210\220\350\261\252/img/20241104/11.png"
new file mode 100644
index 0000000000000000000000000000000000000000..42f24045e7f7595c562edd4e876ae23144285bbd
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241104/11.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241104/12.jpeg" "b/\346\235\250\346\210\220\350\261\252/img/20241104/12.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..a50ce45c112cc151284427f4de0fd771073aba4f
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241104/12.jpeg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241104/13.png" "b/\346\235\250\346\210\220\350\261\252/img/20241104/13.png"
new file mode 100644
index 0000000000000000000000000000000000000000..2604c55046991b9b9498e97fac507a191c4871c6
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241104/13.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241104/14.png" "b/\346\235\250\346\210\220\350\261\252/img/20241104/14.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c62ccfdccb21c8fa3ebd6030e618b23a8ea91356
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241104/14.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241104/15.png" "b/\346\235\250\346\210\220\350\261\252/img/20241104/15.png"
new file mode 100644
index 0000000000000000000000000000000000000000..6ba0af2e63ded49e6ad26093731b427564dde2a2
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241104/15.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241104/16.png" "b/\346\235\250\346\210\220\350\261\252/img/20241104/16.png"
new file mode 100644
index 0000000000000000000000000000000000000000..37da0fcb9ce4b14338d49e52b919485f69e003ca
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241104/16.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241104/17.png" "b/\346\235\250\346\210\220\350\261\252/img/20241104/17.png"
new file mode 100644
index 0000000000000000000000000000000000000000..3d4f024637b08a9f8e400d826fab25eba6d3f059
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241104/17.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241104/18.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241104/18.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..7705aa7501e842150d1ce783b4bf173532f37b66
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241104/18.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241104/19.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241104/19.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..31410a68c7ac02402e4036bc8f734ab0837aa9f3
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241104/19.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241104/2.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241104/2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..6fd6241aa7035df30db88d15987e8d0713d4b616
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241104/2.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241104/20.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241104/20.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..3e18c9f1ed4b4c4bd548e39a9d7521b8bd690c75
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241104/20.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241104/21.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241104/21.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..efed93472231569317f26d6527cf6e762a6868f9
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241104/21.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241104/22.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241104/22.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..15cef359fec0483b5ace790c80cce21e596aa5c7
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241104/22.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241104/23.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241104/23.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..3852d753c67345fe309e2d245015d269b8718288
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241104/23.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241104/24.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241104/24.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..069ce0537d7d45db2c9048f76b79e4abe25280b9
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241104/24.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241104/3.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241104/3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..20aad004aef3db4620e968c68e6ec46cf8561e2c
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241104/3.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241104/4.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241104/4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..1dedde074d0a4dd594e0202935f767e115fed977
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241104/4.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241104/5.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241104/5.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e0f855a6d755756b600197e011c379b331750c59
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241104/5.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241104/6.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241104/6.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..0f61aeb8d5d4fd8c633a03adcf79e644c9462361
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241104/6.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241104/7.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241104/7.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..2360b947f7eb61cf485d887da190e231085eaf89
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241104/7.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241104/8.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241104/8.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..b478cba7e53eda154668f6bd440c23e1ba147a28
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241104/8.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241104/9.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241104/9.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..3e9cfb4b00c6616b836bb1c48d4910c2e547910c
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241104/9.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/1.png" "b/\346\235\250\346\210\220\350\261\252/img/20241106/1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..7181d8704f4bb5481600249529d0d47461eb6c36
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/1.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/10.png" "b/\346\235\250\346\210\220\350\261\252/img/20241106/10.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f5b3346072bed2fbd449830b1f61a6333c6d297a
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/10.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/11.png" "b/\346\235\250\346\210\220\350\261\252/img/20241106/11.png"
new file mode 100644
index 0000000000000000000000000000000000000000..897ff6ece4f5009aa4253932d1525c812ccd2e3c
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/11.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/12.png" "b/\346\235\250\346\210\220\350\261\252/img/20241106/12.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5fb535f4c9aaa0124a742f5e5983072f8da69dd1
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/12.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/13.png" "b/\346\235\250\346\210\220\350\261\252/img/20241106/13.png"
new file mode 100644
index 0000000000000000000000000000000000000000..eaedd3706bb9247a360a84e25d6f3f30962a0ce7
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/13.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/14.png" "b/\346\235\250\346\210\220\350\261\252/img/20241106/14.png"
new file mode 100644
index 0000000000000000000000000000000000000000..afd396d51cdd9e2a59579c2eec7b22ef0307d458
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/14.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/15.png" "b/\346\235\250\346\210\220\350\261\252/img/20241106/15.png"
new file mode 100644
index 0000000000000000000000000000000000000000..48dc7c911c9c0029fe2db88d37afb1052f45f257
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/15.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/16.png" "b/\346\235\250\346\210\220\350\261\252/img/20241106/16.png"
new file mode 100644
index 0000000000000000000000000000000000000000..b62e195b30dd5f677fc0162c4e2ee86548def84d
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/16.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/17.png" "b/\346\235\250\346\210\220\350\261\252/img/20241106/17.png"
new file mode 100644
index 0000000000000000000000000000000000000000..2db3187a776bce76616e7dfe7070b7edf114f4c2
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/17.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/18.png" "b/\346\235\250\346\210\220\350\261\252/img/20241106/18.png"
new file mode 100644
index 0000000000000000000000000000000000000000..a11cd81570aa1e8d840e4d634cdc14e728154583
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/18.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/19.png" "b/\346\235\250\346\210\220\350\261\252/img/20241106/19.png"
new file mode 100644
index 0000000000000000000000000000000000000000..0f1fc575dabab1d97f7d4b7c90441f93f0548acb
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/19.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/2.png" "b/\346\235\250\346\210\220\350\261\252/img/20241106/2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c36850b0c0c13cbab67b8bdc1fb1c8083c6a1c33
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/2.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/20.png" "b/\346\235\250\346\210\220\350\261\252/img/20241106/20.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f2554c7f251ea2af09090635c93dadd36b90621a
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/20.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/21.png" "b/\346\235\250\346\210\220\350\261\252/img/20241106/21.png"
new file mode 100644
index 0000000000000000000000000000000000000000..cd7d4b80e0acd94364db0d8d0c21dd1f856036bd
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/21.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/22.png" "b/\346\235\250\346\210\220\350\261\252/img/20241106/22.png"
new file mode 100644
index 0000000000000000000000000000000000000000..545522af337dd7f0451bd2225c72d9faf99a6e62
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/22.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/23.webp" "b/\346\235\250\346\210\220\350\261\252/img/20241106/23.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..c04d006d35c38befc0c77c7227ae85d9f7137e93
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/23.webp" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/24.webp" "b/\346\235\250\346\210\220\350\261\252/img/20241106/24.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..acc2fc0a513d9d698faae903d12d6a6c6f5b7a56
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/24.webp" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/25.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241106/25.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e4e5295e1a542031b13dc0a3949d3f0c3707d498
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/25.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/26.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241106/26.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..cf078af14cbc46c2546b30434c5749f2eb66dac9
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/26.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/27.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241106/27.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e2079826d262fbdae1ad8660baebc18095fe19f1
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/27.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/28.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241106/28.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..326ad5d28f5b066531f52f859f9a7676d6b2a44d
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/28.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/29.png" "b/\346\235\250\346\210\220\350\261\252/img/20241106/29.png"
new file mode 100644
index 0000000000000000000000000000000000000000..b00147460cc4b80c7ed692540f1185c0eac70da7
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/29.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/3.gif" "b/\346\235\250\346\210\220\350\261\252/img/20241106/3.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..43ca2c98c6419a001ad85a2cf459d79ee5136343
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/3.gif" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/30.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241106/30.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..03e4a4465b0779b19a1715041ae3661dff903da7
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/30.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/31.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241106/31.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..cd06695e68a6380705723463b87f5e33f95bc2d6
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/31.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/32.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241106/32.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f6794a0691e8c0487882ccb92c288c8807561c5b
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/32.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/33.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241106/33.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..6ecdb70678caad80e8bb7c73a03d544c4d876a31
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/33.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/34.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241106/34.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..d6ffd460c799077d72f16d2b5826146dcbdbdc56
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/34.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/35.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241106/35.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..256e98fcc5098797303d76429ceb3c045f4aa28c
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/35.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/36.jpg" "b/\346\235\250\346\210\220\350\261\252/img/20241106/36.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e801b86302ea0ae1107a37d070b82e52fcb34388
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/36.jpg" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/4.png" "b/\346\235\250\346\210\220\350\261\252/img/20241106/4.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5c861440d7d19d639217ddb86cf917f301e5213a
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/4.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/5.png" "b/\346\235\250\346\210\220\350\261\252/img/20241106/5.png"
new file mode 100644
index 0000000000000000000000000000000000000000..bc45f1dc8f10630bb5a3e8d7f15d3bb309d79747
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/5.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/6.png" "b/\346\235\250\346\210\220\350\261\252/img/20241106/6.png"
new file mode 100644
index 0000000000000000000000000000000000000000..fad5653d8b4705ce0cac074080476e1aef0cbab2
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/6.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/7.png" "b/\346\235\250\346\210\220\350\261\252/img/20241106/7.png"
new file mode 100644
index 0000000000000000000000000000000000000000..07292add50dc8830f48666d2191b757e9ad489e6
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/7.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/8.png" "b/\346\235\250\346\210\220\350\261\252/img/20241106/8.png"
new file mode 100644
index 0000000000000000000000000000000000000000..cde9a8868388c1e9ff682f7cd03a50c827d552a8
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/8.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/img/20241106/9.png" "b/\346\235\250\346\210\220\350\261\252/img/20241106/9.png"
new file mode 100644
index 0000000000000000000000000000000000000000..fac33e2de6707981af196fedfffc59eb9e868b51
Binary files /dev/null and "b/\346\235\250\346\210\220\350\261\252/img/20241106/9.png" differ
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241028-flex\347\255\233\345\255\220\345\270\203\345\261\200.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241028-flex\347\255\233\345\255\220\345\270\203\345\261\200.html"
index 13615b8538c5344a459c67483ef2be94307623ee..817706e5490e0c075b5a13a65dccfbacd236e35c 100644
--- "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241028-flex\347\255\233\345\255\220\345\270\203\345\261\200.html"
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241028-flex\347\255\233\345\255\220\345\270\203\345\261\200.html"
@@ -38,11 +38,13 @@
         }
 
         .t1 {
-            margin-left: -54px;
+            width: 80px;
         }
 
         .t2 {
-            margin-right: -54px;
+            width: 80px;
+            display: flex;
+            justify-content: right;
         }
 
         .f1 {
@@ -55,17 +57,18 @@
         }
 
         .f2 {
-            width: 100px;
+            width: 33px;
             height: 50px;
             display: flex;
-            justify-content: space-around;
             align-items: center;
+            justify-content: left;
         }
-        .f2 div:nth-child(1){
-            margin-left: -18px;
-        }
-        .f2 div:nth-child(2){
-            margin-right: -18px;
+        .f3{
+            width: 33px;
+            height: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: right;
         }
     </style>
 </head>
@@ -83,11 +86,15 @@
     </div> -->
 
     <!-- 三点 -->
-    <!-- <div class="three">
-        <div class="t1 round"></div>
+    <div class="three">
+        <div class="t1">
+            <div class="round"></div>
+        </div>
         <div class="round"></div>
-        <div class="t2 round"></div>
-    </div> -->
+        <div class="t2">
+            <div class="round"></div>
+        </div>
+    </div>
 
     <!-- 四点 -->
     <!-- <div class="four">
@@ -154,9 +161,13 @@
             <div class="round"></div>
             <div class="round"></div>
         </div>
-        <div class="f2">
-            <div class="round"></div>
-            <div class="round"></div>
+        <div class="f1">
+            <div class="f2">
+                <div class="round"></div>
+            </div>
+            <div class="f3">
+                <div class="round"></div>
+            </div>
         </div>
         <div class="f1">
             <div class="round"></div>
@@ -166,7 +177,7 @@
     </div> -->
 
     <!-- 九点 -->
-      <div class="five">
+      <!-- <div class="five">
         <div class="f1">
             <div class="round"></div>
             <div class="round"></div>
@@ -178,11 +189,11 @@
             <div class="round"></div>
         </div>
         <div class="f1">
-            <div class="round"></div>
+            <div class="round"></div>  
             <div class="round"></div>
             <div class="round"></div>
         </div>
-    </div>
+    </div> -->
 </body>
 
 </html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241104-\344\273\212\346\227\245\345\244\264\346\235\241.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241104-\344\273\212\346\227\245\345\244\264\346\235\241.html"
new file mode 100644
index 0000000000000000000000000000000000000000..f74fad1f3e9999b947588b40728166914c90b001
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241104-\344\273\212\346\227\245\345\244\264\346\235\241.html"
@@ -0,0 +1,250 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .a {
+            display: flex;
+            justify-content: center;
+        }
+
+        .all {
+            width: 600px;
+            height: 920px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+        }
+
+        .one {
+            width: 600px;
+            height: 140px;
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .o1 {
+            width: 220px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .o2 {
+            width: 40px;
+            height: 40px;
+            background-image: url(../img/20241104/10.png);
+            background-repeat: no-repeat;
+            background-size: 40px;
+        }
+
+        .o3 {
+            width: 160px;
+            height: 53px;
+            font-size: 40px;
+        }
+
+        .o4 {
+            width: 115px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .o5 {
+            width: 30px;
+            height: 30px;
+            background-image: url(../img/20241104/11.png);
+            background-size: 30px;
+            background-repeat: no-repeat;
+        }
+
+        .o6 {
+            width: 75px;
+            height: 34px;
+            font-size: 25px;
+            color: red;
+        }
+
+        .two {
+            width: 600px;
+            height: 180px;
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .t1 {
+            width: 235px;
+            height: 180px;
+            background-image: url(../img/20241104/12.jpeg);
+            background-size: 300px;
+            background-repeat: no-repeat;
+            background-position-x: -30px;
+        }
+
+        .t7 {
+            width: 365px;
+            height: 180px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .t2 {
+            width: 335px;
+            height: 90px;
+            font-size: 30px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .t3 {
+            width: 335px;
+            height: 30px;
+        }
+
+        .t31 {
+            width: 80px;
+            height: 30px;
+            color: red;
+            background-color: rgb(255, 242, 242);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 10%;
+        }
+
+        .t4 {
+            width: 335px;
+            height: 45px;
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .t5 {
+            width: 120px;
+            height: 45px;
+            font-size: 20px;
+            color: rgb(160, 160, 160);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .t6 {
+            width: 100px;
+            height: 45px;
+            font-size: 20px;
+            color: rgb(160, 160, 160);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="a">
+        <div class="all">
+            <div class="one">
+                <div class="o1">
+                    <div class="o2"></div>
+                    <div class="o3">热门视频</div>
+                </div>
+                <div class="o4">
+                    <div class="o5"></div>
+                    <div class="o6">换一换</div>
+                </div>
+            </div>
+            <div class="two">
+                <div class="t1"></div>
+                <div class="t7">
+                    <div class="t2">
+                        无论做什么鱼：最忌放盐和料酒研制
+                    </div>
+                    <div class="t3">
+                        <div class="t31">
+                            1万评论
+                        </div>
+                    </div>
+                    <div class="t4">
+                        <div class="t5">
+                            148万次观看
+                        </div>
+                        <div class="t6">
+                            司马南频道
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="two">
+                <div class="t1"></div>
+                <div class="t7">
+                    <div class="t2">
+                        无论做什么鱼：最忌放盐和料酒研制，大厨教你…
+                    </div>
+                    <div class="t3">
+                        <div class="t31">
+                            1万评论
+                        </div>
+                    </div>
+                    <div class="t4">
+                        <div class="t5">
+                            148万次观看
+                        </div>
+                        <div class="t6">
+                            司马南频道
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="two">
+                <div class="t1"></div>
+                <div class="t7">
+                    <div class="t2">
+                        无论做什么鱼：最忌放盐和料酒研制
+                    </div>
+                    <div class="t3">
+                        <div class="t31">
+                            1万评论
+                        </div>
+                    </div>
+                    <div class="t4">
+                        <div class="t5">
+                            148万次观看
+                        </div>
+                        <div class="t6">
+                            司马南频道
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="two">
+                <div class="t1"></div>
+                <div class="t7">
+                    <div class="t2">
+                        无论做什么鱼：最忌放盐和料酒研制
+                    </div>
+                    <div class="t3">
+                        <div class="t31">
+                            1万评论
+                        </div>
+                    </div>
+                    <div class="t4">
+                        <div class="t5">
+                            148万次观看
+                        </div>
+                        <div class="t6">
+                            司马南频道
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241104-\344\275\234\344\270\232\345\233\233.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241104-\344\275\234\344\270\232\345\233\233.html"
new file mode 100644
index 0000000000000000000000000000000000000000..db5a54cb4fa58dc066228943eb648447a3deb315
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241104-\344\275\234\344\270\232\345\233\233.html"
@@ -0,0 +1,198 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        * {
+            background-color: rgb(144, 192, 141);
+        }
+        .all {
+            width: 800px;
+            height: 600px;
+            background-color: rgb(165, 168, 195);
+            margin: 100px 0 0 100px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            align-items: center;
+            border: 2px solid black;
+        }
+
+        .a {
+            width: 800px;
+            flex: 1;
+            border: none;
+            background-color: rgb(165, 168, 195);
+        }
+
+
+        .top{
+            width: 760px;
+            flex: 4;
+            background-color: rgb(144, 192, 141);
+            display: flex;
+            justify-content: space-between;
+            border: 2px solid black;
+        }
+        .top1{
+            width: 100%;
+            height: 120px;
+            display: flex;
+            align-items: center;
+        }
+        .top2{
+            width: 100%;
+            height: 120px;
+            display: flex;
+            align-items: center;
+            justify-content: right;
+        }
+        .t1{
+            width: 20px;
+            height: 120px;
+        }
+        .t2{
+            width: 80px;
+            height: 80px;
+            border: 2px solid black;
+            background-color: rgb(165, 168, 195);
+        }
+        .t3{
+            width: 40px;
+            height: 80px;
+        }
+        .center {
+            width: 760px;
+            flex: 23;
+            background-color: rgb(144, 192, 141);
+            border: 2px solid black;
+        }
+        .center1{
+            width: 760px;
+            height: 20px;
+        }
+        .center2{
+            width: 760px;
+            height: 370px;
+            display: flex;
+            justify-content: space-between;
+        }
+        .center3{
+            width: 220px;
+            height: 370px;
+            display: flex;
+        }
+        .center4{
+            width: 500px;
+            height: 370px;
+            display: flex;
+        }
+        .c1{
+            width: 20px;
+            height: 370px;
+        }
+        .c2{
+            width: 200px;
+            height: 370px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+        .c3{
+            width: 480px;
+            height: 370px;
+            display: flex;
+            flex-direction: column;
+        }
+        .c4{
+            width: 196px;
+            height: 300px;
+            background-color: rgb(165, 168, 195);
+            border: 2px solid black;
+        }
+        .c5{
+            width: 200px;
+            height: 50px;
+            display: flex;
+            justify-content: space-between;
+        }
+        .c6{
+            width: 50px;
+            height: 48px;
+            background-color: rgb(165, 168, 195);
+            border: 2px solid black;
+        }
+        .c7{
+            width: 476px;
+            height: 36px;
+            background-color: rgb(165, 168, 195);
+            border: 2px solid black;
+        }
+        .c8{
+            width: 470px;
+            height: 15px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="all">
+        <div class="a"></div>
+        <div class="top">
+            <div class="top1">
+                <div class="t1"></div>
+                <div class="t2"></div>
+                <div class="t3"></div>
+                <div class="t2"></div>
+                <div class="t3"></div>
+                <div class="t2"></div>
+                <div class="t3"></div>
+                <div class="t2"></div>
+            </div>
+            <div class="top2">
+                <div class="t2"></div>
+                <div class="t1"></div>  
+            </div>
+        </div>
+        <div class="a"></div>
+        <div class="center">
+            <div class="center1"></div>
+            <div class="center2">
+                <div class="center3">
+                    <div class="c1"></div>
+                    <div class="c2">
+                        <div class="c4"></div>
+                        <div class="c5">
+                            <div class="c6"></div>
+                            <div class="c6"></div>
+                            <div class="c6"></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="center4">
+                    <div class="c3">
+                        <div class="c7"></div>
+                        <div class="c8"></div>
+                        <div class="c7"></div>
+                        <div class="c8"></div>
+                        <div class="c7"></div>
+                        <div class="c8"></div>
+                        <div class="c7"></div>
+                        <div class="c8"></div>
+                        <div class="c7"></div>
+                        <div class="c8"></div>
+                        <div class="c7"></div>
+                        <div class="c8"></div>
+                        <div class="c7"></div>
+                    </div>
+                    <div class="c1"></div>
+                </div>
+            </div>
+        </div>
+        <div class="a"></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241104-\346\220\272\347\250\213\346\211\213\346\234\272\347\253\257.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241104-\346\220\272\347\250\213\346\211\213\346\234\272\347\253\257.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8930080c257ce04ba73426a00e973591f01948da
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241104-\346\220\272\347\250\213\346\211\213\346\234\272\347\253\257.html"
@@ -0,0 +1,237 @@
+<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="../css/20241106-携程手机端.css">
+</head>
+
+<body>
+    <div class="total">
+        <div class="all">
+            <div class="one">
+                <div class="one1">
+                    <div class="o1"></div>
+                    <div class="o2">
+                        搜索：目的地/酒店/景点/航班号
+                    </div>
+                </div>
+                <div class="one2">
+                    <div class="o3"></div>
+                    <div class="o4">
+                        我&nbsp;&nbsp;的
+                    </div>
+                </div>
+            </div>
+            <div class="two"></div>
+            <div class="three">
+                <div class="t1">
+                    <div class="t2 img1"></div>
+                    <div class="t3">
+                        景点·玩乐
+                    </div>
+                </div>
+                <div class="t1">
+                    <div class="t2 img2"></div>
+                    <div class="t3">
+                        景点·玩乐
+                    </div>
+                </div>
+                <div class="t1">
+                    <div class="t2 img3"></div>
+                    <div class="t3">
+                        景点·玩乐
+                    </div>
+                </div>
+                <div class="t1">
+                    <div class="t2 img4"></div>
+                    <div class="t3">
+                        景点·玩乐
+                    </div>
+                </div>
+                <div class="t1">
+                    <div class="t2 img5"></div>
+                    <div class="t3">
+                        景点·玩乐
+                    </div>
+                </div>
+            </div>
+            <div class="four">
+                <div class="four1">
+                    <div class="f1">
+                        海外酒店
+                    </div>
+                    <div class="f2"></div>
+                </div>
+                <div class="four2"></div>
+                <div class="four3">
+                    <div class="f3">
+                        海外酒店
+                    </div>
+                    <div class="f4"></div>
+                    <div class="f3">
+                        特价酒店
+                    </div>
+                </div>
+                <div class="four2"></div>
+                <div class="four3">
+                    <div class="f3">
+                        海外酒店
+                    </div>
+                    <div class="f4"></div>
+                    <div class="f3">
+                        特价酒店
+                    </div>
+                </div>
+            </div>
+            <div class="five">
+                <div class="four1">
+                    <div class="f1">
+                        海外酒店
+                    </div>
+                    <div class="f2"></div>
+                </div>
+                <div class="four2"></div>
+                <div class="four3">
+                    <div class="f3">
+                        海外酒店
+                    </div>
+                    <div class="f4"></div>
+                    <div class="f3">
+                        特价酒店
+                    </div>
+                </div>
+                <div class="four2"></div>
+                <div class="four3">
+                    <div class="f3">
+                        海外酒店
+                    </div>
+                    <div class="f4"></div>
+                    <div class="f3">
+                        特价酒店
+                    </div>
+                </div>
+            </div>
+            <div class="six">
+                <div class="four1">
+                    <div class="f1">
+                        海外酒店
+                    </div>
+                    <div class="f2"></div>
+                </div>
+                <div class="four2"></div>
+                <div class="four3">
+                    <div class="f3">
+                        海外酒店
+                    </div>
+                    <div class="f4"></div>
+                    <div class="f3">
+                        特价酒店
+                    </div>
+                </div>
+                <div class="four2"></div>
+                <div class="four3">
+                    <div class="f3">
+                        海外酒店
+                    </div>
+                    <div class="f4"></div>
+                    <div class="f3">
+                        特价酒店
+                    </div>
+                </div>
+            </div>
+            <div class="seven">
+                <div class="seven1">
+                    <div class="s1">
+                        <div class="s2"></div>
+                        <div class="s3">
+                            电话费
+                        </div>
+                    </div>
+                    <div class="s1">
+                        <div class="s2"></div>
+                        <div class="s3">
+                            电话费
+                        </div>
+                    </div>
+                    <div class="s1">
+                        <div class="s2"></div>
+                        <div class="s3">
+                            电话费
+                        </div>
+                    </div>
+                    <div class="s1">
+                        <div class="s2"></div>
+                        <div class="s3">
+                            电话费
+                        </div>
+                    </div>
+                    <div class="s1">
+                        <div class="s2"></div>
+                        <div class="s3">
+                            电话费
+                        </div>
+                    </div>
+                </div>
+                <div class="seven2">
+                    <div class="s1">
+                        <div class="s2"></div>
+                        <div class="s3">
+                            电话费
+                        </div>
+                    </div>
+                    <div class="s1">
+                        <div class="s2"></div>
+                        <div class="s3">
+                            电话费
+                        </div>
+                    </div>
+                    <div class="s1">
+                        <div class="s2"></div>
+                        <div class="s3">
+                            电话费
+                        </div>
+                    </div>
+                    <div class="s1">
+                        <div class="s2"></div>
+                        <div class="s3">
+                            电话费
+                        </div>
+                    </div>
+                    <div class="s1">
+                        <div class="s2"></div>
+                        <div class="s3">
+                            电话费
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="eight">
+                <div class="eight1"></div>
+                <div class="eight2">
+                    获取更多福利&nbsp;>
+                </div>
+            </div>
+            <div class="nine">
+                <div class="nine1">
+                    <div class="n1 img6"></div>
+                    <div class="n2"></div>
+                    <div class="n3 img8"></div>
+                    <div class="n2"></div>
+                    <div class="n3 img9"></div>
+                </div>
+                <div class="nine2"></div>
+                <div class="nine1">
+                    <div class="n1 img7"></div>
+                    <div class="n2"></div>
+                    <div class="n3 img10"></div>
+                    <div class="n2"></div>
+                    <div class="n3 img11"></div>
+                </div>
+            </div>
+        </div> 
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241104-\347\273\217\345\205\270\345\234\243\346\235\257\345\270\203\345\261\200.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241104-\347\273\217\345\205\270\345\234\243\346\235\257\345\270\203\345\261\200.html"
new file mode 100644
index 0000000000000000000000000000000000000000..539ef9d8bcaad135e735b5761fc5c99398fed333
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241104-\347\273\217\345\205\270\345\234\243\346\235\257\345\270\203\345\261\200.html"
@@ -0,0 +1,109 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .all {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .top {
+            height: 80px;
+            display: flex;
+            justify-content: center;
+            background-color: rgb(252, 246, 228);
+            align-items: center;
+        }
+
+        .center {
+            width: 100%;
+            height: 100%;
+            display: flex;
+        }
+
+        .left {
+            width: 200px;
+            background-color: rgb(79, 151, 56);
+            display: flex;
+            justify-content: center;
+        }
+
+        .center1 {
+            flex-grow: 1;
+            display: flex;
+            justify-content: center;
+        }
+
+        .right {
+            width: 200px;
+            background-color: rgb(130, 51, 132);
+            display: flex;
+            justify-content: center;
+        }
+
+        .bottom {
+            height: 80px;
+            background-color: rgb(51, 51, 51);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        @media screen and (max-width:625px) {
+            .center {
+                flex-direction: column;
+            }
+
+            .left {
+                width: 100%;
+                height: 200px;
+                background-color: rgb(79, 151, 56);
+                display: flex;
+                justify-content: center;
+                order: 2;
+            }
+
+            .center1 {
+                order: 1;
+            }
+
+            .right {
+                width: 100%;
+                height: 200px;
+                background-color: rgb(130, 51, 132);
+                display: flex;
+                justify-content: center;
+                order: 3;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="all">
+        <div class="top">
+            一天到晚游泳的鱼
+        </div>
+        <div class="center">
+            <div class="left">
+                左侧
+            </div>
+            <div class="center1">
+                中间
+            </div>
+            <div class="right">
+                右侧
+            </div>
+        </div>
+        <div class="bottom">
+            向天再借五百年
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241104-\351\205\267\347\213\227\346\222\255\346\224\276\345\210\227\350\241\250.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241104-\351\205\267\347\213\227\346\222\255\346\224\276\345\210\227\350\241\250.html"
new file mode 100644
index 0000000000000000000000000000000000000000..c7f788004cc0d06be4cc93a4d4ebd08f2b771db0
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241104-\351\205\267\347\213\227\346\222\255\346\224\276\345\210\227\350\241\250.html"
@@ -0,0 +1,173 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .all {
+            display: flex;
+            justify-content: space-around;
+        }
+
+        .one,
+        .two,
+        .three,
+        .four {
+            width: 150px;
+            height: 600px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+        }
+
+        .a1 {
+            width: 150px;
+            height: 150px;
+            border-radius: 7%;
+        }
+
+        .a2 {
+            width: 150px;
+            height: 150px;
+            margin-top: -150px;
+            background: linear-gradient(to bottom, rgb(0, 0, 0, 0), rgb(0, 0, 0, 0.5));
+            display: flex;
+            justify-content: left;
+            align-items: end;
+            border-radius: 7%;
+        }
+
+        .a3 {
+            width: 150px;
+            height: 40px;
+            font-size: 14px;
+            margin: 10px 0 20px 0;
+        }
+
+        .a4 {
+            width: 20px;
+            height: 20px;
+            background-image: url(../img/20241104/1.png);
+            background-size: 15px;
+            background-repeat: no-repeat;
+            margin: 0 0 10px 10px;
+        }
+
+        .a5 {
+            width: 80px;
+            height: 20px;
+            font-size: 15px;
+            color: white;
+            margin: 0 0 10px 0;
+        }
+        .img2{
+            background-image: url(../img/20241104/2.jpg);
+        }
+        .img6 {
+            background-image: url(../img/20241104/6.jpg);
+        }
+        .img3{
+            background-image: url(../img/20241104/3.jpg);
+        }
+        .img7{
+            background-image: url(../img/20241104/7.jpg);
+        }
+        .img4{
+            background-image: url(../img/20241104/4.jpg);
+        }
+        .img8{
+            background-image: url(../img/20241104/8.jpg);
+        }
+        .img5{
+            background-image: url(../img/20241104/5.jpg);
+        }
+        .img9{
+            background-image: url(../img/20241104/9.jpg);
+        }
+        @media screen and (max-width:720px) {
+            .one{
+                margin-left: 20px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="all">
+        <div class="one">
+            <div class="a1 img2"></div>
+            <div class="a2">
+                <div class="a4"></div>
+                <div class="a5">2444.0万</div>
+            </div>
+            <div class="a3">
+                催眠：Delta脑波音乐减压深度睡眠
+            </div>
+            <div class="a1 img6"></div>
+            <div class="a2">
+                <div class="a4"></div>
+                <div class="a5">2444.0万</div>
+            </div>
+            <div class="a3">
+                催眠：Delta脑波音乐减压深度睡眠
+            </div>
+        </div>
+        <div class="one">
+            <div class="a1 img3"></div>
+            <div class="a2">
+                <div class="a4"></div>
+                <div class="a5">2444.0万</div>
+            </div>
+            <div class="a3">
+                催眠：Delta脑波音乐减压深度睡眠
+            </div>
+            <div class="a1 img7"></div>
+            <div class="a2">
+                <div class="a4"></div>
+                <div class="a5">2444.0万</div>
+            </div>
+            <div class="a3">
+                催眠：Delta脑波音乐减压深度睡眠
+            </div>
+        </div>
+        <div class="one">
+            <div class="a1 img4"></div>
+            <div class="a2">
+                <div class="a4"></div>
+                <div class="a5">2444.0万</div>
+            </div>
+            <div class="a3">
+                催眠：Delta脑波音乐减压深度睡眠
+            </div>
+            <div class="a1 img8"></div>
+            <div class="a2">
+                <div class="a4"></div>
+                <div class="a5">2444.0万</div>
+            </div>
+            <div class="a3">
+                催眠：Delta脑波音乐减压深度睡眠
+            </div>
+        </div>
+        <div class="one">
+            <div class="a1 img5"></div>
+            <div class="a2">
+                <div class="a4"></div>
+                <div class="a5">2444.0万</div>
+            </div>
+            <div class="a3">
+                催眠：Delta脑波音乐减压深度睡眠
+            </div>
+            <div class="a1 img9"></div>
+            <div class="a2">
+                <div class="a4"></div>
+                <div class="a5">2444.0万</div>
+            </div>
+            <div class="a3">
+                催眠：Delta脑波音乐减压深度睡眠
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241106-\344\272\254\344\270\234.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241106-\344\272\254\344\270\234.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d6eefb118045ccf7aa659801638656f743e925ab
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241106-\344\272\254\344\270\234.html"
@@ -0,0 +1,191 @@
+<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="../css/20241107-京东.css">
+</head>
+
+<body>
+    <div class="content">
+        <div class="navigation">
+            <div class="n1"></div>
+            <div class="n2"></div>
+            <div class="n3">
+                打开京东App，购物更轻松
+            </div>
+            <div class="n4">
+                立即打开
+            </div>
+        </div>
+        <div class="search">
+            <div class="search1">
+
+            </div>
+            <div class="search2">
+                <div class="s1"></div>
+                <div class="s2"></div>
+                <div class="s3"></div>
+                <div class="s4">
+                    键盘鼠标套装
+                </div>
+            </div>
+            <div class="search3">
+                登录
+            </div>
+        </div>
+        <div class="ad">
+            <div class="ad1"></div>
+            <div class="ad2">
+                <div class="ad3"></div>
+                <div class="ad4"></div>
+                <div class="ad5"></div>
+            </div>
+        </div>
+        <div class="supermarket">
+            <div class="s6">
+                <div class="s7">
+                    <div class="s8 img1"></div>
+                    <div class="s9">
+                        京东超市
+                    </div>
+                </div>
+                <div class="s7">
+                    <div class="s8 img2"></div>
+                    <div class="s9">
+                        京东超市
+                    </div>
+                </div>
+                <div class="s7">
+                    <div class="s8 img3"></div>
+                    <div class="s9">
+                        京东超市
+                    </div>
+                </div>
+                <div class="s7">
+                    <div class="s8 img4"></div>
+                    <div class="s9">
+                        京东超市
+                    </div>
+                </div>
+                <div class="s7">
+                    <div class="s8 img5"></div>
+                    <div class="s9">
+                        京东超市
+                    </div>
+                </div>
+            </div>
+            <div class="s6">
+                <div class="s7">
+                    <div class="s8 img6"></div>
+                    <div class="s9">
+                        京东超市
+                    </div>
+                </div>
+                <div class="s7">
+                    <div class="s8 img7"></div>
+                    <div class="s9">
+                        京东超市
+                    </div>
+                </div>
+                <div class="s7">
+                    <div class="s8 img8"></div>
+                    <div class="s9">
+                        京东超市
+                    </div>
+                </div>
+                <div class="s7">
+                    <div class="s8 img9"></div>
+                    <div class="s9">
+                        京东超市
+                    </div>
+                </div>
+                <div class="s7">
+                    <div class="s8 img10"></div>
+                    <div class="s9">
+                        京东超市
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="price">
+            <div class="p1">
+                <div class="p3">
+                    京东秒杀
+                </div>
+                <div class="p11">
+                    <div class="p4">
+                    18
+                    </div>
+                    <div class="p5"></div>
+                    <div class="p6">
+                        更多秒杀
+                    </div>
+                </div>
+                <div class="p7"></div>
+            </div>
+            <div class="p2">
+                <div class="p8">
+                    <div class="p9 img11"></div>
+                    <div class="p10">
+                        ￥25
+                    </div>
+                </div>
+                <div class="p8">
+                    <div class="p9 img12"></div>
+                    <div class="p10">
+                        ￥2568
+                    </div>
+                </div>
+                <div class="p8">
+                    <div class="p9 img13"></div>
+                    <div class="p10">
+                        ￥26.8
+                    </div>
+                </div>
+                <div class="p8">
+                    <div class="p9 img14"></div>
+                    <div class="p10">
+                        ￥19.7
+                    </div>
+                </div>
+                <div class="p8">
+                    <div class="p9 img15"></div>
+                    <div class="p10">
+                        ￥420
+                    </div>
+                </div>
+                <div class="p8">
+                    <div class="p9 img16"></div>
+                    <div class="p10">
+                        ￥42.9
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="commodity">
+            <div class="c1"></div>
+            <div class="c2"></div>
+        </div>
+        <div class="directory">
+            <div class="d1">
+                首页
+            </div>
+            <div class="d1">
+                分类
+            </div>
+            <div class="d1">
+                京喜
+            </div>
+            <div class="d1">
+                购物车
+            </div>
+            <div class="d1">
+                未登录
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20241104-flex.md" "b/\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20241104-flex.md"
new file mode 100644
index 0000000000000000000000000000000000000000..12c88551d69ce47c99515ea1e47a60a46e3d8d6d
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\347\254\224\350\256\260/20241104-flex.md"
@@ -0,0 +1,49 @@
+
+### 容器属性
+- `flex-direction`：定义主轴方向（行或列）。
+  - `row`（默认）：主轴为水平方向，起点在左端。
+  - `row-reverse`：主轴为水平方向，起点在右端。
+  - `column`：主轴为垂直方向，起点在顶部。
+  - `column-reverse`：主轴为垂直方向，起点在底部。
+
+- `flex-wrap`：定义项目是否折行。
+  - `nowrap`（默认）：不折行。
+  - `wrap`：折行。
+  - `wrap-reverse`：折行，第一行在下方。
+
+- `flex-flow`：`flex-direction`和`flex-wrap`的简写。
+
+- `justify-content`：定义项目在主轴上的对齐方式。
+  - `flex-start`（默认）：对齐到行的开头。
+  - `flex-end`：对齐到行的末尾。
+  - `center`：居中对齐。
+  - `space-between`：两端对齐，项目之间间隔相等。
+  - `space-around`：每个项目两侧的间隔相等，项目之间的间隔是项目与行边距的两倍。
+
+- `align-items`：定义项目在交叉轴上的对齐方式。
+  - `flex-start`：对齐到交叉轴的起点。
+  - `flex-end`：对齐到交叉轴的终点。
+  - `center`：居中对齐。
+  - `baseline`：项目的第一行文字的基线对齐。
+  - `stretch`（默认）：如果项目未设置高度或设为auto，将占满整个容器的高度。
+
+- `align-content`：定义多根轴线的分布方式。
+  - `flex-start`：对齐到交叉轴的起点。
+  - `flex-end`：对齐到交叉轴的终点。
+  - `center`：居中对齐。
+  - `space-between`：两端对齐，轴线之间间隔相等。
+  - `space-around`：每根轴线两侧的间隔相等，轴线之间的间隔是轴线与交叉轴边距的两倍。
+  - `stretch`（默认）：轴线占满整个交叉轴。
+
+### 项目属性
+- `order`：定义项目的排列顺序，数值越小越靠前，默认为0。
+
+- `flex-grow`：定义项目的放大比例，正值时项目会放大。
+
+- `flex-shrink`：定义项目的缩小比例，正值时项目会缩小。
+
+- `flex-basis`：定义项目在主轴上的默认大小。
+
+- `flex`：`flex-grow`、`flex-shrink`和`flex-basis`的简写，默认值为`0 1 auto`。
+
+- `align-self`：允许单个项目有与其他项目不同的对齐方式，覆盖`align-items`属性。