diff --git "a/\346\236\227\344\275\231\345\200\251/1images/3dfb420807a0022c8e636a688e8e792.png" "b/\346\236\227\344\275\231\345\200\251/1images/3dfb420807a0022c8e636a688e8e792.png"
new file mode 100644
index 0000000000000000000000000000000000000000..1385c3610863e9cd6217bec5aa2b8fb6fe5bfeb6
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/3dfb420807a0022c8e636a688e8e792.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/dh5-jd-sprites.png" "b/\346\236\227\344\275\231\345\200\251/1images/dh5-jd-sprites.png"
new file mode 100644
index 0000000000000000000000000000000000000000..cd7d4b80e0acd94364db0d8d0c21dd1f856036bd
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/dh5-jd-sprites.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/dh5-left-jd.png" "b/\346\236\227\344\275\231\345\200\251/1images/dh5-left-jd.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f2554c7f251ea2af09090635c93dadd36b90621a
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/dh5-left-jd.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/dh5-list.png" "b/\346\236\227\344\275\231\345\200\251/1images/dh5-list.png"
new file mode 100644
index 0000000000000000000000000000000000000000..0f1fc575dabab1d97f7d4b7c90441f93f0548acb
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/dh5-list.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/dh5-logo.png" "b/\346\236\227\344\275\231\345\200\251/1images/dh5-logo.png"
new file mode 100644
index 0000000000000000000000000000000000000000..a11cd81570aa1e8d840e4d634cdc14e728154583
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/dh5-logo.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/dh5-ms-dc.png" "b/\346\236\227\344\275\231\345\200\251/1images/dh5-ms-dc.png"
new file mode 100644
index 0000000000000000000000000000000000000000..b62e195b30dd5f677fc0162c4e2ee86548def84d
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/dh5-ms-dc.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/dh5-ms-right.png" "b/\346\236\227\344\275\231\345\200\251/1images/dh5-ms-right.png"
new file mode 100644
index 0000000000000000000000000000000000000000..48dc7c911c9c0029fe2db88d37afb1052f45f257
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/dh5-ms-right.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/dh5-nav1.png" "b/\346\236\227\344\275\231\345\200\251/1images/dh5-nav1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..afd396d51cdd9e2a59579c2eec7b22ef0307d458
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/dh5-nav1.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/dh5-nav10.png" "b/\346\236\227\344\275\231\345\200\251/1images/dh5-nav10.png"
new file mode 100644
index 0000000000000000000000000000000000000000..eaedd3706bb9247a360a84e25d6f3f30962a0ce7
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/dh5-nav10.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/dh5-nav2.png" "b/\346\236\227\344\275\231\345\200\251/1images/dh5-nav2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5fb535f4c9aaa0124a742f5e5983072f8da69dd1
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/dh5-nav2.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/dh5-nav3.png" "b/\346\236\227\344\275\231\345\200\251/1images/dh5-nav3.png"
new file mode 100644
index 0000000000000000000000000000000000000000..897ff6ece4f5009aa4253932d1525c812ccd2e3c
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/dh5-nav3.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/dh5-nav4.png" "b/\346\236\227\344\275\231\345\200\251/1images/dh5-nav4.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f5b3346072bed2fbd449830b1f61a6333c6d297a
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/dh5-nav4.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/dh5-nav5.png" "b/\346\236\227\344\275\231\345\200\251/1images/dh5-nav5.png"
new file mode 100644
index 0000000000000000000000000000000000000000..fac33e2de6707981af196fedfffc59eb9e868b51
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/dh5-nav5.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/dh5-nav6.png" "b/\346\236\227\344\275\231\345\200\251/1images/dh5-nav6.png"
new file mode 100644
index 0000000000000000000000000000000000000000..cde9a8868388c1e9ff682f7cd03a50c827d552a8
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/dh5-nav6.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/dh5-nav7.png" "b/\346\236\227\344\275\231\345\200\251/1images/dh5-nav7.png"
new file mode 100644
index 0000000000000000000000000000000000000000..07292add50dc8830f48666d2191b757e9ad489e6
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/dh5-nav7.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/dh5-nav8.png" "b/\346\236\227\344\275\231\345\200\251/1images/dh5-nav8.png"
new file mode 100644
index 0000000000000000000000000000000000000000..fad5653d8b4705ce0cac074080476e1aef0cbab2
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/dh5-nav8.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/dh5-nav9.png" "b/\346\236\227\344\275\231\345\200\251/1images/dh5-nav9.png"
new file mode 100644
index 0000000000000000000000000000000000000000..bc45f1dc8f10630bb5a3e8d7f15d3bb309d79747
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/dh5-nav9.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/dh5-nianhuo1.png" "b/\346\236\227\344\275\231\345\200\251/1images/dh5-nianhuo1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5c861440d7d19d639217ddb86cf917f301e5213a
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/dh5-nianhuo1.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/dh5-nianhuo2.png" "b/\346\236\227\344\275\231\345\200\251/1images/dh5-nianhuo2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c36850b0c0c13cbab67b8bdc1fb1c8083c6a1c33
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/dh5-nianhuo2.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/flex-01.png" "b/\346\236\227\344\275\231\345\200\251/1images/flex-01.png"
new file mode 100644
index 0000000000000000000000000000000000000000..6fd6241aa7035df30db88d15987e8d0713d4b616
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/flex-01.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/flex-02.jpg" "b/\346\236\227\344\275\231\345\200\251/1images/flex-02.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..20aad004aef3db4620e968c68e6ec46cf8561e2c
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/flex-02.jpg" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/flex-03.jpg" "b/\346\236\227\344\275\231\345\200\251/1images/flex-03.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..1dedde074d0a4dd594e0202935f767e115fed977
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/flex-03.jpg" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/flex-04.jpg" "b/\346\236\227\344\275\231\345\200\251/1images/flex-04.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e0f855a6d755756b600197e011c379b331750c59
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/flex-04.jpg" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/flex-05.jpg" "b/\346\236\227\344\275\231\345\200\251/1images/flex-05.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..0f61aeb8d5d4fd8c633a03adcf79e644c9462361
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/flex-05.jpg" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/flex-06.jpg" "b/\346\236\227\344\275\231\345\200\251/1images/flex-06.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..2360b947f7eb61cf485d887da190e231085eaf89
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/flex-06.jpg" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/flex-07.jpg" "b/\346\236\227\344\275\231\345\200\251/1images/flex-07.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..b478cba7e53eda154668f6bd440c23e1ba147a28
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/flex-07.jpg" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/flex-08.jpg" "b/\346\236\227\344\275\231\345\200\251/1images/flex-08.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..3e9cfb4b00c6616b836bb1c48d4910c2e547910c
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/flex-08.jpg" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/icon-play.png" "b/\346\236\227\344\275\231\345\200\251/1images/icon-play.png"
new file mode 100644
index 0000000000000000000000000000000000000000..90397f22a7692bd8d87b1c55c11acccee885aced
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/icon-play.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/icon-sx2.png" "b/\346\236\227\344\275\231\345\200\251/1images/icon-sx2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..42f24045e7f7595c562edd4e876ae23144285bbd
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/icon-sx2.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/icon_play.png" "b/\346\236\227\344\275\231\345\200\251/1images/icon_play.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c87d350f3ef7dcd681ca0d640852d52b6e6146a9
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/icon_play.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/image.png" "b/\346\236\227\344\275\231\345\200\251/1images/image.png"
new file mode 100644
index 0000000000000000000000000000000000000000..86dee2806385d87021e1f04fc84ec3c8842897cf
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/image.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/image1.png" "b/\346\236\227\344\275\231\345\200\251/1images/image1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f08092f9949d9a5390cdad8edacbc27c65598800
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/image1.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/image10.png" "b/\346\236\227\344\275\231\345\200\251/1images/image10.png"
new file mode 100644
index 0000000000000000000000000000000000000000..8d229c386983ff703ec6967848b77d3f1e9c3e96
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/image10.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/image11.png" "b/\346\236\227\344\275\231\345\200\251/1images/image11.png"
new file mode 100644
index 0000000000000000000000000000000000000000..a99c70ddc50d367cc52bb73f9e2b129a4e14f970
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/image11.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/image12.png" "b/\346\236\227\344\275\231\345\200\251/1images/image12.png"
new file mode 100644
index 0000000000000000000000000000000000000000..e7164e45b56f5be3114e617d03ceff1e11a1ba23
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/image12.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/image2.png" "b/\346\236\227\344\275\231\345\200\251/1images/image2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f227cca28a2fa1ad6e56a0dedd90d8568e4af95c
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/image2.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/image4.png" "b/\346\236\227\344\275\231\345\200\251/1images/image4.png"
new file mode 100644
index 0000000000000000000000000000000000000000..2ad26bdfa9f6d4b7f8f1389b3db49317907bb893
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/image4.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/image6.png" "b/\346\236\227\344\275\231\345\200\251/1images/image6.png"
new file mode 100644
index 0000000000000000000000000000000000000000..88572e8611a24622aa0bbd5fa0b18b955a2f1e34
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/image6.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/image7.png" "b/\346\236\227\344\275\231\345\200\251/1images/image7.png"
new file mode 100644
index 0000000000000000000000000000000000000000..a8c483df0d4f4621c4f18279baec7355d22d6c41
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/image7.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/image8.png" "b/\346\236\227\344\275\231\345\200\251/1images/image8.png"
new file mode 100644
index 0000000000000000000000000000000000000000..74ddde9c560349e7b6b8d7f4b8e97de2ae947b4a
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/image8.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/image9-1.png" "b/\346\236\227\344\275\231\345\200\251/1images/image9-1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..d8835d68db79663f716bd7986f43d88f8821b595
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/image9-1.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/image9.png" "b/\346\236\227\344\275\231\345\200\251/1images/image9.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f819bb477d4717af2250dd3b94c1cc0d208f9458
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/image9.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/jdh5-banner.png" "b/\346\236\227\344\275\231\345\200\251/1images/jdh5-banner.png"
new file mode 100644
index 0000000000000000000000000000000000000000..b00147460cc4b80c7ed692540f1185c0eac70da7
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/jdh5-banner.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/jdh5-ms1.jpg" "b/\346\236\227\344\275\231\345\200\251/1images/jdh5-ms1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..cd06695e68a6380705723463b87f5e33f95bc2d6
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/jdh5-ms1.jpg" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/jdh5-ms2.jpg" "b/\346\236\227\344\275\231\345\200\251/1images/jdh5-ms2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f6794a0691e8c0487882ccb92c288c8807561c5b
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/jdh5-ms2.jpg" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/jdh5-ms3.jpg" "b/\346\236\227\344\275\231\345\200\251/1images/jdh5-ms3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..6ecdb70678caad80e8bb7c73a03d544c4d876a31
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/jdh5-ms3.jpg" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/jdh5-ms4.jpg" "b/\346\236\227\344\275\231\345\200\251/1images/jdh5-ms4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..d6ffd460c799077d72f16d2b5826146dcbdbdc56
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/jdh5-ms4.jpg" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/jdh5-ms5.jpg" "b/\346\236\227\344\275\231\345\200\251/1images/jdh5-ms5.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..256e98fcc5098797303d76429ceb3c045f4aa28c
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/jdh5-ms5.jpg" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/jdh5-ms6.jpg" "b/\346\236\227\344\275\231\345\200\251/1images/jdh5-ms6.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e801b86302ea0ae1107a37d070b82e52fcb34388
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/jdh5-ms6.jpg" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/jdh5-nianhuo3.png" "b/\346\236\227\344\275\231\345\200\251/1images/jdh5-nianhuo3.png"
new file mode 100644
index 0000000000000000000000000000000000000000..7181d8704f4bb5481600249529d0d47461eb6c36
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/jdh5-nianhuo3.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/jdh5-product1.webp" "b/\346\236\227\344\275\231\345\200\251/1images/jdh5-product1.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..c04d006d35c38befc0c77c7227ae85d9f7137e93
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/jdh5-product1.webp" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/jdh5-product2.webp" "b/\346\236\227\344\275\231\345\200\251/1images/jdh5-product2.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..acc2fc0a513d9d698faae903d12d6a6c6f5b7a56
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/jdh5-product2.webp" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/toutiao-02.jpg" "b/\346\236\227\344\275\231\345\200\251/1images/toutiao-02.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..a50ce45c112cc151284427f4de0fd771073aba4f
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/toutiao-02.jpg" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/xiecheng-focus.jpg" "b/\346\236\227\344\275\231\345\200\251/1images/xiecheng-focus.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..069ce0537d7d45db2c9048f76b79e4abe25280b9
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/xiecheng-focus.jpg" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/xiecheng-hot.png" "b/\346\236\227\344\275\231\345\200\251/1images/xiecheng-hot.png"
new file mode 100644
index 0000000000000000000000000000000000000000..3d4f024637b08a9f8e400d826fab25eba6d3f059
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/xiecheng-hot.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/xiecheng-hotel.png" "b/\346\236\227\344\275\231\345\200\251/1images/xiecheng-hotel.png"
new file mode 100644
index 0000000000000000000000000000000000000000..37da0fcb9ce4b14338d49e52b919485f69e003ca
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/xiecheng-hotel.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/xiecheng-localnav_bg.png" "b/\346\236\227\344\275\231\345\200\251/1images/xiecheng-localnav_bg.png"
new file mode 100644
index 0000000000000000000000000000000000000000..6ba0af2e63ded49e6ad26093731b427564dde2a2
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/xiecheng-localnav_bg.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/xiecheng-pic1.jpg" "b/\346\236\227\344\275\231\345\200\251/1images/xiecheng-pic1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..7705aa7501e842150d1ce783b4bf173532f37b66
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/xiecheng-pic1.jpg" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/xiecheng-pic2.jpg" "b/\346\236\227\344\275\231\345\200\251/1images/xiecheng-pic2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..31410a68c7ac02402e4036bc8f734ab0837aa9f3
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/xiecheng-pic2.jpg" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/xiecheng-pic3.jpg" "b/\346\236\227\344\275\231\345\200\251/1images/xiecheng-pic3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..3e18c9f1ed4b4c4bd548e39a9d7521b8bd690c75
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/xiecheng-pic3.jpg" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/xiecheng-pic4.jpg" "b/\346\236\227\344\275\231\345\200\251/1images/xiecheng-pic4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..efed93472231569317f26d6527cf6e762a6868f9
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/xiecheng-pic4.jpg" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/xiecheng-pic5.jpg" "b/\346\236\227\344\275\231\345\200\251/1images/xiecheng-pic5.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..15cef359fec0483b5ace790c80cce21e596aa5c7
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/xiecheng-pic5.jpg" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/xiecheng-pic6.jpg" "b/\346\236\227\344\275\231\345\200\251/1images/xiecheng-pic6.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..3852d753c67345fe309e2d245015d269b8718288
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/xiecheng-pic6.jpg" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/1images/xiecheng-sprite.png" "b/\346\236\227\344\275\231\345\200\251/1images/xiecheng-sprite.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c62ccfdccb21c8fa3ebd6030e618b23a8ea91356
Binary files /dev/null and "b/\346\236\227\344\275\231\345\200\251/1images/xiecheng-sprite.png" differ
diff --git "a/\346\236\227\344\275\231\345\200\251/20241104flex.md" "b/\346\236\227\344\275\231\345\200\251/20241104flex.md"
new file mode 100644
index 0000000000000000000000000000000000000000..e0904005c9be0ef168e0eeb50aeb377744c2dc5a
--- /dev/null
+++ "b/\346\236\227\344\275\231\345\200\251/20241104flex.md"
@@ -0,0 +1,2245 @@
+## 一.笔记
+
+### 1. 弹性盒子
+```js
+使用display：flex 声明一个父容器为弹性盒子，此时，这个父级容器中的子元素们会会遵循弹性布局。
+
+备注：一般是用 `display:flex`这个属性。`display:inline-flex`用得较少。
+```
+
+### 2. flex-direction 属性
+```js
+    flex-direction 用于设置盒子中的子元素的排列方向
+    属性值：
+        row     从左到右排列子元素（默认）
+        column     从上到下垂直排列子元素
+        row-reverse    从右到左排列子元素
+        column-reverse  从下到上排列
+```
+
+### 3. flex-wrap 属性
+```js
+    flex-wrap：控制子元素溢出时的换行处理。
+    属性值：
+        normal 不改变
+        wrap  溢出子元素换行
+
+```
+
+### 4. justify-content 属性（水平居中-左右）
+```js
+justify-content: flex-start; 设置子元素在**主轴上的对齐方式**。属性值可以是：
+
+    （1）flex-start  从主轴的起点对齐（默认值）-- 一条轴的开始端     ` · · ·     `
+
+    （2）flex-end 从主轴的终点对齐   -- 一条轴的末尾端   `    · · ·`
+
+    （3）center  居中对齐
+
+    （4）space-around  在父盒子里平分（两边留白）    -- 一条轴上子元素平分距离       ` · · · · `
+
+    （5）space-between  两端对齐 平分（两边不留白）    -- 一条轴上子元素最左和最右边靠两边     ` ·    · `
+
+```
+
+
+### 5. align-items 属性 (垂直居中-上下)
+```js
+align-items：设置子元素在**侧轴上的对齐方式**。属性值可以是：
+    （1）flex-start 从侧轴开始的方向对齐
+        eg: `
+            · · ·
+
+
+            `
+
+    （2）flex-end 从侧轴结束的方向对齐
+          eg: `
+            
+            
+              · · ·
+              `
+
+    （3）baseline 基线 默认同flex-start
+      eg: `
+            · · ·
+            
+
+            `
+
+    （4）center 中间对齐
+      eg: `
+            
+            · · ·
+
+          `
+    （5）stretcz 拉伸
+      eg: `
+            · · ·
+            · · ·
+            · · ·
+            · · · 
+            `
+```
+
+
+## 二.作业
+
+### 1. 作业1-1
+1. [作业1-1](./1images/image.png)
+2. 代码
+```html
+  <style>    
+        .all{
+            display: flex;
+        }
+        .a,.b,.c{
+            width: 100px;
+            height: 100px;
+            margin-right: 20px;
+        }
+        .a{background-color: red;}
+        .b{background-color: aqua;}
+        .c{background-color: blueviolet;}
+    </style>
+<body>
+    <div class="all"> 
+        <div class="a"></div>
+        <div class="b"></div>
+        <div class="c"></div>
+    </div>
+</body>
+</html>
+
+```
+
+### 2. 作业1-2
+1. [作业1-2](./1images/image1.png)
+2. 代码
+```html
+<style>
+        /* 1 */
+        .all{
+            display: flex;
+            justify-content: center;
+            position: relative;
+            margin-bottom: 100px;
+        }
+        .a,.b,.c{
+            width: 100px;
+            height: 100px;
+            margin-right: 20px;      
+        }
+        .a{
+            background-color: red;
+        }
+        .b{
+            background-color: aqua;
+        }
+        .c{
+            background-color: blueviolet;
+        }
+        /* 2 */
+        .all1{
+            display: flex;
+            justify-content: space-around;
+            margin-bottom: 100px;
+        }
+        .a1,.b1,.c1{
+            width: 100px;
+            height: 100px;
+            margin-right: 20px;      
+        }
+        .a1{
+            background-color: red;
+        }
+        .b1{
+            background-color: aqua;
+        }
+        .c1{
+            background-color: blueviolet;
+        }
+        /* 3 */
+        .all2{
+            display: flex;
+            justify-content: space-between;
+        }
+        .a2,.b2,.c2{
+            width: 100px;
+            height: 100px;
+            margin-right: 20px;      
+        }
+        .a2{
+            background-color: red;
+        }
+        .b2{
+            background-color: aqua;
+        }
+        .c2{
+            background-color: blueviolet;
+        }
+    </style>
+</head>
+<body>
+    <!-- 1 -->
+    <div class="all"> 
+        <div class="a"></div>
+        <div class="b"></div>
+        <div class="c"></div>
+    </div>
+    <!-- 2 -->
+    <div class="all1"> 
+        <div class="a1"></div>
+        <div class="b1"></div>
+        <div class="c1"></div>
+    </div>
+    <!-- 3 -->
+    <div class="all2"> 
+        <div class="a2"></div>
+        <div class="b2"></div>
+        <div class="c2"></div>
+    </div>
+</body>
+</html>
+
+
+```
+
+### 3.作业1-3
+1. [作业1-3](./1images/image2.png)
+2. 代码
+```html
+    <style>
+        /* 1 */
+        .all{
+            height: 800px;
+            display: flex;
+            align-items: center;
+            background-color: rgb(218, 194, 164);
+            position: relative;
+        }
+        .a,.b,.c{
+            width: 100px;
+            height: 100px;
+            margin-right: 20px;
+        }
+        .a{background-color: red;}
+        .b{background-color: aqua;}
+        .c{background-color: blueviolet;}
+        /* 2 */
+        .all2{
+            height: 800px;
+            display: flex;
+            align-items: flex-start;
+            position: relative;
+            background-color: cadetblue;
+        }
+        .a2,.b2,.c2{
+            width: 100px;
+            height: 100px;
+            margin-right: 20px;
+        }
+        .a2{background-color: red;}
+        .b2{background-color: aqua;}
+        .c2{background-color: blueviolet;}
+        /* 2 */
+        .all3{
+            height: 800px;
+            display: flex;
+            align-items: flex-end;
+            background-color: pink;
+        }
+        .a3,.b3,.c3{
+            width: 100px;
+            height: 100px;
+            margin-right: 20px;
+        }
+        .a3{background-color: red;}
+        .b3{background-color: aqua;}
+        .c3{background-color: blueviolet;}
+    </style>
+    <body>
+    <!-- 1 -->
+    <div class="all"> 
+        <div class="a"></div>
+        <div class="b"></div>
+        <div class="c"></div>
+    </div>
+    <!-- 2 -->
+    <div class="all2"> 
+        <div class="a2"></div>
+        <div class="b2"></div>
+        <div class="c2"></div>
+    </div>
+    <!-- 3 -->
+    <div class="all3"> 
+        <div class="a3"></div>
+        <div class="b3"></div>
+        <div class="c3"></div>
+    </div>
+
+</body>
+```
+
+### 4. 作业1-5
+1. [ 作业1-5](./1images/image4.png)
+2. 代码
+```html
+<style>
+ /* 1 */
+        .all{
+            display: flex;
+            flex-wrap: wrap;
+            margin-bottom: 100px;
+            
+        }
+        .a,.b,.c{
+            width: 100px;
+            height: 100px;
+            margin-right: 20px;
+        }
+        .a{
+            background-color: red;
+        }
+        .b{background-color: aqua;}
+        .c{background-color: blueviolet;}
+        /* 2 */
+        .all2{
+            display: flex;
+            align-content: space-around;
+            flex-direction: column;
+        }
+        .a2,.b2,.c2{
+            width: 100px;
+            height: 100px;
+            margin-right: 20px;
+        }
+        .a2{
+            background-color: red;
+        }
+        .b2{background-color: aqua;}
+        .c2{background-color: blueviolet;}
+    </style>
+
+    <!-- 1 -->
+    <div class="all"> 
+        <div class="a">123423543546546</div>
+        <div class="b"></div>
+        <div class="c"></div>
+    </div>
+    <!-- 2 -->
+    <div class="all2"> 
+        <div class="a2"></div>
+        <div class="b2"></div>
+        <div class="c2"></div>
+    </div>
+```
+
+### 6.骰子
+1. [骰子效果图](./1images/image6.png)
+2. 代码
+```html
+<style>
+       body{
+        display: flex;
+       }
+        /* 1 */
+        .a1{
+            display: flex;
+            width: 100px;
+            height: 100px;
+            border: 2px solid red;
+            border-radius: 5px;
+            justify-content: center;
+            align-items: center;
+            margin-right: 20px;     
+        }
+        .sp1{
+          width: 20px;
+          height: 20px;
+          background-color: black;
+          border-radius: 50%;
+        }
+        /* 2 */
+        .a2{
+            display: flex;
+            width: 100px;
+            height: 100px;
+            border: 2px solid red;
+            border-radius: 5px;
+           flex-direction: column;
+           align-items: center;
+           justify-content: space-around;
+            margin-right: 20px;
+        }
+        .sp2{
+          width: 20px;
+          height: 20px;
+          background-color: black;
+          border-radius: 50%;
+
+        }
+        /* 3 */
+        .a3{
+            display: flex;
+            width: 100px;
+            height: 100px;
+            border: 2px solid red;
+            border-radius: 5px;
+            margin-right: 20px;
+            flex-direction: column;
+            justify-content: space-around; 
+        }
+        .a3>span{
+          width: 18px;
+          height: 18px;
+          background-color: black;
+          border-radius: 50%;
+        }
+        .a3 span:nth-of-type(2){
+            align-self: center;   
+        }
+        .a3 span:nth-of-type(3){
+            align-self: flex-end;
+        }
+        /* 4 */
+        .a4{
+            display: flex; 
+            width: 100px;
+            height: 100px;
+            border: 2px solid red;
+            border-radius: 5px;
+            margin-right: 20px; 
+            justify-content: space-around;
+            align-items: center;
+        }
+        .left4 span,.right4 span{
+            width: 20px;
+            height: 20px;
+            background-color: black;
+            border-radius: 50%;
+            display: block;
+        }
+        .left4,.right4{
+            width: 100px;
+            height: 100px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            align-items: center;
+        }
+        /* 5 */
+        .a5{
+            display: flex; 
+            width: 100px;
+            height: 100px;
+            border: 2px solid red;
+            border-radius: 5px;
+            margin-right: 20px; 
+           justify-content: center;
+        }
+        .a5 span{
+            width: 20px;
+            height: 20px;
+            background-color: black;
+            border-radius: 50%;
+            display: block;
+        }
+        .a5 .left5{
+            display:flex;
+            flex-direction: column;
+            justify-content: space-around;
+        }
+        .a5 .center5{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .a5 .right5{
+            display:flex;
+            flex-direction: column;
+            justify-content: space-around;
+        }
+        /* 6 */
+      .a6{
+            display: flex; 
+            width: 100px;
+            height: 100px;
+            border: 2px solid red;
+            border-radius: 5px;
+            margin-right: 20px; 
+           flex-wrap: wrap;
+           flex-direction: column;
+           justify-content: space-around;
+            align-items: center; 
+      }
+      .a6 span{
+            width: 26px;
+            height: 26px;
+            background-color: black;
+            border-radius: 50%;
+            display: block;
+      }
+      /* 7 */
+      .a7 span{
+        width: 20px;
+        height: 20px;
+        background-color: black;
+        border-radius: 50%;
+        display: block;
+        margin-top: 3px;
+    }
+        .a7{
+            width: 100px;
+            height: 100px;
+            border: 2px solid red;
+            border-radius: 5px;
+            margin-right: 20px; 
+        }
+        .top7{
+            
+            display: flex;
+            justify-content: space-around;
+
+        }
+        .center7{
+            width: 100px;
+            height: 50px;
+            display: flex;
+           flex-direction: column;
+           justify-content: space-around;
+           align-items: center;
+        }
+        .bottom7{
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+     /* 8 */
+        .a8{
+            width: 100px;
+            height: 100px;
+            border: 2px solid red;
+            border-radius: 5px;
+            margin-right: 20px; 
+        }
+        .a8 span{
+            width: 20px;
+            height: 20px;
+            background-color: black;
+            border-radius: 50%;
+            display: block;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .a8 .top8{
+            width: 100px;
+            height: 30px;
+             display: flex;
+             justify-content: space-around;
+             align-items: center;
+        }
+        .a8 .center8{
+            height: 40px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 87px;
+            margin-left: 6px;
+        }
+        .a8 .bottom8{
+            display: flex;
+            justify-content: space-around;
+        } 
+        /* 9 */
+        .a9{
+            width: 100px;
+            height: 100px;
+            border: 2px solid red;
+            border-radius: 5px;
+            margin-right: 20px; 
+        }
+        .a9 span{
+            width: 20px;
+            height: 20px;
+            background-color: black;
+            border-radius: 50%;
+            display: block;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .a9 .top9{
+            width: 100px;
+            height: 30px;
+             display: flex;
+             justify-content: space-around;
+             align-items: center;
+        }
+        .a9 .center9{
+            height: 40px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center; 
+        }
+        .a9 .bottom9{
+            display: flex;
+            justify-content: space-around;
+        } 
+    </style>
+</head>
+<body>
+        <div class="a1">
+            <span class="sp1"></span>
+        </div>
+
+        <div class="a2">
+            <span class="sp2"></span>
+            <span class="sp2"></span>
+        </div>
+        <div class="a3">
+            <span></span>
+            <span></span>
+            <span></span>
+        </div>
+        <div class="a4">
+            <div class="left4">
+                <span></span>
+                <span></span>
+            </div>
+            <div class="right4">
+                <span></span>
+                <span></span>
+            </div>
+        </div>
+        <div class="a5">
+           <div class="left5">
+                <span></span>
+                <span></span>
+           </div>
+           <div class="center5">
+                <span></span>
+           </div>
+           <div class="right5">
+            <span></span>
+            <span></span>
+           </div>
+        </div>
+        <div class="a6">
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+        </div>
+        <div class="a7">
+            <div class="top7">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+            <div class="center7">
+                <span></span>
+            </div>
+            <div class="bottom7">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+        </div>
+        <div class="a8">
+            <div class="top8">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+            <div class="center8">
+                <span></span>
+                <span></span>
+
+            </div>
+            <div class="bottom8">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+        </div>
+        <div class="a9">
+            <div class="top9">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+            <div class="center9">
+                <span></span>
+                <span></span>
+                <span></span> 
+            </div>
+            <div class="bottom9">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+        </div>
+</body>
+</html>
+```
+
+### 7.酷狗播放列表
+1. [酷狗播放列表](./1images/image7.png)
+2. 代码
+```html
+<style>
+        *{
+            margin: 0;
+            padding: 0;
+        }
+        .up{
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            position: relative;
+        }
+        .up-1,.up-2,.up-3,.up-4,.bott-1,.bott-2,.bott-3,.bott-4{
+            width: 150px;
+            height: 210px;
+        }
+        p{
+            font-size: 13px;
+            width: 60px;
+            height: 18px;
+            line-height: 18px;
+            color: white;
+           display: inline;
+        }
+        img{
+            width: 13px;
+            height: 15px;
+            margin-left: 15px;
+            margin-top: 120px;
+        }
+        span{
+         display: block;
+         margin-top: 10px;
+        }
+        .img-1{
+            background-image: url(./1images/flex-01.png);
+            width: 150px;
+            height: 150px;
+            border-radius: 8px;
+        }
+        .img-2{
+            background-image: url(./1images/flex-02.jpg);
+            width: 150px;
+            height: 150px;
+            border-radius: 8px;
+        }
+        .img-3{
+            background-image: url(./1images/flex-03.jpg);
+            width: 150px;
+            height: 150px;
+            border-radius: 8px;
+        }
+        .img-4{
+            background-image: url(./1images/flex-04.jpg);
+            width: 150px;
+            height: 150px;
+            border-radius: 8px;
+        }
+        .img-5{
+            background-image: url(./1images/flex-05.jpg);
+            width: 150px;
+            height: 150px;
+            border-radius: 8px;
+        }
+        .img-6{
+            background-image: url(./1images/flex-06.jpg);
+            width: 150px;
+            height: 150px;
+            border-radius: 8px;
+        }
+        .img-7{
+            background-image: url(./1images/flex-07.jpg);
+            width: 150px;
+            height: 150px;
+            border-radius: 8px;
+        }
+        .img-8{
+            background-image: url(./1images/flex-08.jpg);
+            width: 150px;
+            height: 150px;
+            border-radius: 8px;
+        }
+        .bott{
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+    </style>
+<body>
+    <div>
+        <div class="up">
+            <div class="up-1">
+                <div class="img-1"> 
+                    <div class="nei">
+                        <img src="./1images/icon_play.png" alt="">
+                         <p>2444.0万</p>
+                    </div>  
+                </div>
+                <span>催眠：Delta脑波音乐减压深层睡眠</span>
+            </div>
+            <div class="up-2">
+                <div class="img-2"> 
+                    <img src="./1images/icon_play.png" alt="">
+                    <p>2444.0万</p>
+                </div>
+                
+                <span>催眠：Delta脑波音乐减压深层睡眠</span>
+            </div>
+            <div class="up-3">
+                <div class="img-3"> 
+                    <img src="./1images/icon_play.png" alt="">
+                    <p>2444.0万</p>
+                </div>
+                
+                <span>催眠：Delta脑波音乐减压深层睡眠</span>
+            </div>
+            <div class="up-4">
+                <div class="img-4"> 
+                    <img src="./1images/icon_play.png" alt="">
+                    <p>2444.0万</p>
+                </div>
+                
+                <span>催眠：Delta脑波音乐减压深层睡眠</span>
+            </div>
+        </div>
+        <div class="bott">
+            <div class="bott-1">
+                <div class="img-5"> 
+                    <img src="./1images/icon_play.png" alt="">
+                    <p>2444.0万</p>
+                </div>
+                <span>催眠：Delta脑波音乐减压深层睡眠</span>
+            </div>
+            <div class="bott-2">
+                <div class="img-6"> 
+                    <img src="./1images/icon_play.png" alt="">
+                    <p>2444.0万</p>
+                </div>
+                <span>催眠：Delta脑波音乐减压深层睡眠</span>
+            </div>
+            <div class="bott-3">
+                <div class="img-7">
+                    <img src="./1images/icon_play.png" alt="">
+                     <p>2444.0万</p>
+                </div>
+                <span>催眠：Delta脑波音乐减压深层睡眠</span>
+            </div>
+            <div class="bott-4">
+                <div class="img-8">
+                    <img src="./1images/icon_play.png" alt=""> 
+                    <p>2444.0万</p>
+                </div>
+                <span>催眠：Delta脑波音乐减压深层睡眠</span>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
+```
+
+
+### 8.今日头条
+1. [今日头条](./1images/image8.png)
+2. 代码
+```html
+<style>
+        *{
+            margin:0;
+            padding: 0;
+        }
+        .remen{
+            width: 490px;
+            height: 50px;
+            line-height: 50px;
+        }
+        /* 热门播放img */
+        .top1 img{
+            float: left;
+            width: 27px;
+            height: 27px;
+            margin-top: 10px; 
+        }
+        .top1 p{
+            float: left;
+            padding-left: 10px;
+            font-size: 20px;
+            font-weight: 400;
+        }
+        .top2{
+            float: right;
+        }
+        .top2 p{
+            width: 100px;
+           color: red;
+        }
+        .top2 img{
+            float: left;
+            width: 17px;
+            height: 17px;
+            margin-top: 17px;
+            margin-right: 10px;
+        }
+        /* 鱼 */
+        .img1 {
+            background-image: url(./1images/toutiao-02.jpg);
+            width: 200px;
+            height: 150px;
+           background-position: center;
+           background-size: cover;
+           background-repeat: no-repeat;
+           float: left;
+           margin-bottom: 20px;
+           margin-right: 8px;
+        }
+        .fish1{
+            height: 150px;
+            width: 500px;
+        }
+        .content{
+            display: flex;
+            flex-direction: column;
+            width: 490px;
+            height: 750px;
+            margin-left: 30px;
+        }
+        .right{
+            width: 470px;
+            height: 770px;   
+        }
+        .wu p{
+          font-size: 20px;
+        }
+        .wu{
+            margin-bottom: 15px;  
+        }
+        .one {
+            width: 80px;
+            height: 30px;
+            line-height: 30px;
+            text-align: center;
+            background-color: #fff3f2;
+            margin-left: 210px;
+            border-radius: 8px;
+            color: red;
+            margin-bottom: 15px;
+        }
+        .two span{
+            color: #999999;
+        }
+        .two span:nth-of-type(2){
+            float: right;
+        }
+    </style>
+</head>
+<body>
+    <div class="content">
+
+        <div class="remen">
+            <div class="top1">
+                <img src="./1images/icon-play.png" alt="">
+                <p>热门视频</p>
+            </div>
+            <div class="top2">
+                <img src="./1images/icon-sx2.png" alt="">
+                <p>换一换</p>
+            </div>
+        </div>
+        <!-- 1 -->
+        <div class="fish">
+            <div class="fish1">
+                <div class="img1">
+                    
+                </div>
+
+               <div class="right">
+                    <div class="wu">
+                        <p>无论做什么鱼：最忌讳与放盐和料酒腌制</p>
+                    </div>
+                    <div class="one">
+                        1万评论
+                    </div>
+                    <div class="two">
+                        <span>148万次观看</span>
+                        <span>司马南频道</span>
+                    </div>
+               </div>
+            </div>
+        </div>
+        <!-- 2 -->
+        <div class="fish">
+            <div class="fish1">
+                <div class="img1">
+                    
+                </div>
+               <div class="right">
+                    <div class="wu">
+                        <p>无论做什么鱼：最忌讳与放盐和料酒腌制</p>
+                    </div>
+                    <div class="one">
+                        1万评论
+                    </div>
+                    <div class="two">
+                        <span>148万次观看</span>
+                        <span>司马南频道</span>
+                    </div>
+               </div>
+            </div>
+        </div>
+        <!-- 3 -->
+        <div class="fish">
+            <div class="fish1">
+                <div class="img1">
+                </div>
+
+               <div class="right">
+                    <div class="wu">
+                        <p>无论做什么鱼：最忌讳与放盐和料酒腌制</p>
+                    </div>
+                    <div class="one">
+                        1万评论
+                    </div>
+                    <div class="two">
+                        <span>148万次观看</span>
+                        <span>司马南频道</span>
+                    </div>
+               </div>
+            </div>
+        </div>
+        <!-- 4 -->
+        <div class="fish">
+            <div class="fish1">
+                <div class="img1">  
+                </div>
+
+               <div class="right">
+                    <div class="wu">
+                        <p>无论做什么鱼：最忌讳与放盐和料酒腌制</p>
+                    </div>
+                    <div class="one">
+                        1万评论
+                    </div>
+                    <div class="two">
+                        <span>148万次观看</span>
+                        <span>司马南频道</span>
+                    </div>
+               </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
+``` 
+
+
+### 9.圣杯经典图
+1. [圣杯压缩前](./1images/image9.png)
+   [圣杯压缩后](./1images/image9-1.png)
+2. 代码
+```html
+ <style>
+        *{
+            margin: 0;
+            padding: 0;
+        }
+        .center{
+            display: flex;
+            /* justify-content: space-between; */
+        }
+        .top{
+            height: 70px;
+            background-color: #fbf7e6;
+        }
+        .top p{
+            height: 70px;
+            line-height: 70px;
+            text-align: center;
+            font-size: 20px;
+        }
+        .left{
+            background-color: #4f9738;
+            width: 400px;
+            height: 760px;
+            text-align: center;
+          
+        }
+       .center1{
+        width: 600px;
+        height: 760px;
+        text-align: center;
+       }
+        .right{
+            background-color: #823384;
+            width: 400px;
+            height: 760px;
+            text-align: center;
+        }
+        .bottom{
+            height: 100px;
+            font-size: 30px;
+            color: white;
+            background-color: black;
+            text-align: center;
+            line-height: 100px;
+        }
+        @media screen and (max-width:500px) {
+            .center{
+                flex-direction: column;
+            }
+            .left{  
+                width: 100%;
+                order: 2;
+                height: 300px;
+            }
+            .center1{
+                height: 300px;
+                
+                width: 100%;
+                order: 1;
+            }
+            .right{
+                height: 300px;
+                
+                width: 100%;
+                order: 3;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- 小于580px就下排列 -->
+     <div class="con">
+        <div class="top">
+            <p>一天到晚游泳的鱼</p>
+        </div>
+        <div class="center">
+            <div class="left">
+                <p>左边</p>
+            </div>
+            <div class="center1">
+                <p>中间</p>
+            </div>
+            <div class="right">
+                <p>右边</p>
+            </div>
+        </div>
+        <div class="bottom">向天再借一百年</div>
+     </div>
+</body>
+</html>
+
+
+```
+
+
+
+
+### 10.携程
+1. [携程页面效果图](./1images/image10.png)
+2. 代码
+```html
+ <style>
+        *{
+            margin: 0;
+            padding: 0;
+        }
+        .all{
+            width: 600px;
+            margin: auto;
+        }
+        .sou{
+            width: 600px;
+            height: 58px;
+            display: flex;
+        }
+        .sou1 input{
+            width: 400px;
+            height: 30px;
+            margin-left: 20px;
+            margin-top: 13px;
+            border-radius: 10px;
+            background: url(./1images/xiecheng-sprite.png) no-repeat; 
+            background-position:  -120px -560px;
+            text-indent: 30px;
+            border: 1px solid #999;
+            box-shadow: 1px 1px 5px;
+        }
+        .sou2{
+        margin-left: 125px;
+
+        }
+        .sou2-img{
+            width: 35px;
+            height: 36px;
+            background-image: url(./1images/xiecheng-sprite.png);
+            background-repeat: no-repeat;
+            background-position: -120px -619px; 
+            border-radius: 50%;
+            background-color: #0e9fdc;
+        }
+        .sou2 p{
+            color: #0e9fdc;
+        }
+        .top{
+            background-image: url(./1images/xiecheng-focus.jpg);
+            width: 600px;
+            height: 133px;
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
+        .jd{
+            width: 600px;
+            height: 90px;
+            display: flex;
+            
+            justify-content: space-around;
+            align-items: center;
+
+        }
+        .jd11,.jd22,.jd33,.jd44,.jd55{
+            width: 50px;
+            height: 51px;
+           
+            background-size: cover;
+            background-repeat: no-repeat;
+        }
+        .jd p{
+            margin-left: -8px;
+        }
+        
+        .jd11 {
+            background-image: url(./1images/xiecheng-localnav_bg.png);
+            background-position: 0px 0px;
+        }
+        .jd22{
+            background-image: url(./1images/xiecheng-localnav_bg.png);
+            background-position: 0px -50px;
+        }
+        .jd33{
+            background-image: url(./1images/xiecheng-localnav_bg.png);
+            background-position: center;
+        }
+        .jd44{
+            background-image: url(./1images/xiecheng-localnav_bg.png);
+            background-position: 0px -153px;
+        }
+        .jd55{
+            background-image: url(./1images/xiecheng-localnav_bg.png);
+            background-position: 0px -203px;
+
+        }
+        /* 酒店 */
+      
+        .hotel{
+            width: 600px;
+            height: 370px;
+        }
+        .red{
+           background-image: linear-gradient(to right,#fa6354,#fb954e);
+           border-radius: 10px 10px 0 0;
+        }
+        .blue{
+            background-image: linear-gradient(to right,#4c93ec,#53baed);
+        }
+        .green{
+            background-image: linear-gradient(to right,#3ac4a6,#69d35f);
+           border-radius: 0 0 10px 10px;
+
+        }
+        .red,.blue,.green{
+            width: 600px;
+            height: 120px;
+            border-bottom: 1px solid white;
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 3px;
+            
+        }
+        .red .left,.blue .left,.green .left{
+            width: 210px;
+            height: 120px;
+            margin-bottom: 3px;
+            background-image: url(./1images/xiecheng-hotel.png);
+            background-size: contain;
+           background-repeat: no-repeat;
+           background-position: bottom;
+           display: flex;
+           justify-content: center;
+           
+
+        }
+        .red .left span,.blue .left span,.green .left span{
+            font-size: 20px;
+            color: white;
+           margin-top: 10px;
+        }
+        .red .center,.blue .center,.green .center{
+            width: 190px;
+            height: 120px;
+            border: 1px solid white;
+            
+        }
+        .red .right,.blue .right,.green .right{
+            width: 194px;
+            height: 120px;
+            margin-top: 1px;
+        }
+        .rcc1,.rcc3{
+            width: 190px;
+            height: 60px;
+            border-bottom: 1px solid white;
+        }
+       .rc1 span,.rc3 span{
+        width: 190px;
+        height: 120px;
+        line-height: 60px;
+        margin-left: 60px;
+        color: white;
+       }
+
+
+        /* wifi */
+        .wifi{
+            width: 600px;
+            height: 160px;
+        }
+        .wifis-top{
+            width: 600px;
+            height: 75px;
+            display: flex;
+            justify-content: space-around;
+            margin-top: 5px;
+        }
+        .t11{
+            width: 60px;
+            height: 65px;
+        }
+        .t11 span{
+            margin-left: 10px;
+           
+        }
+        .wifis-top .t1,.wifis-bottom .t2{
+            width: 50px;
+            height: 50px;
+            background-image: url(./1images/xiecheng-subnav-bg.png);
+            background-repeat: no-repeat;
+            background-position: 6px 10px;
+        }
+        
+        .wifis-bottom{
+            width: 600px;
+            height: 75px;
+            display: flex;
+            justify-content: space-around;
+           
+        }
+
+       
+        /* hot */
+        .hot{
+            width: 600px;
+            height: 80px;
+           display: flex;
+           justify-content: space-around;
+           align-items: center;
+        }
+        .hot-left{
+            background-image: url(./1images/xiecheng-hot.png);
+            width: 155px;
+            height: 30px;
+            background-repeat: no-repeat;
+            background-size: cover;
+            background-position: 0px -35px;
+           
+        }
+        .hot-right{
+            width: 150px;
+            height: 35px;
+            line-height: 35px;
+            text-align: center;
+            background-color: #f76995;
+            border-radius: 15px;
+            margin-left: 250px;
+        }
+        .hot-right span{
+          color: white;
+         
+        }
+        /* beti */
+        .beti{
+            width: 600px;
+            height: 200px;
+            display: flex;
+            justify-content: space-between;
+        }
+        .beti-left{
+            background-image: url(./1images/xiecheng-pic1.jpg);
+            width: 300px;
+            height: 200px;
+            background-size: contain;
+            background-repeat: no-repeat;
+            
+        }
+        .beti-right{
+            background-image: url(./1images/xiecheng-pic2.jpg);
+            width: 300px;
+            height: 200px;
+            background-size: contain;
+            background-repeat: no-repeat;
+        }
+
+        /* pay */
+        .pay{
+            width: 600px;
+            height: 240px;
+        }
+        [class^="pays"]{
+            width: 300px;
+            height: 120px;
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
+        .p1{
+            display: flex;
+        }
+        .p2{
+            display: flex;
+            margin-top: 0;
+        }
+        .pays1{
+            background-image: url(./1images/xiecheng-pic3.jpg);        
+        }
+        .pays2{
+            background-image: url(./1images/xiecheng-pic4.jpg);
+        }
+        .pays3{
+            background-image: url(./1images/xiecheng-pic5.jpg);
+        }
+        .pays4{
+            background-image: url(./1images/xiecheng-pic6.jpg);
+        }
+    </style>
+</head>
+<body>
+    <div class="all">
+        
+        <div class="sou">
+            <div class="sou1">
+                <input class="soso" type="text" placeholder="搜索:目的地/酒店/景点/航班号">
+            </div>
+            <div class="sou2">
+               <div class="sou2-img"></div>
+                <p>我的</p>
+            </div>
+           
+        </div>
+
+        <div class="top"></div>
+
+        <div class="jd">
+            <div class="jd1">
+                <div class="jd11">
+                    <img src="" alt="">
+                    
+                </div>
+                <p>景点·玩乐</p>
+            </div>
+            <div class="jd2">
+                <div class="jd22">
+                    <img src="" alt="">
+                   
+                </div>
+                <p>景点·玩乐</p>
+            </div>
+            <div class="jd3">
+                <div class="jd33">
+                    <img src="" alt="">
+                  
+                </div>
+                <p>景点·玩乐</p>
+            </div>
+            <div class="jd4">
+                <div class="jd44">
+                    <img src="" alt="">
+                    
+                </div>
+                <p>景点·玩乐</p>
+            </div>
+            <div class="jd5">
+                <div class="jd55">
+                    <img src="" alt="">
+                    
+                </div>
+                <p>景点·玩乐</p>
+            </div>
+        </div>
+
+        <div class="hotel">
+            <!--红色部分 -->
+            <div class="red">
+                <!-- 红色部分左边 -->
+                 <div class="left"><span>海外酒店</span></div>
+                 <!-- 红色部分中间 -->
+                  <div class="center">
+                    <div class="rc1">
+                        <div class="rcc1"><span>海外酒店</span></div>
+                        <div class="rcc2"><span>特价酒店</span></div>
+                    </div>
+                  </div>
+                 <!-- 红色部分右边 -->
+                  <div class="right">
+                    <div class="rc3">
+                        <div class="rcc3"><span>海外酒店</span></div>
+                        <div class="rcc4"><span>特价酒店</span></div>
+                    </div>
+                  </div>
+            </div>
+    
+            <!-- 蓝色部分 -->
+             <div class="blue">
+                <div class="left"><span>海外酒店</span></div>
+                 <!-- 红色部分中间 -->
+                  <div class="center">
+                    <div class="rc1">
+                        <div class="rcc1"><span>海外酒店</span></div>
+                        <div class="rcc2"><span>特价酒店</span></div>
+                    </div>
+                  </div>
+                 <!-- 红色部分右边 -->
+                  <div class="right">
+                    <div class="rc3">
+                        <div class="rcc3"><span>海外酒店</span></div>
+                        <div class="rcc4"><span>特价酒店</span></div>
+                    </div>
+                  </div>
+             </div>
+    
+             <!-- 绿色部分 -->
+              <div class="green">
+                <div class="left"><span>海外酒店</span></div>
+                <!-- 红色部分中间 -->
+                 <div class="center">
+                   <div class="rc1">
+                       <div class="rcc1"><span>海外酒店</span></div>
+                       <div class="rcc2"><span>特价酒店</span></div>
+                   </div>
+                 </div>
+                <!-- 红色部分右边 -->
+                 <div class="right">
+                   <div class="rc3">
+                       <div class="rcc3"><span>海外酒店</span></div>
+                       <div class="rcc4"><span>特价酒店</span></div>
+                   </div>
+                 </div>
+              </div>
+        </div>
+
+        <div class="wifi">
+            <div class="wifis-top">
+                <div class="t11">
+                    <div class="t1"></div>
+                    <span>电话费</span>
+                </div>
+                <div class="t11">
+                    <div class="t1"></div>
+                    <span>电话费</span>
+                </div>
+                <div class="t11">
+                    <div class="t1"></div>
+                    <span>电话费</span>
+                </div>
+                <div class="t11">
+                    <div class="t1"></div>
+                    <span>电话费</span>
+                </div>
+                <div class="t11">
+                    <div class="t1"></div>
+                    <span>电话费</span>
+                </div>
+            </div>
+            <div class="wifis-bottom">
+                <div class="t11">
+                    <div class="t2"></div>
+                    <span>电话费</span>
+                </div>
+                <div class="t11">
+                    <div class="t2"></div>
+                    <span>电话费</span>
+                </div>
+                <div class="t11">
+                    <div class="t2"></div>
+                    <span>电话费</span>
+                </div>
+                <div class="t11">
+                    <div class="t2"></div>
+                    <span>电话费</span>
+                </div>
+                <div class="t11">
+                    <div class="t2"></div>
+                    <span>电话费</span>
+                </div>
+            </div>
+        </div>
+        <div class="hot">
+            <div class="hot-left"></div>
+            <div class="hot-right">
+                <span>获得更多福利 ></span>
+            </div>
+        </div>
+        <div class="beti">
+            <div class="beti-left"></div>
+            <div class="beti-right"></div>
+        </div>
+        <div class="pay">
+            <div class="p1">
+                <div class="pays1"></div>
+                <div class="pays2"></div>
+            </div>
+            <div class="p2">
+                <div class="pays3"></div>
+            <div class="pays4"></div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
+```
+
+
+
+
+### 11.京东页面
+1. [京东页面效果图](./1images/image11.png)
+2.
+```html
+ <style>
+        *{
+            margin: 0;
+            padding: 0;
+        }
+        .box{
+            width: 500px;
+            margin: auto;
+        }
+/*  */
+        .ad{
+            width: 500px;
+            height: 55px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background-color: #333433;
+        }
+        .cha{
+            width: 10px;
+            height: 10px;
+            margin-left: 19px;
+            line-height: 10px;
+            color: #999;
+        }
+        .jd{
+            width: 35px;
+            height: 35px;
+            background-image: url(./1images/dh5-logo.png);
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
+        .text-1{
+            width: 220px;
+            height: 20px;
+            font-size: 18px;
+            line-height: 20px;
+            color: white;
+        }
+        .open{
+            width: 125px;
+            height: 55px;
+            background-color: #f43515;
+        }
+        .open1{
+            color: white;
+            width: 125px;
+            height: 55px;
+            line-height: 55px;
+            text-align: center;
+
+        }
+
+
+
+ /*  */
+        .find{
+            width: 500px;
+            height: 55px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            position: fixed;
+            background-color: #c30a0b;
+           
+        }
+        .find-1{
+            width: 30px;
+            height: 30px;
+            background-image: url(./1images/dh5-list.png);
+            background-repeat: no-repeat;
+            background-size: contain;
+            line-height: 30px;
+
+        }
+        .find-2 input{
+            width: 370px;
+            height: 40px;
+            border-radius: 20px;
+            text-indent: 60px;
+            border: 1px solid #999;
+            
+        }
+      .find-3{
+        color: white;
+      }
+
+
+
+/*  */
+        .year{
+            width: 500px;
+            height: 240px;
+            background-image: url(./1images/jdh5-banner.png);
+            background-repeat: no-repeat;
+            background-size: contain;
+            background-color: #c30a0b;
+            background-position: center bottom;
+        }
+/*  */
+        .year2{
+            width: 500px;
+            height: 165px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            background-color: #c11b0e;
+        }
+        .year2 .img1{
+            width: 130px;
+            height: 130px;
+            background-image: url(./1images/dh5-nianhuo1.png);
+            background-repeat: no-repeat;
+            background-size: cover;
+            background-position: center center;
+
+        }
+        .year2 .img2{
+            width: 240px;
+            height: 160px;
+            background-image: url(./1images/dh5-nianhuo2.png);
+            background-repeat: no-repeat;
+            background-size: cover;
+            background-position: center bottom;
+        }
+        .year2 .img3{
+            width: 130px;
+            height: 130px;
+            background-image: url(./1images/jdh5-nianhuo3.png);
+            background-repeat: no-repeat;
+            background-size: cover;
+            background-position: center center;
+        }
+
+
+
+/*  */
+        .mato{
+            width: 500px;
+            height: 200px;
+        }
+        .mato-top,.mato-bot{
+            display: flex;
+            justify-content: space-around;
+            margin-top: 12px;
+
+        }
+        .top1,.bot1{
+            width: 75px;
+            height: 80px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: space-around; 
+        }
+        .top1 span,.bot1 span{
+            color: #999;
+        }
+        [class^="mato-img"]{
+            width: 55px;
+            height: 45px;
+        }
+         /* 图片 */
+         .mato-img1{
+            background-image: url(./1images/dh5-nav1.png);
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
+        .mato-img2{
+            background-image: url(./1images/dh5-nav2.png);
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
+        .mato-img3{
+            background-image: url(./1images/dh5-nav3.png);
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
+        .mato-img4{
+            background-image: url(./1images/dh5-nav4.png);
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
+        .mato-img5{
+            background-image: url(./1images/dh5-nav5.png);
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
+        .mato-img6{
+            background-image: url(./1images/dh5-nav6.png);
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
+        .mato-img7{
+            background-image: url(./1images/dh5-nav7.png);
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
+        .mato-img8{
+            background-image: url(./1images/dh5-nav8.png);
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
+        .mato-img9{
+            background-image: url(./1images/dh5-nav9.png);
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
+        .mato-img10{
+            background-image: url(./1images/dh5-nav10.png);
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
+
+/*  */
+        .miao{
+            width: 500px;
+            height: 38px;
+        }
+
+        .miao1{
+            display: flex;
+            margin-left: 10px;
+            align-items: center;
+            float: left;
+        }
+        .miao1 span:nth-of-type(2){
+            margin-left: 20px;
+        }
+        .miao span{
+            margin-left: 10px;
+            font-weight: bold;
+
+        }
+        .miao-img{
+            width: 30px;
+            height: 30px;
+            background-image: url(./1images/dh5-ms-dc.png);
+            background-repeat: no-repeat;
+            background-size: contain;
+            margin-left: 10px;
+            margin-top: 5px;
+
+
+        }
+        .miao2{
+            width: 15px;
+            height: 15px;
+            float: right;
+            margin-right: 10px;
+            margin-top: 10px;
+            background-image: url(./1images/dh5-ms-right.png);
+            background-repeat: no-repeat;
+            background-size: contain;
+
+        }
+       
+/*  */
+        .money{
+            width: 500px;
+            height: 150px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+        .money1{
+            width: 80px;
+            height: 110px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            align-items: center;
+        }
+        .img-1,.img-2,.img-3,.img-4,.img-5,.img-6{
+            width: 80px;
+            height: 100px;
+        }
+        .img-1{
+            background-image: url(./1images/jdh5-ms1.jpg);
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
+        .img-2{
+            background-image: url(./1images/jdh5-ms2.jpg);
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
+        .img-3{
+            background-image: url(./1images/jdh5-ms3.jpg);
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
+        .img-4{
+            background-image: url(./1images/jdh5-ms4.jpg);
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
+        .img-5{
+            background-image: url(./1images/jdh5-ms5.jpg);
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
+        .img-6{
+            background-image: url(./1images/jdh5-ms6.jpg);
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
+        .money span{
+            color: red;
+        }
+       
+/*  */
+        .mi{
+            width: 500px;
+            height: 270px;
+           display: flex;
+           justify-content: space-around;
+           align-items: center;
+        }
+        .mi-img1{
+            width: 240px;
+            height: 260px;
+            background-image: url(./1images/jdh5-product1.webp);
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
+        .mi-img2{
+            width: 240px;
+            height: 260px;
+            background-image: url(./1images/jdh5-product2.webp);
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
+/*  */
+        .js{
+            width: 500px;
+            height: 60px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            position: fixed;
+            bottom: 0;
+            background-color: #ffffff;
+
+        }
+        .text{
+            width: 72px;
+            height: 23px;
+            text-align: center;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="box">
+
+        <!-- ad -->
+         <div class="ad">
+            <div class="cha">x</div>
+            <div class="jd"></div>
+            <div class="text-1">打开京东APP,购物更轻松</div>
+           <div class="open">
+            <div class="open1">立即打开</div>
+           </div>
+         </div>
+
+         <!-- 搜索 find -->
+          <div class="find">
+            <div class="find-1"></div>
+            <div class="find-2">
+                
+                <input type="text" placeholder="键盘鼠标套装">
+            </div>
+            <div class="find-3">登录</div>
+          </div>
+
+          <!-- year -->
+           <div class="year"></div>
+
+           <!-- year2 -->
+            <div class="year2">
+                <div class="img1"></div>
+                <div class="img2"></div>
+                <div class="img3"></div>
+            </div>
+
+            <!-- mato -->
+             <div class="mato">
+                <!--  -->
+                <div class="mato-top">
+                    <div class="top1">
+                        <div class="mato-img1"></div>
+                        <span>京东超市</span>
+                    </div>
+                    <div class="top1">
+                        <div class="mato-img2"></div>
+                        <span>京东超市</span>
+                    </div>
+                    <div class="top1">
+                        <div class="mato-img3"></div>
+                        <span>京东超市</span>
+                    </div>
+                    <div class="top1">
+                        <div class="mato-img4"></div>
+                        <span>京东超市</span>
+                    </div>
+                    <div class="top1">
+                        <div class="mato-img5"></div>
+                        <span>京东超市</span>
+                    </div>
+                </div>
+                <!--  -->
+                <div class="mato-bot">
+                    <div class="bot1">
+                        <div class="mato-img6"></div>
+                        <span>京东超市</span>
+                    </div>
+                    <div class="bot1">
+                        <div class="mato-img7"></div>
+                        <span>京东超市</span>
+                    </div>
+                    <div class="bot1">
+                        <div class="mato-img8"></div>
+                        <span>京东超市</span>
+                    </div>
+                    <div class="bot1">
+                        <div class="mato-img9"></div>
+                        <span>京东超市</span>
+                    </div>
+                    <div class="bot1">
+                        <div class="mato-img10"></div>
+                        <span>京东超市</span>
+                    </div>
+                </div>
+             </div>
+
+        <!-- 秒杀 miao -->
+         <div class="miao">
+            <div class="miao1">
+                <span>京东秒杀</span>
+                <span>18</span>
+                <div class="miao-img"></div>
+                <span>更多秒杀</span>
+            </div>
+            <div class="miao2"></div>
+
+         </div>
+
+         <!-- money -->
+          <div class="money">
+            <div class="money1">
+                <div class="img-1"></div>
+                <span>￥25</span>
+            </div>
+            <div class="money1">
+                <div class="img-2"></div>
+                <span>￥2568</span>
+            </div>
+            <div class="money1">
+                <div class="img-3"></div>
+                <span>￥28.8</span>
+            </div>
+            <div class="money1">
+                <div class="img-4"></div>
+                <span>￥19.7</span>
+            </div>
+            <div class="money1">
+                <div class="img-5"></div>
+                <span>￥420</span>
+            </div>
+            <div class="money1">
+                <div class="img-6"></div>
+                <span>￥42.9</span>
+            </div>
+           
+          </div>
+
+          <!-- mi -->
+           <div class="mi">
+                <div class="mi-img1"></div>
+                <div class="mi-img2"></div>
+           </div>
+
+           <!-- 结尾 -->
+            <div class="js">
+                <div class="text">首页</div>
+                <div class="text">分类</div>
+                <div class="text">京喜</div>
+                <div class="text">购物车</div>
+                <div class="text">未登录</div>
+            </div>
+    </div>
+</body>
+</html>
+```
+
+### 12.布局
+1. [布局效果图](./1images/image12.png)
+2. 代码
+```html
+<style>
+        .box{
+            width: 800px;
+            height: 600px;
+            border: 20px solid #cdd3f5;
+        }
+        .top-box1,.top-box2,.top-box3,.top-box4,.top-box5{
+            width: 80px;
+            height: 80px;
+            border: 1px solid black;
+            background-color: #cdd3f5;
+        }
+        .top .top-left{
+            display: flex;
+            float: left;
+            width: 440px;
+            justify-content: space-around;
+
+        }
+        .top .top-box5{
+            display: flex;
+            float: right;
+            margin-right: 20px;
+            
+        }
+        .top{
+            margin-top: 20px;
+            height: 120px;
+        }
+
+        .bk{
+            
+            height: 20px;
+            background-color: #cdd3f5;
+        }
+
+        /* .bottom{} */
+        .left{
+            width: 300px;
+            height: 500px;
+            float: left;
+        }
+        .bigbox{
+            width: 255px;
+            height: 325px;
+            background-color: #cdd3f5;
+           /* display: flex; */
+          margin: 20px;
+          border: 1px solid black;
+        }
+        .small{
+            display: flex;
+            justify-content: space-around;
+            
+        }
+        .bottom{
+            height: 500px;
+            width: 800px;
+        }
+        .small-box1,.small-box2,.small-box3{
+            width: 50px;
+            height: 50px;
+            background-color: #cdd3f5;
+            border: 1px solid black;
+          
+        }
+        .right{
+            position: absolute;
+            margin-top: 20px;
+        }
+        
+        .long-box1,.long-box2,.long-box3,.long-box4,.long-box5,.long-box6,.long-box7{
+            width: 480px;
+            height: 40px;
+            background-color: #cdd3f5;
+            margin-right: 20px;
+            border: 1px solid black;
+            margin-left: 300px;
+            margin-bottom: 18px;
+        }
+    </style>
+<body>
+    <div class="box">
+        <div class="top">
+            <div class="top-left">
+                <div class="top-box1"></div>
+                <div class="top-box2"></div>
+                <div class="top-box3"></div>
+                <div class="top-box4"></div>
+            </div>
+                <div class="top-box5"></div>
+        </div>
+        <div class="bk"></div>
+        <div class="bottom">
+            <div class="left">
+                <div class="bigbox"></div>
+                <div class="small">
+                    <div class="small-box1"></div>
+                    <div class="small-box2"></div>
+                    <div class="small-box3"></div>
+                </div>
+            </div>
+
+            <div class="right">
+                <div class="long-box1"></div>
+                <div class="long-box2"></div>
+                <div class="long-box3"></div>
+                <div class="long-box4"></div>
+                <div class="long-box5"></div>
+                <div class="long-box6"></div>
+                <div class="long-box7"></div>
+            </div>
+
+        </div>
+    </div>
+</body>
+</html>
+```
\ No newline at end of file