diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240906-\350\256\251\345\233\276\347\211\207\346\260\264\345\271\263\345\236\202\347\233\264\345\261\205\344\270\255.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240906-\350\256\251\345\233\276\347\211\207\346\260\264\345\271\263\345\236\202\347\233\264\345\261\205\344\270\255.md" index 94fa07686bac31896dc07a9c4d66dc283ff8816d..91b0419f01dcb18d4f1ad84aef254f00934b1fae 100644 --- "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240906-\350\256\251\345\233\276\347\211\207\346\260\264\345\271\263\345\236\202\347\233\264\345\261\205\344\270\255.md" +++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240906-\350\256\251\345\233\276\347\211\207\346\260\264\345\271\263\345\236\202\347\233\264\345\261\205\344\270\255.md" @@ -1,5 +1,5 @@ 1. 效果： -![20241002210834](http://sjblvzqg9.hn-bkt.clouddn.com/H5的图片/20241002210834.png) +![20241002210834](https://img.kz0702.cn/H5的图片/20241002210834.png) 2. html代码： ```html diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240915-\350\213\271\346\236\234\347\263\273\347\273\237\345\257\274\350\210\252\346\240\217.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240915-\350\213\271\346\236\234\347\263\273\347\273\237\345\257\274\350\210\252\346\240\217.md" index e1b14024043b9b95a9c0b9459a129ce27366f742..b6fc30b2ec4eb35290f09ae5e042d2466daa8a6b 100644 --- "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240915-\350\213\271\346\236\234\347\263\273\347\273\237\345\257\274\350\210\252\346\240\217.md" +++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240915-\350\213\271\346\236\234\347\263\273\347\273\237\345\257\274\350\210\252\346\240\217.md" @@ -1,5 +1,5 @@ 1. 效果 -![20241002212057](http://sjblvzqg9.hn-bkt.clouddn.com/H5的图片/20241002212057.png) +![20241002212057](https://img.kz0702.cn/H5的图片/20241002212057.png) 2. html代码 ```html diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240919-\351\237\263\350\247\206\351\242\221.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240919-\351\237\263\350\247\206\351\242\221.md" index cc29c68eba9d776e5301ea5be662fca56d79d8bc..4aabc9ce62dbf787006fd8e04cba4ef0b38231bd 100644 --- "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240919-\351\237\263\350\247\206\351\242\221.md" +++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240919-\351\237\263\350\247\206\351\242\221.md" @@ -1,5 +1,5 @@ 1. 效果 -![20241002212643](http://sjblvzqg9.hn-bkt.clouddn.com/H5的图片/20241002212643.png) +![20241002212643](https://img.kz0702.cn/H5的图片/20241002212643.png) 2. html代码 ```html diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240922-\344\272\221\347\261\263\347\224\265\346\260\264\345\243\266.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240922-\344\272\221\347\261\263\347\224\265\346\260\264\345\243\266.md" index 6c0827f5ac87a9499101f2ef7b15e15c9e0035ae..fed1a7f4a98dc43acc9f0c2e1ab7f7b93e7d0d83 100644 --- "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240922-\344\272\221\347\261\263\347\224\265\346\260\264\345\243\266.md" +++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240922-\344\272\221\347\261\263\347\224\265\346\260\264\345\243\266.md" @@ -1,5 +1,5 @@ 1. 效果 -![20241002213118](http://sjblvzqg9.hn-bkt.clouddn.com/H5的图片/20241002213118.png) +![20241002213118](https://img.kz0702.cn/H5的图片/20241002213118.png) 2. html代码 ```html diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240922-\345\215\232\345\256\242\345\233\255\345\257\274\350\210\252.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240922-\345\215\232\345\256\242\345\233\255\345\257\274\350\210\252.md" index f4f33f00fc55c7152058c7abd718862227f78172..57bb3b7dc0a24e27a421d9b2569e4e25928bae37 100644 --- "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240922-\345\215\232\345\256\242\345\233\255\345\257\274\350\210\252.md" +++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240922-\345\215\232\345\256\242\345\233\255\345\257\274\350\210\252.md" @@ -1,5 +1,5 @@ 1. 效果 -![20241002212412](http://sjblvzqg9.hn-bkt.clouddn.com/H5的图片/20241002212412.png) +![20241002212412](https://img.kz0702.cn/H5的图片/20241002212412.png) 2. html代码 ```html diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240922-\347\231\276\345\272\246\346\226\260\351\227\273\347\203\255\346\246\234.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240922-\347\231\276\345\272\246\346\226\260\351\227\273\347\203\255\346\246\234.md" index eb396221cbeee32178ed480142ec3f6a1ae90678..355ddcf24e6884322d4038acb5fa830f1b6f7ca3 100644 --- "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240922-\347\231\276\345\272\246\346\226\260\351\227\273\347\203\255\346\246\234.md" +++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240922-\347\231\276\345\272\246\346\226\260\351\227\273\347\203\255\346\246\234.md" @@ -1,5 +1,5 @@ 1. 效果 -![20241002212908](http://sjblvzqg9.hn-bkt.clouddn.com/H5的图片/20241002212908.png) +![20241002212908](https://img.kz0702.cn/H5的图片/20241002212908.png) 2. html代码 ```html diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240923-\345\210\206\351\241\265\346\240\267\345\274\217.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240923-\345\210\206\351\241\265\346\240\267\345\274\217.md" index 7a402600b054c60ec88b93926a3eae3ff217797a..46687f33a7c31c76f33c2f569fca85a6ce68ec84 100644 --- "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240923-\345\210\206\351\241\265\346\240\267\345\274\217.md" +++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240923-\345\210\206\351\241\265\346\240\267\345\274\217.md" @@ -1,5 +1,5 @@ 1. 效果 -![20241002213335](http://sjblvzqg9.hn-bkt.clouddn.com/H5的图片/20241002213335.png) +![20241002213335](https://img.kz0702.cn/H5的图片/20241002213335.png) 2. html代码 ```html diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240923-\346\273\232\345\212\250\345\255\227\345\271\225.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240923-\346\273\232\345\212\250\345\255\227\345\271\225.md" index 9e1c5f393fd722875e873fd8877db21ea544a7b7..44daf620780f36abfce822650c653915e842ccdb 100644 --- "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240923-\346\273\232\345\212\250\345\255\227\345\271\225.md" +++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240923-\346\273\232\345\212\250\345\255\227\345\271\225.md" @@ -1,5 +1,5 @@ 1. 效果： -![20241002211450](http://sjblvzqg9.hn-bkt.clouddn.com/H5的图片/20241002211450.png) +![20241002211450](https://img.kz0702.cn/H5的图片/20241002211450.png) 2. html代码： ```html diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240926-\346\226\207\346\234\254\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240926-\346\226\207\346\234\254\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241.md" index 6509a3bef55b5eebf82512b45bdefee460a5b54c..a2b09f6126730660f58cb5d1db2645ec0a4f3f39 100644 --- "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240926-\346\226\207\346\234\254\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241.md" +++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240926-\346\226\207\346\234\254\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241.md" @@ -1,5 +1,5 @@ 1. 效果 -![20241002214246](http://sjblvzqg9.hn-bkt.clouddn.com/H5的图片/20241002214246.png) +![20241002214246](https://img.kz0702.cn/H5的图片/20241002214246.png) 2. html代码 ```html diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240926-\346\226\207\346\234\254\345\257\271\351\275\220\345\222\214\350\243\205\351\245\260.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240926-\346\226\207\346\234\254\345\257\271\351\275\220\345\222\214\350\243\205\351\245\260.md" index 54e3b341e5564c0963d4f3657a7cd3ff837d4b2f..0647938065161d1bbb92568fb8c51f89a7b54697 100644 --- "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240926-\346\226\207\346\234\254\345\257\271\351\275\220\345\222\214\350\243\205\351\245\260.md" +++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240926-\346\226\207\346\234\254\345\257\271\351\275\220\345\222\214\350\243\205\351\245\260.md" @@ -1,5 +1,5 @@ 1. 效果 -![20241002214009](http://sjblvzqg9.hn-bkt.clouddn.com/H5的图片/20241002214009.png) +![20241002214009](https://img.kz0702.cn/H5的图片/20241002214009.png) 2. html代码 ```html diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240926-\346\226\207\346\234\254\346\216\222\347\211\210\350\256\276\350\256\241.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240926-\346\226\207\346\234\254\346\216\222\347\211\210\350\256\276\350\256\241.md" index d481e720bf312e027f3c0454355416b322915a7e..c48c51344b0589bd2eae1aec0852955243fcfdb5 100644 --- "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240926-\346\226\207\346\234\254\346\216\222\347\211\210\350\256\276\350\256\241.md" +++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240926-\346\226\207\346\234\254\346\216\222\347\211\210\350\256\276\350\256\241.md" @@ -1,5 +1,5 @@ 1. 效果 -![20241002213732](http://sjblvzqg9.hn-bkt.clouddn.com/H5的图片/20241002213732.png) +![20241002213732](https://img.kz0702.cn/H5的图片/20241002213732.png) 2. html代码 ```html diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240926-\346\226\207\346\234\254\346\240\267\345\274\217\347\273\274\345\220\210\350\256\276\350\256\241.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240926-\346\226\207\346\234\254\346\240\267\345\274\217\347\273\274\345\220\210\350\256\276\350\256\241.md" index 703feb8e0b2805f6e17e9b671ff5aed61cdb6b34..f2349c649fd60c12ba48c046b7b6aa1a3615f31f 100644 --- "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240926-\346\226\207\346\234\254\346\240\267\345\274\217\347\273\274\345\220\210\350\256\276\350\256\241.md" +++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240926-\346\226\207\346\234\254\346\240\267\345\274\217\347\273\274\345\220\210\350\256\276\350\256\241.md" @@ -1,5 +1,5 @@ 1. 效果 -![20241002213549](http://sjblvzqg9.hn-bkt.clouddn.com/H5的图片/20241002213549.png) +![20241002213549](https://img.kz0702.cn/H5的图片/20241002213549.png) 2. html代码 ```html diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240930-\344\273\223\345\272\223\345\215\201\345\205\253\345\237\272\347\241\200\347\273\203\344\271\240.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240930-\344\273\223\345\272\223\345\215\201\345\205\253\345\237\272\347\241\200\347\273\203\344\271\240.md" index 3f49fcc6fcb390a9a82395b641f2fb9090f97514..a6485312e34c7e59b38ec611e3c9ee225058df3c 100644 --- "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240930-\344\273\223\345\272\223\345\215\201\345\205\253\345\237\272\347\241\200\347\273\203\344\271\240.md" +++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20240930-\344\273\223\345\272\223\345\215\201\345\205\253\345\237\272\347\241\200\347\273\203\344\271\240.md" @@ -1,6 +1,6 @@ 1. 效果： -![20241007190310](http://sjblvzqg9.hn-bkt.clouddn.com/H5的图片/20241007190310.png) -![20241007190355](http://sjblvzqg9.hn-bkt.clouddn.com/H5的图片/20241007190355.png) +![20241007190310](https://img.kz0702.cn/H5的图片/20241007190310.png) +![20241007190355](https://img.kz0702.cn/H5的图片/20241007190355.png) 2. 代码： ```html diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20241009-\347\272\277\346\200\247\346\270\220\345\217\230\344\275\234\344\270\232.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20241009-\347\272\277\346\200\247\346\270\220\345\217\230\344\275\234\344\270\232.md" index 487c23e110352e754b602949e62c009c372389d5..f2ef248da021c6b12f4efc81fed2bf7692d68ab2 100644 --- "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20241009-\347\272\277\346\200\247\346\270\220\345\217\230\344\275\234\344\270\232.md" +++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20241009-\347\272\277\346\200\247\346\270\220\345\217\230\344\275\234\344\270\232.md" @@ -1,5 +1,5 @@ 效果 -![20241009201418](http://sjblvzqg9.hn-bkt.clouddn.com/H5的图片/20241009201418.png) +![20241009201418](https://img.kz0702.cn/H5的图片/20241009201418.png) 代码 ```html diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20241021-\345\256\232\344\275\215.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20241021-\345\256\232\344\275\215.md" new file mode 100644 index 0000000000000000000000000000000000000000..74835ed4ff143ac0c681fb529457db18bb2e6b7a --- /dev/null +++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20241021-\345\256\232\344\275\215.md" @@ -0,0 +1,330 @@ +1. 创建一个在其父级容器中水平、垂直居中的绝对定位元素 + +```html + + + + + + Document + + + +
+

8888

+
+ + +``` +效果：![20241023214755](https://img.kz0702.cn/H5的图片/20241023214755.png) + + + +2. 在页面顶部创建一个固定不动的导航条，要求不遮盖下面的内容 +```html + + + + + + + Document + + + + +
+ 8888 +
+
+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+

33333333333333333333333333333333333333333333333333333333

+ +
+ + +``` +效果： ![20241023214731](https://img.kz0702.cn/H5的图片/20241023214731.png) + +3. 创建一个悬浮在文字下方的提示框,当鼠标经过的时候展示出来，鼠标移开不显示 +```html + + + + + + + Document + + + + +
昂，你来晚了哈我是提示文字撒
+ + + +``` +效果：![20241023214627](https://img.kz0702.cn/H5的图片/20241023214627.png) + +4. 使用提供的素材，利用精灵图技术实现如下效果 +```html + + + + + + Document + + + +

付款图标

+

存款图标

+

笑脸图标

+

删除图标

+

粘贴图标

+

编辑图标

+ + +``` +效果： ![20241023214550](https://img.kz0702.cn/H5的图片/20241023214550.png) + + +4. 使用提供的素材，实现如下效果 +```html + + + + + + Document + + + + +
+
+ 广东深圳宝安区建安一路海雅缤纷城4楼 +
+
+ 【海雅缤纷城】万达影城（深圳海雅广场... +

单人电影票,可观看2D

+

￥35

+

￥80

+

已售225

+
+ + + +``` +效果： +![20241023214507](https://img.kz0702.cn/H5的图片/20241023214507.png) \ No newline at end of file diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/20231010113053.png" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/20231010113053.png" new file mode 100644 index 0000000000000000000000000000000000000000..00138ea2a9ec09abba06e7f0a3bde57b05342cc6 Binary files /dev/null and "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/20231010113053.png" differ diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\344\270\207\350\276\276\345\275\261\345\237\216.png" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\344\270\207\350\276\276\345\275\261\345\237\216.png" new file mode 100644 index 0000000000000000000000000000000000000000..ed10d0cb97548f4b69cfdc475ce1f5e62b10ebb2 Binary files /dev/null and "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\344\270\207\350\276\276\345\275\261\345\237\216.png" differ diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\345\244\232\345\245\227\351\244\220.png" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\345\244\232\345\245\227\351\244\220.png" new file mode 100644 index 0000000000000000000000000000000000000000..5bcddb4c7afead15912d00421a1f12a05046fe3e Binary files /dev/null and "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\345\244\232\345\245\227\351\244\220.png" differ diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\346\211\213\346\234\272.jpg" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\346\211\213\346\234\272.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..1ba3b393e92797493150bb43edb2cb6d61177c9a Binary files /dev/null and "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\346\211\213\346\234\272.jpg" differ diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\346\211\213\350\241\250.png" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\346\211\213\350\241\250.png" new file mode 100644 index 0000000000000000000000000000000000000000..599dbe48c3fba3fe0549e88d5d79f6f863d9acc8 Binary files /dev/null and "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\346\211\213\350\241\250.png" differ diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\347\224\265\350\204\221.png" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\347\224\265\350\204\221.png" new file mode 100644 index 0000000000000000000000000000000000000000..e08ba74213094bf8a7cb7c6e84a9adc499518aae Binary files /dev/null and "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\347\224\265\350\204\221.png" differ diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/\350\277\207\345\272\246\343\200\2012D\350\275\254\346\215\242\343\200\2013D\350\275\254\346\215\242.html" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/\350\277\207\345\272\246\343\200\2012D\350\275\254\346\215\242\343\200\2013D\350\275\254\346\215\242.html" new file mode 100644 index 0000000000000000000000000000000000000000..8f9a1ebcef708a9f942133685913a474aae8da78 --- /dev/null +++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/\350\277\207\345\272\246\343\200\2012D\350\275\254\346\215\242\343\200\2013D\350\275\254\346\215\242.html" @@ -0,0 +1,93 @@ + + + + + + + Document + + + + +
+
+ +
+
+ +
+ + + \ No newline at end of file diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20240918-HTML\347\232\204\350\241\250\346\240\274\343\200\201\350\241\250\345\215\225.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20240918-HTML\347\232\204\350\241\250\346\240\274\343\200\201\350\241\250\345\215\225.md" index 9b2ae30789f7bb0603acb39b9c5f9b60e63bdc82..2c2882ee7c8df00d84f4d0a9a7b0047732238736 100644 --- "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20240918-HTML\347\232\204\350\241\250\346\240\274\343\200\201\350\241\250\345\215\225.md" +++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20240918-HTML\347\232\204\350\241\250\346\240\274\343\200\201\350\241\250\345\215\225.md" @@ -1,7 +1,7 @@ ### 表格 1. 效果图: -![20240918150513](http://sjblvzqg9.hn-bkt.clouddn.com/H5的图片/20240918150513.png) +![20240918150513](https://img.kz0702.cn/H5的图片/20240918150513.png) 2. 表格创建语法: ```html diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20240919-\350\241\250\345\215\225.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20240919-\350\241\250\345\215\225.md" index 0d87a0169552574eb6d4bcf50fde57e88a807686..1795840284f056fd4f665d14ad75340c5d37b15c 100644 --- "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20240919-\350\241\250\345\215\225.md" +++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20240919-\350\241\250\345\215\225.md" @@ -1,7 +1,7 @@ # 表单 ### 效果图： -![20240919202822](http://sjblvzqg9.hn-bkt.clouddn.com/H5的图片/20240919202822.png) +![20240919202822](https://img.kz0702.cn/H5的图片/20240919202822.png) ### 代码实现（带解析） ```html + + position: relative; + + position: fixed; + +``` + +### 绝对定位 +1. **绝对定位的盒子脱离了标准文档流。**所以，所有的标准文档流的性质，绝对定位之后都不遵守了。 + +2. 绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要`display:block`就可以设置宽、高了。 + +3. 如果用**top描述**，那么参考点就是**页面的左上角**，而不是浏览器的左上角： +![](https://img.kz0702.cn/20180115_2120.png) + +4. 如果用**bottom描述**，那么参考点就是**浏览器首屏窗口尺寸**（好好理解“首屏”二字），对应的页面的左下角： +![](https://img.kz0702.cn/20180115_2121.png) + +5. 用bottom的定位的时候，参考的是浏览器首屏大小对应的页面左下角。 +![](https://img.kz0702.cn/20180115_2132.png) + +#### 以盒子为参考点 +一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。 + +如下：（子绝父相）：子元素绝对定位，父元素相对定位 + +![](https://img.kz0702.cn/20180115_2210.png) + +以下几点需要注意。 + +（1） 要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷： + +``` +
相对定位 +
没有定位 +

绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素 +
+
+ +``` + +再比如： + +``` +
相对定位 +
相对定位 +

绝对定位，将以box2为参考，因为box2是自己最近的父辈元素 +
+
+``` +（2）不一定是相对定位，任何定位，都可以作为儿子的参考点： +（3）绝对定位的儿子，无视参考的那个盒子的padding： + +#### 让绝对定位中的盒子在父亲里居中 +我们可以总结成一个公式： +水平居中： +> left:50%; margin-left:负的宽度的一半 +垂直居中： +> top:50%; margin-top:负的宽度的一半 + + +### 相对定位 +``` + position: relative; + left: 50px; + top: 50px; +``` +#### 相对定位不脱标 + +**相对定位**：不脱标，老家留坑，**别人不会把它的位置挤走**。 + +也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。 + +#### 相对定位的用途 + +如果想做“压盖”效果（把一个div放到另一个div之上），我们一般**不用**相对定位来做。相对定位，就两个作用： + +- （1）微调元素 +- （2）做绝对定位的参考，子绝父相 + +#### 相对定位的定位值 + +- left：盒子右移 + +- right：盒子左移 + +- top：盒子下移 + +- bottom：盒子上移 + +PS：负数表示相反的方向。 + + +### 固定定位 + +**用途1**：网页右下角的“返回到顶部” +例： +```html + +``` +**用途2：**顶部导航条 +用锚链接链接到顶部top +```html +oioi +``` + + + +### z-index属性： +特性： +- 属性值大的位于上层，属性值小的位于下层。 + +- z-index值没有单位，就是一个正整数。默认的z-index值是0。 + +- 如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。 + +- 只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。**而浮动的元素不能用**。 + +- 从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层 + +这是默认情况下的例子：（div2在上层，div1在下层） +![](http://img.smyhvae.com/2015-10-03-css-32.png) + +现在加一个`z-index`属性，要求效果如下： +![](http://img.smyhvae.com/2015-10-03-css-33.png) + +第五条分析： +![](http://img.smyhvae.com/20180116_1445.png) + +当好几个已定位的标签出现覆盖的现象时，我们可以用这个z-index属性决定，谁处于最上方。也就是**层级**的应用。 \ No newline at end of file diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20241023-css3\351\200\211\346\213\251\345\231\250\350\257\246\350\247\243.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20241023-css3\351\200\211\346\213\251\345\231\250\350\257\246\350\247\243.md" new file mode 100644 index 0000000000000000000000000000000000000000..4d309d1e37ce60ea25e42e15decf60aa5aed6871 --- /dev/null +++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20241023-css3\351\200\211\346\213\251\345\231\250\350\257\246\350\247\243.md" @@ -0,0 +1,120 @@ + +## CSS3 选择器 +我们之前学过 CSS 的选择器，比如： +``` + div 标签选择器 + + .box 类名选择器 + + #box　id选择器 + + div p 后代选择器 + + div.box 交集选择器 + + div,p,span 并集选择器 + + div>p 子代选择器 + + * : 通配符 + + div+p: 选中div后面相邻的第一个p + + div~p: 选中的div后面所有的p + +``` +### 属性选择器 + +属性选择器的标志性符号是 `[]`。 +匹配含义： + +``` +^：开头 $：结尾 *：包含 +``` + +格式： + +- `E[title]` 选中页面的E元素，并且E存在 title 属性即可。 + +- `E[title="abc"]`选中页面的E元素，并且E需要带有title属性，且属性值**完全等于**abc。 + +- `E[attr~=val]` 选择具有 att 属性且属性值为：用空格分隔的字词列表，其中一个等于 val 的E元素。 + +- `E[attr|=val]` 表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的。 + +- `E[title^="abc"]` 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 开头。 + +- `E[title$="abc"]` 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 结尾。 + +- `E[title*="abc"]` 选中页面的E元素，并且E需要带有 title 属性,属性值任意位置包含abc。 + +### 结构伪类选择器 +伪类选择器的标志性符号是 `:`。 + +CSS中有一些伪类选择器，比如`:link`、`:visited`、`:hover`、`:active`、`:focus`。 + +**1、格式：（第一部分）**（重要） + +- `E:first-child` 匹配父元素的第一个子元素E。 + +- `E:last-child` 匹配父元素的最后一个子元素E。 + +- `E:nth-child(n)` 匹配父元素的第n个子元素E。**注意**，盒子的编号是从`1`开始算起，不是从`0`开始算起。 + +- `E:nth-child(odd)` 匹配奇数 + +- `E:nth-child(even)` 匹配偶数 + +- `E:nth-last-child(n)` 匹配父元素的倒数第n个子元素E。 + +### 伪元素选择器 +1. +- `E::before` 设置在 元素E 前面（依据对象树的逻辑结构）的内容，配合content属性一起使用。 + +- `E::after` 设置在 元素E 后面（依据对象树的逻辑结构）的内容，配合content属性一起使用。 +```html + + + + + + + + + +生命壹号 + + + +``` +- 通过伪元素选择器，就可以添加出类似于span标签的效果（记得要结合 content 属性使用）。 + +- 通过这两个属性添加的伪元素，是**行内元素**，需要转换成块元素才能设置宽高。 + +2. +- `E::first-letter` 设置元素 E 里面的**第一个字符**的样式。 只能在块容器中有效 + +- `E::first-line` 设置元素 E 里面的**第一行**的样式。 只能在块容器中有效 + +- `E::selection` 设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色）。 \ No newline at end of file diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20241024-\345\212\250\347\224\273\350\257\246\350\247\243.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20241024-\345\212\250\347\224\273\350\257\246\350\247\243.md" new file mode 100644 index 0000000000000000000000000000000000000000..94e2b2ffb6fed003ab3442c0a368b37acb5a5629 --- /dev/null +++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20241024-\345\212\250\347\224\273\350\257\246\350\247\243.md" @@ -0,0 +1,185 @@ +## 过渡：transition + +`transition`的中文含义是**过渡**。过渡是CSS3中具有颠覆性的一个特征，可以实现元素**不同状态间的平滑过渡**（补间动画），经常用来制作动画效果。 + +1. `transition`包括以下属性： + +- `transition-property: all;` 如果希望所有的属性都发生过渡，就使用all。 +- `transition-property: width`，意思是只让盒子的宽度在变化时进行过渡 +- `transition-duration: 1s;` 过渡的持续时间。 + +- `transition-timing-function: linear;` 运动曲线。属性值可以是： + - `linear` 线性 + - `ease` 减速 + - `ease-in` 加速 + - `ease-out` 减速 + - `ease-in-out` 先加速后减速 + - `transition-delay: 1s;` 过渡延迟。多长时间后再执行这个过渡动画。 + +2. 上面的四个属性也可以写成**综合属性**： +```css + transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间; + + transition: all 3s linear 0s; +``` + +## 2D 转换 + +### 缩放：`scale` +语法： + +```cs + transform: scale(x, y); + + transform: scale(2, 0.5); +``` +- x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。 + +- 取值：大于1表示放大，小于1表示缩小。不能为百分比。 + +### 位移：translate +1. 语法： + +```cs + transform: translate(水平位移, 垂直位移); + + transform: translate(-50%, -50%); +``` +- 参数为百分比，相对于自身移动。 + +- 正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。 + +2. **应用：**让绝对定位中的盒子在父亲里居中 +可以利用偏移 translate 来做，这也是比较推荐的写法： + +```css + div { + width: 600px; + height: 60px; + background-color: red; + position: absolute; /* 绝对定位的盒子 */ + left: 50%; /* 首先，让左边线居中 */ + top: 0; + transform: translate(-50%); 然后，利用translate，往左走自己宽度的一半【推荐写法】 + } +``` + +### 旋转：rotate +1. 语法： +```css + transform: rotate(角度); + + transform: rotate(45deg); +``` +- 正值 顺时针；负值：逆时针。 +- 给盒子设置`transition`过渡,如果没有这行过渡的代码，旋转会直接一步到位 + +2. `rotate` 旋转时，默认是以盒子的正中心为坐标原点的。如果想**改变旋转的坐标原点**，可以用`transform-origin`属性。格式如下： +```css + transform-origin: 水平坐标 垂直坐标; + + transform-origin: 50px 50px; + + transform-origin: center bottom; //旋转时，以盒子底部的中心为坐标原点 +``` + + +## 3D 转换 +![](http://img.smyhvae.com/20180208_2010.png) + +如上图所示，伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。拇指、食指和中指分别代表X、Y、Z轴的正方向，这样我们就建立了一个左手坐标系。 + +浏览器的这个平面，是X轴、Y轴；垂直于浏览器的平面，是Z轴。 + +### 透视：perspective +- 作为一个属性，设置给父元素，作用于所有3D转换的子元素 + +- 作为 transform 属性的一个值，做用于元素自身。 +- 例： +```css +perspective: 500px; +``` + + +### 旋转：rotateX、rotateY、rotateZ +rotateZ`要配合透视使用 +所有的3d旋转，对着正方向去看，都是顺时针旋转。 + +**格式：** +```css + transform: rotateX(360deg); //绕 X 轴旋转360度 + + transform: rotateY(360deg); //绕 Y 轴旋转360度 + + transform: rotateZ(360deg); //绕 Z 轴旋转360度 + +``` +### 移动：translateX、translateY、translateZ +`translateZ`必须配合透视来使用 +**格式：** + +```css + transform: translateX(100px); //沿着 X 轴移动 + + transform: translateY(360px); //沿着 Y 轴移动 + + transform: translateZ(360px); //沿着 Z 轴移动 + +``` + +## 动画 + +### 定义动画的步骤 + +- 通过@keyframes定义动画； + +- 将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性； + +- 在指定元素里，通过 `animation` 属性调用动画。 +- 在 CSS3 中**定义动画**的时候，也是**先定义，再调用**： + +```css + 定义动画： + @keyframes 动画名{ + from{ 初始状态 } + to{ 结束状态 } + } + + 调用： + animation: 动画名称 持续时间； +``` +animation属性的格式如下： +```cs + animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次) + + animation: move1 1s alternate linear 3; + + animation: move2 4s; +``` +### 动画属性 +`animation`属性的格式如下： +```cs + animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次) + + animation: move1 1s alternate linear 3; + + animation: move2 4s; +``` +- 动画名称、持续时间两个属性，是必选项，且顺序固定。 +- 动画方向属性值：normal 正常，alternate 反向。 +- 运动曲线属性值可以是：linear（线性） ease-in-out（先加速后减速） steps()等。 +- 如果把属性值写成**` steps()`**，则表示动画**不是连续执行**，而是间断地分成几步执行 + +### steps()的效果 +在调用动画时，我们写成： + + +```cs + animation: move2 4s steps(2); +``` + +效果如下： + +![](http://img.smyhvae.com/20180209_1020.gif) + +有了属性值 `steps()`，我们就可以作出很多不连续地动画效果。比如时钟；再比如，通过多张静态的鱼，作出一张游动的鱼。