diff --git "a/H5+Css3/\344\274\252\347\261\273/Taiji.html" "b/\344\274\215\346\231\272\350\276\211/H5+Css3/\344\274\252\347\261\273/Taiji.html" similarity index 100% rename from "H5+Css3/\344\274\252\347\261\273/Taiji.html" rename to "\344\274\215\346\231\272\350\276\211/H5+Css3/\344\274\252\347\261\273/Taiji.html" diff --git "a/H5+Css3/\345\200\274\344\270\216\345\215\225\344\275\215/Index.html" "b/\344\274\215\346\231\272\350\276\211/H5+Css3/\345\200\274\344\270\216\345\215\225\344\275\215/Index.html" similarity index 100% rename from "H5+Css3/\345\200\274\344\270\216\345\215\225\344\275\215/Index.html" rename to "\344\274\215\346\231\272\350\276\211/H5+Css3/\345\200\274\344\270\216\345\215\225\344\275\215/Index.html" diff --git "a/H5+Css3/\345\200\274\344\270\216\345\215\225\344\275\215/index_2.html" "b/\344\274\215\346\231\272\350\276\211/H5+Css3/\345\200\274\344\270\216\345\215\225\344\275\215/index_2.html" similarity index 100% rename from "H5+Css3/\345\200\274\344\270\216\345\215\225\344\275\215/index_2.html" rename to "\344\274\215\346\231\272\350\276\211/H5+Css3/\345\200\274\344\270\216\345\215\225\344\275\215/index_2.html" diff --git "a/H5+Css3/\345\270\203\345\261\200/index.html" "b/\344\274\215\346\231\272\350\276\211/H5+Css3/\345\270\203\345\261\200/index.html" similarity index 100% rename from "H5+Css3/\345\270\203\345\261\200/index.html" rename to "\344\274\215\346\231\272\350\276\211/H5+Css3/\345\270\203\345\261\200/index.html" diff --git "a/\344\274\215\346\231\272\350\276\211/H5+Css3/\345\274\271\346\200\247\347\233\222\345\255\220/1.html" "b/\344\274\215\346\231\272\350\276\211/H5+Css3/\345\274\271\346\200\247\347\233\222\345\255\220/1.html" new file mode 100644 index 0000000000000000000000000000000000000000..742f1efcb450bc943657d42eb56cba7335fdeae4 --- /dev/null +++ "b/\344\274\215\346\231\272\350\276\211/H5+Css3/\345\274\271\346\200\247\347\233\222\345\255\220/1.html" @@ -0,0 +1,58 @@ + + + + + + + Document + + + +
+
+ + + + +
+
+
+
1
+
2
+
3
+
4
+
5
+
+ + + \ No newline at end of file diff --git "a/H5+Css3/\345\274\271\346\200\247\347\233\222\345\255\220/index.html" "b/\344\274\215\346\231\272\350\276\211/H5+Css3/\345\274\271\346\200\247\347\233\222\345\255\220/index.html" similarity index 100% rename from "H5+Css3/\345\274\271\346\200\247\347\233\222\345\255\220/index.html" rename to "\344\274\215\346\231\272\350\276\211/H5+Css3/\345\274\271\346\200\247\347\233\222\345\255\220/index.html" diff --git "a/\344\274\215\346\231\272\350\276\211/H5+Css3/\345\274\271\346\200\247\347\233\222\345\255\220/style.css" "b/\344\274\215\346\231\272\350\276\211/H5+Css3/\345\274\271\346\200\247\347\233\222\345\255\220/style.css" new file mode 100644 index 0000000000000000000000000000000000000000..4a4510b2d33eace5fad942b30609486bbaf88617 --- /dev/null +++ "b/\344\274\215\346\231\272\350\276\211/H5+Css3/\345\274\271\346\200\247\347\233\222\345\255\220/style.css" @@ -0,0 +1,32 @@ +.body { + background-color: #eaeaea; +} +.row{ + margin: 4px; + height: 25px; + width: 400px; +} +#center_box { + /* width: 500px; + height: 500px; */ + background-color: #eaeaea; + padding: 4px; +} +[class^='box'] { + display: flex; + flex-direction: row; + height: 80px; + width: 80px; + background-color: chocolate; + margin: 4px; + border: 5px solid #000; + border-radius: 10%; +} +[class^='box'] > span { + display: flex; + justify-content: center; + align-items: center; + /* margin-left: 50%; */ + margin-left: 30px; + font-size: 24px; +} \ No newline at end of file diff --git "a/\344\274\215\346\231\272\350\276\211/H5+Css3/\346\227\266\351\222\237-transform/clock.html" "b/\344\274\215\346\231\272\350\276\211/H5+Css3/\346\227\266\351\222\237-transform/clock.html" new file mode 100644 index 0000000000000000000000000000000000000000..01a5e959299d217f3fce43986197cb686054e44b --- /dev/null +++ "b/\344\274\215\346\231\272\350\276\211/H5+Css3/\346\227\266\351\222\237-transform/clock.html" @@ -0,0 +1,84 @@ + + + + + + + + Document + + + + + +
+ +
+
+
+
+
+
+
12
+
9
+
6
+
3
+
+
+
+ + + + + \ No newline at end of file diff --git "a/\344\274\215\346\231\272\350\276\211/H5+Css3/\346\227\266\351\222\237-transform/style.css" "b/\344\274\215\346\231\272\350\276\211/H5+Css3/\346\227\266\351\222\237-transform/style.css" new file mode 100644 index 0000000000000000000000000000000000000000..ec031a5b6e5e745e89dbee411ac3996b7d03a744 --- /dev/null +++ "b/\344\274\215\346\231\272\350\276\211/H5+Css3/\346\227\266\351\222\237-transform/style.css" @@ -0,0 +1,111 @@ +html,body { + display: flex; + justify-content: center; + align-items: center; + height: 100%; +} +.Round { + height: 500px; + width: 500px; + border: 1px solid #000; + border-radius: 50%; +} +.div-clock { + height: 25px; + width: 25px; + border-radius: 50%; + background-color: #000; + margin: 50%; + position: relative; +} +.Hour { + height: 100px; + width: 8px; + margin: 35%; + top: -85px; + position: relative; + background-color: rgb(122, 122, 122); + border-top-left-radius: 50%; + border-top-right-radius: 50%; + transform-origin: bottom; +} +.Minute { + height: 140px; + width: 6px; + margin: 37%; + top: -235px; + position: relative; + background-color: rgb(250, 0, 0); + border-top-left-radius: 50%; + border-top-right-radius: 50%; + transform-origin: bottom; +} +.Seconds { + height: 180px; + width: 4px; + margin: 42%; + top: -427px; + position: relative; + background-color: rgb(233, 250, 0); + border-top-left-radius: 50%; + border-top-right-radius: 50%; + transform-origin: bottom; +} + +#cen { + height: 0px; +} +.class_12 { + margin-top: -230px; + font-size: 42px; + margin-left: -25px; +} +.class_9 { + margin-top: 150px; + font-size: 42px; + margin-left: -210px; +} +.class_6 { + margin-top: 150px; + font-size: 42px; + margin-left: -10px; +} +.class_3{ + margin-top: -260px; + font-size: 42px; + margin-left: 185px; +} +/* .dia { + height: 15px; + width: 2px; + background: #000; + margin-top: -283px; + margin-left: 10px; + transform-origin: 50% 150px; +} +.dia:nth-of-type(5n) { + width: 4px; + height: 24px; + background: #000; +} */ + +ul { + margin: 0; + padding: 0; + list-style: none; + position: relative; +} + +li { + width: 2px; + height: 10px; + background-color: #000; + position: absolute; + left: 249px; + top: 0; + transform-origin: center 250px; +} + +li:nth-child(5n+1) { + height: 20px; +} \ No newline at end of file diff --git "a/\344\274\215\346\231\272\350\276\211/H5+Css3/\347\275\221\346\240\274\345\270\203\345\261\200/Css/index.css" "b/\344\274\215\346\231\272\350\276\211/H5+Css3/\347\275\221\346\240\274\345\270\203\345\261\200/Css/index.css" new file mode 100644 index 0000000000000000000000000000000000000000..824ababe86e3c2913f07d620a5eebeeb9235cd93 --- /dev/null +++ "b/\344\274\215\346\231\272\350\276\211/H5+Css3/\347\275\221\346\240\274\345\270\203\345\261\200/Css/index.css" @@ -0,0 +1,130 @@ +html, body { + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background-color: #eaeaea; +} +.it{ + display: block; + width: 24px; + height: 24px; + margin: 4px; + background-color: black; + border-radius: 50%; +} +[class^='center'] { + background-color: white; + width: 104px; + height: 104px; + padding: 4px; + margin: 16px; + border-radius: 10%; + box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7; +} +.center_one{ + display: grid; + grid-template-columns: 34px 34px 34px; + grid-template-rows: 34px 34px 34px; +} +.center_one .it{ + grid-column: 2 / 3; + grid-row: 2 / 3; +} +.center_two{ + display: grid; + grid-template-columns: 34px 34px 34px; + grid-template-rows: 34px 34px 34px; +} +.center_two .it:nth-of-type(2){ + grid-column: 3 / 3; + grid-row: 3 / 3; +} + +.center_three { + display: grid; + grid-template-columns: 34px 34px 34px; + grid-template-rows: 34px 34px 34px; +} +.center_three .it:nth-of-type(2){ + grid-column: 2 / 3; + grid-row: 2 / 3; +} +.center_three .it:nth-of-type(3){ + grid-column: 3 / 3; + grid-row: 3 / 3; +} +.center_four{ + display: grid; + grid-template-columns: 34px 34px 34px; + grid-template-rows: 34px 34px 34px; + grid-template-areas: + 'a . b' + '. . .' + 'd . c'; +} +.center_four { + grid-area: a; +} +.center_four :nth-of-type(2) { + grid-area:d; +} +.center_four :nth-of-type(3) { + grid-area:b; +} +.center_four :nth-of-type(4) { + grid-area:c; +} + +.center_five{ + display: grid; + grid-template-columns: 34px 34px 34px; + grid-template-rows: 34px 34px 34px; + grid-template-areas: + 'a . b' + '. c .' + 'd . e'; +} +.center_five { + grid-area:a; +} +.center_five :nth-of-type(2) { + grid-area:d; +} +.center_five :nth-of-type(3) { + grid-area:b; +} +.center_five :nth-of-type(4) { + grid-area:c; +} +.center_five :nth-of-type(5) { + grid-area:e; +} + +.center_six{ + display: grid; + grid-template-columns: 34px 34px 34px; + grid-template-rows: 34px 34px 34px; + grid-template-areas: + 'a . b' + 'c . d' + 'e . f'; +} +.center_six { + grid-area:a; +} +.center_six :nth-of-type(2) { + grid-area:b; +} +.center_six :nth-of-type(3) { + grid-area:c; +} +.center_six :nth-of-type(4) { + grid-area:d; +} +.center_six :nth-of-type(5) { + grid-area:e; +} +.center_six :nth-of-type(6) { + grid-area:f; +} \ No newline at end of file diff --git "a/\344\274\215\346\231\272\350\276\211/H5+Css3/\347\275\221\346\240\274\345\270\203\345\261\200/Grid.html" "b/\344\274\215\346\231\272\350\276\211/H5+Css3/\347\275\221\346\240\274\345\270\203\345\261\200/Grid.html" new file mode 100644 index 0000000000000000000000000000000000000000..844bad12e1460cc538c7fa24a3e1c58927eebb6f --- /dev/null +++ "b/\344\274\215\346\231\272\350\276\211/H5+Css3/\347\275\221\346\240\274\345\270\203\345\261\200/Grid.html" @@ -0,0 +1,122 @@ + + + + + + + Document + + + +
+
50%
+
50%
+
+
+
33%
+
33%
+
33%
+
+
+
25%
+
25%
+
25%
+
25%
+ +
50%
+
50%
+
+ + \ No newline at end of file diff --git "a/\344\274\215\346\231\272\350\276\211/H5+Css3/\347\275\221\346\240\274\345\270\203\345\261\200/index.html" "b/\344\274\215\346\231\272\350\276\211/H5+Css3/\347\275\221\346\240\274\345\270\203\345\261\200/index.html" new file mode 100644 index 0000000000000000000000000000000000000000..88eab0ffabf0eb9daee6f415e97bde077c63de4c --- /dev/null +++ "b/\344\274\215\346\231\272\350\276\211/H5+Css3/\347\275\221\346\240\274\345\270\203\345\261\200/index.html" @@ -0,0 +1,48 @@ + + + + + + Document + + + +
+ +
+
+ + +
+
+ + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + + +
+ + \ No newline at end of file diff --git "a/H5+Css3/\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/index.html" "b/\344\274\215\346\231\272\350\276\211/H5+Css3/\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/index.html" similarity index 100% rename from "H5+Css3/\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/index.html" rename to "\344\274\215\346\231\272\350\276\211/H5+Css3/\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/index.html"