diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/29.flex\345\270\203\345\261\200h5\347\273\203\344\271\240/1.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/29.flex\345\270\203\345\261\200h5\347\273\203\344\271\240/1.html" new file mode 100644 index 0000000000000000000000000000000000000000..68a7a0a3d648e80ec4c36189f34c72ddc98ed36e --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/29.flex\345\270\203\345\261\200h5\347\273\203\344\271\240/1.html" @@ -0,0 +1,29 @@ + + + + + +Flex Container Example + + + + +
+
Item 1
+
Item 2
+
Item 3
+
+ + + \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/29.flex\345\270\203\345\261\200h5\347\273\203\344\271\240/2.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/29.flex\345\270\203\345\261\200h5\347\273\203\344\271\240/2.html" new file mode 100644 index 0000000000000000000000000000000000000000..53174772e0ea5923a0770f121459dcb3442f3590 --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/29.flex\345\270\203\345\261\200h5\347\273\203\344\271\240/2.html" @@ -0,0 +1,56 @@ + + + + + +Flex Align Examples + + + + + +
+
Item 1
+
Item 2
+
Item 3
+
+ + +
+
Item 1
+
Item 2
+
Item 3
+
+ + +
+
Item 1
+
Item 2
+
Item 3
+
+ + + \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/29.flex\345\270\203\345\261\200h5\347\273\203\344\271\240/3.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/29.flex\345\270\203\345\261\200h5\347\273\203\344\271\240/3.html" new file mode 100644 index 0000000000000000000000000000000000000000..d558e26bdf929aab887d824b27d26a639b79df47 --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/29.flex\345\270\203\345\261\200h5\347\273\203\344\271\240/3.html" @@ -0,0 +1,55 @@ + + + + + +Flex Vertical Align Examples + + + + +
+
Item 1
+
Item 2
+
Item 3
+
+ + +
+
Item 1
+
Item 2
+
Item 3
+
+ + +
+
Item 1
+
Item 2
+
Item 3
+
+ + + \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/29.flex\345\270\203\345\261\200h5\347\273\203\344\271\240/4.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/29.flex\345\270\203\345\261\200h5\347\273\203\344\271\240/4.html" new file mode 100644 index 0000000000000000000000000000000000000000..997beea010aeaa714f02c15ac2a2966a13680118 --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/29.flex\345\270\203\345\261\200h5\347\273\203\344\271\240/4.html" @@ -0,0 +1,29 @@ + + + + + + Document + + + +
+
1
+
2
+
3
+
+ + \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/29.flex\345\270\203\345\261\200h5\347\273\203\344\271\240/5.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/29.flex\345\270\203\345\261\200h5\347\273\203\344\271\240/5.html" new file mode 100644 index 0000000000000000000000000000000000000000..8155c883a60b360bb35fde3ab55e4b532b34d138 --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/29.flex\345\270\203\345\261\200h5\347\273\203\344\271\240/5.html" @@ -0,0 +1,35 @@ + + + + + +Flex Wrap and Align Content Example + + + + +
+
Item 1
+
Item 2
+
Item 3
+
Item 4
+
Item 5
+
Item 6
+ +
+ + + \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/29.flex\345\270\203\345\261\200h5\347\273\203\344\271\240/\351\205\267\347\213\227\346\222\255\346\224\276\345\231\250\345\210\227\350\241\250.HTML" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/29.flex\345\270\203\345\261\200h5\347\273\203\344\271\240/\351\205\267\347\213\227\346\222\255\346\224\276\345\231\250\345\210\227\350\241\250.HTML" new file mode 100644 index 0000000000000000000000000000000000000000..2493ce9e8432ff950dbc23f2519a0a6c6a1882fc --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/29.flex\345\270\203\345\261\200h5\347\273\203\344\271\240/\351\205\267\347\213\227\346\222\255\346\224\276\345\231\250\345\210\227\350\241\250.HTML" @@ -0,0 +1,143 @@ + + + + + + Document + + + +
+
+
+
+
+
2444.0万
+
+
催眠：Delta脑波音乐减压深度睡眠
+
+
+
+
2444.0万
+
+
催眠：Delta脑波音乐减压深度睡眠
+
+
+
+
+
+
2444.0万
+
+
催眠：Delta脑波音乐减压深度睡眠
+
+
+
+
2444.0万
+
+
催眠：Delta脑波音乐减压深度睡眠
+
+
+
+
+
+
2444.0万
+
+
催眠：Delta脑波音乐减压深度睡眠
+
+
+
+
2444.0万
+
+
催眠：Delta脑波音乐减压深度睡眠
+
+
+
+
+
+
2444.0万
+
+
催眠：Delta脑波音乐减压深度睡眠
+
+
+
+
2444.0万
+
+
催眠：Delta脑波音乐减压深度睡眠
+
+
+ + \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/29.flex\345\270\203\345\261\200h5\347\273\203\344\271\240/\351\252\260\345\255\220.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/29.flex\345\270\203\345\261\200h5\347\273\203\344\271\240/\351\252\260\345\255\220.html" new file mode 100644 index 0000000000000000000000000000000000000000..56fc0f35b865748f1a870e16e42aeb82b41f3dbb --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/29.flex\345\270\203\345\261\200h5\347\273\203\344\271\240/\351\252\260\345\255\220.html" @@ -0,0 +1,209 @@ + + + + + + Document + + + + +
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/flex\345\270\203\345\261\200\344\275\234\344\270\2323,4\351\242\230/\344\273\212\346\227\245\345\244\264\346\235\241\347\203\255\351\227\250\350\247\206\351\242\221\345\210\227\350\241\250/icon-play.png" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/flex\345\270\203\345\261\200\344\275\234\344\270\2323,4\351\242\230/\344\273\212\346\227\245\345\244\264\346\235\241\347\203\255\351\227\250\350\247\206\351\242\221\345\210\227\350\241\250/icon-play.png" new file mode 100644 index 0000000000000000000000000000000000000000..90397f22a7692bd8d87b1c55c11acccee885aced Binary files /dev/null and "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/flex\345\270\203\345\261\200\344\275\234\344\270\2323,4\351\242\230/\344\273\212\346\227\245\345\244\264\346\235\241\347\203\255\351\227\250\350\247\206\351\242\221\345\210\227\350\241\250/icon-play.png" differ diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/flex\345\270\203\345\261\200\344\275\234\344\270\2323,4\351\242\230/\344\273\212\346\227\245\345\244\264\346\235\241\347\203\255\351\227\250\350\247\206\351\242\221\345\210\227\350\241\250/icon-sx2.png" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/flex\345\270\203\345\261\200\344\275\234\344\270\2323,4\351\242\230/\344\273\212\346\227\245\345\244\264\346\235\241\347\203\255\351\227\250\350\247\206\351\242\221\345\210\227\350\241\250/icon-sx2.png" new file mode 100644 index 0000000000000000000000000000000000000000..42f24045e7f7595c562edd4e876ae23144285bbd Binary files /dev/null and "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/flex\345\270\203\345\261\200\344\275\234\344\270\2323,4\351\242\230/\344\273\212\346\227\245\345\244\264\346\235\241\347\203\255\351\227\250\350\247\206\351\242\221\345\210\227\350\241\250/icon-sx2.png" differ diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/flex\345\270\203\345\261\200\344\275\234\344\270\2323,4\351\242\230/\344\273\212\346\227\245\345\244\264\346\235\241\347\203\255\351\227\250\350\247\206\351\242\221\345\210\227\350\241\250/toutiao-02.jpg" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/flex\345\270\203\345\261\200\344\275\234\344\270\2323,4\351\242\230/\344\273\212\346\227\245\345\244\264\346\235\241\347\203\255\351\227\250\350\247\206\351\242\221\345\210\227\350\241\250/toutiao-02.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..a50ce45c112cc151284427f4de0fd771073aba4f Binary files /dev/null and "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/flex\345\270\203\345\261\200\344\275\234\344\270\2323,4\351\242\230/\344\273\212\346\227\245\345\244\264\346\235\241\347\203\255\351\227\250\350\247\206\351\242\221\345\210\227\350\241\250/toutiao-02.jpg" differ diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/flex\345\270\203\345\261\200\344\275\234\344\270\2323,4\351\242\230/\344\273\212\346\227\245\345\244\264\346\235\241\347\203\255\351\227\250\350\247\206\351\242\221\345\210\227\350\241\250/\344\273\212\346\227\245\345\244\264\346\235\241\347\203\255\351\227\250\350\247\206\351\242\221\345\210\227\350\241\250.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/flex\345\270\203\345\261\200\344\275\234\344\270\2323,4\351\242\230/\344\273\212\346\227\245\345\244\264\346\235\241\347\203\255\351\227\250\350\247\206\351\242\221\345\210\227\350\241\250/\344\273\212\346\227\245\345\244\264\346\235\241\347\203\255\351\227\250\350\247\206\351\242\221\345\210\227\350\241\250.html" new file mode 100644 index 0000000000000000000000000000000000000000..0608ed800202a3cd600292e5da6d2ae657eb02c4 --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/flex\345\270\203\345\261\200\344\275\234\344\270\2323,4\351\242\230/\344\273\212\346\227\245\345\244\264\346\235\241\347\203\255\351\227\250\350\247\206\351\242\221\345\210\227\350\241\250/\344\273\212\346\227\245\345\244\264\346\235\241\347\203\255\351\227\250\350\247\206\351\242\221\345\210\227\350\241\250.html" @@ -0,0 +1,171 @@ + + + + + + Document + + + +
+
+
+
+
热门视频
+
+
+
+
换一换
+
+
+
+
+
+
无论做什么鱼：最忌放盐和料酒研制
+
1万评论
+
+
148万次观看
+
司马南频道
+
+
+
+
+
+
+
无论做什么鱼：最忌放盐和料酒研制
+
1万评论
+
+
148万次观看
+
司马南频道
+
+
+
+
+
+
+
无论做什么鱼：最忌放盐和料酒研制
+
1万评论
+
+
148万次观看
+
司马南频道
+
+
+
+
+
+
+
无论做什么鱼：最忌放盐和料酒研制
+
1万评论
+
+
148万次观看
+
司马南频道
+
+
+
+
+ + \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/flex\345\270\203\345\261\200\344\275\234\344\270\2323,4\351\242\230/\347\273\217\345\205\270\345\270\203\345\261\200/\347\273\217\345\205\270\345\270\203\345\261\200.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/flex\345\270\203\345\261\200\344\275\234\344\270\2323,4\351\242\230/\347\273\217\345\205\270\345\270\203\345\261\200/\347\273\217\345\205\270\345\270\203\345\261\200.html" new file mode 100644 index 0000000000000000000000000000000000000000..44ae52406b76bc5a35d71d1958218f4b49244064 --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/flex\345\270\203\345\261\200\344\275\234\344\270\2323,4\351\242\230/\347\273\217\345\205\270\345\270\203\345\261\200/\347\273\217\345\205\270\345\270\203\345\261\200.html" @@ -0,0 +1,50 @@ + + + + + + Document + + + +
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/flex\345\270\203\345\261\200\347\254\254\345\233\233\351\242\230/.vscode/launch.json" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/flex\345\270\203\345\261\200\347\254\254\345\233\233\351\242\230/.vscode/launch.json" new file mode 100644 index 0000000000000000000000000000000000000000..81cc76898766fa55f4831a994c5be63cea214ada --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/flex\345\270\203\345\261\200\347\254\254\345\233\233\351\242\230/.vscode/launch.json" @@ -0,0 +1,14 @@ +{ + // 使用 IntelliSense 了解相关属性。 + // 悬停以查看现有属性的描述。 + // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "msedge", + "request": "launch", + "name": "Open flex布局.html", + "file": "c:\\Users\\86178\\Desktop\\flex布局第四题\\flex布局.html" + } + ] +} \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/flex\345\270\203\345\261\200\347\254\254\345\233\233\351\242\230/flex\345\270\203\345\261\200.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/flex\345\270\203\345\261\200\347\254\254\345\233\233\351\242\230/flex\345\270\203\345\261\200.html" new file mode 100644 index 0000000000000000000000000000000000000000..5587c68f1b997a1ee3ef22f186b1ffdf20da37c5 --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/flex\345\270\203\345\261\200\347\254\254\345\233\233\351\242\230/flex\345\270\203\345\261\200.html" @@ -0,0 +1,137 @@ + + + + + + Document + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/\344\272\254\344\270\234/31739851dcf9f109cd94a41fd130592.png" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/\344\272\254\344\270\234/31739851dcf9f109cd94a41fd130592.png" new file mode 100644 index 0000000000000000000000000000000000000000..2a541a292d2a253ac790e95f1359bb70fc156bc5 Binary files /dev/null and "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/\344\272\254\344\270\234/31739851dcf9f109cd94a41fd130592.png" differ diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/\344\272\254\344\270\234/\344\272\254\344\270\234\351\241\265\351\235\242.md" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/\344\272\254\344\270\234/\344\272\254\344\270\234\351\241\265\351\235\242.md" new file mode 100644 index 0000000000000000000000000000000000000000..2d2f999d99a9f0d6adf41eb2079c84f72f5aec48 --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/\344\272\254\344\270\234/\344\272\254\344\270\234\351\241\265\351\235\242.md" @@ -0,0 +1,198 @@ ++ 代码： +```html + + + + + + Document + + + + +
+
+
+
+
+ 打开京东App，购物更轻松 +
+
+ 立即打开 +
+
+
+
+ +
+
+
+
+
+
+ 键盘鼠标套装 +
+
+
+ 登录 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 京东超市 +
+
+
+
+
+ 京东超市 +
+
+
+
+
+ 京东超市 +
+
+
+
+
+ 京东超市 +
+
+
+
+
+ 京东超市 +
+
+
+
+
+
+
+ 京东超市 +
+
+
+
+
+ 京东超市 +
+
+
+
+
+ 京东超市 +
+
+
+
+
+ 京东超市 +
+
+
+
+
+ 京东超市 +
+
+
+
+
+
+
+ 京东秒杀 +
+
+
+ 18 +
+
+
+ 更多秒杀 +
+
+
+
+
+
+
+
+ ￥25 +
+
+
+
+
+ ￥2568 +
+
+
+
+
+ ￥26.8 +
+
+
+
+
+ ￥19.7 +
+
+
+
+
+ ￥420 +
+
+
+
+
+ ￥42.9 +
+
+
+
+
+
+
+
+
+
+ 首页 +
+
+ 分类 +
+
+ 京喜 +
+
+ 购物车 +
+
+ 未登录 +
+
+
+ + + + + +``` ++ 效果图: +![](./31739851dcf9f109cd94a41fd130592.png) \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/\346\220\272\347\250\213\346\227\205\350\241\214/head&hotel\347\262\276\347\201\265\345\233\276.png" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/\346\220\272\347\250\213\346\227\205\350\241\214/head&hotel\347\262\276\347\201\265\345\233\276.png" new file mode 100644 index 0000000000000000000000000000000000000000..c62ccfdccb21c8fa3ebd6030e618b23a8ea91356 Binary files /dev/null and "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/\346\220\272\347\250\213\346\227\205\350\241\214/head&hotel\347\262\276\347\201\265\345\233\276.png" differ diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/\346\220\272\347\250\213\346\227\205\350\241\214/menu\347\262\276\347\201\265\345\233\276.png" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/\346\220\272\347\250\213\346\227\205\350\241\214/menu\347\262\276\347\201\265\345\233\276.png" new file mode 100644 index 0000000000000000000000000000000000000000..6ba0af2e63ded49e6ad26093731b427564dde2a2 Binary files /dev/null and "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/\346\220\272\347\250\213\346\227\205\350\241\214/menu\347\262\276\347\201\265\345\233\276.png" differ diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/\346\220\272\347\250\213\346\227\205\350\241\214/\346\220\272\347\250\213\346\227\205\350\241\214.html" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/\346\220\272\347\250\213\346\227\205\350\241\214/\346\220\272\347\250\213\346\227\205\350\241\214.html" new file mode 100644 index 0000000000000000000000000000000000000000..86799caf19e640c8afc5c2f9d0a6181ee4134757 --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/\346\220\272\347\250\213\346\227\205\350\241\214/\346\220\272\347\250\213\346\227\205\350\241\214.html" @@ -0,0 +1,192 @@ + + + + + + Document + + + +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/\346\220\272\347\250\213\346\227\205\350\241\214/\351\253\230\351\223\201.jpg" "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/\346\220\272\347\250\213\346\227\205\350\241\214/\351\253\230\351\223\201.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..069ce0537d7d45db2c9048f76b79e4abe25280b9 Binary files /dev/null and "b/\351\231\210\346\201\255\347\204\225/\344\275\234\344\270\232/\346\220\272\347\250\213\346\227\205\350\241\214/\351\253\230\351\223\201.jpg" differ diff --git "a/\351\231\210\346\201\255\347\204\225/\347\254\224\350\256\260/11.5\347\254\224\350\256\260.md" "b/\351\231\210\346\201\255\347\204\225/\347\254\224\350\256\260/11.5\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..59ba21cb296cd01aef317199260fe50110233c68 --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\347\254\224\350\256\260/11.5\347\254\224\350\256\260.md" @@ -0,0 +1,25 @@ +### 媒体查询 +1. 媒体查询是CSS的一个强大功能，能帮助我们根据不同的设备特性（比如屏幕尺寸）来调整网页的样式。 +### 媒体查询的基本结构 +```css +@media (条件) { + /* 在这里写CSS样式 */ +} +``` +### 常用的媒体特性 + - `width`：屏幕宽度 + - `height`：屏幕高度 + - `max-width`：屏幕最大宽度（小于或等于这个值） + - `min-width`：屏幕最小宽度（大于或等于这个值） + +```css +@media (max-width: 600px) { + body { + background-color: lightblue; + } +} +``` +### 注意事项 + - 媒体查询可以嵌套在CSS文件中，也可以作为单独的CSS文件被链接。 + - 媒体查询是向下兼容的，旧版浏览器会忽略媒体查询。 + - 使用媒体查询可以提高页面加载速度，因为它允许浏览器只加载必要的CSS。 \ No newline at end of file diff --git "a/\351\231\210\346\201\255\347\204\225/\347\254\224\350\256\260/11.7b\347\254\224\350\256\260.md" "b/\351\231\210\346\201\255\347\204\225/\347\254\224\350\256\260/11.7b\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..5ccb28aa1d46e87767563d1843617bb09ab0e345 --- /dev/null +++ "b/\351\231\210\346\201\255\347\204\225/\347\254\224\350\256\260/11.7b\347\254\224\350\256\260.md" @@ -0,0 +1,34 @@ +### 服务器 +1. 登录服务器 `-ssh root @hzhf.域名` +2. 登录后做的事情 + + 更新软件源 `-apt update` + + 更新操作系统&打补丁 `-apt upgrate -y` +## 搭建一个静态网站 +1. 安装nginx + `命令:yum install -y nginx` +2. 设置nginx开机启动和现在启动 + `命令：systemctl start nginx` +3. 查看nginx情况 + `命令：systemctl status nginx` +4. 在/var/下创建www文件夹，并在www文件下创建以域名为名称的文件夹 + ``` + mkdir /var/www + cd /var/www + mkdir 域名 + cd 域名 + ``` +5. 在XShell界面，点击绿色的像文件的那个图标，然后再弹出的界面将自己写的html文件上传到/var/www/域名 +6. 在/etc/nginx/conf.d/目录下，创建一个以域名为名称的配置文件 + `vim //etc/nginx/conf.d/hzhf.cn.conf` +7. 在上一步的基础上，按i进入插件模式，输入下面文本，按esc键进入命令模式，按冒号进入底层命令行模式后，输入wq保存退出，修改nginx网站配置后，输入`nginx -t`测试配置文件是否正确，正确返回`success`，不正确按照提示重新修改配置，正确之后执行`systemctl reload nginx`或`nginx -s reload`命令重新加载配置 + ``` + server{ + listen 80; --监听的端口 + server_name 域名; --监听的域名 + location / { + root /var/www/域名; --网站所在路径 + index i.html; --默认的首页文件 + } + } + ``` +8. 最后，在华为云控制台，进入ECS实例列表，然后点击进入实例，在左边栏最下点击安全组，点击列表中一行的配置规则，将80端口和443端口加入允许访问列表，并保存即可 \ No newline at end of file