{"id":96,"date":"2021-04-20T02:31:29","date_gmt":"2021-04-19T18:31:29","guid":{"rendered":"https:\/\/www.creamgod45.lionfree.net\/wordpress\/?p=96"},"modified":"2021-04-20T02:36:10","modified_gmt":"2021-04-19T18:36:10","slug":"css-%e7%b6%b2%e9%a0%81%e7%89%a9%e4%bb%b6%e6%99%82%e9%96%93%e7%b7%9a","status":"publish","type":"post","link":"https:\/\/www.creamgod45.lionfree.net\/wordpress\/archives\/96","title":{"rendered":"CSS \u7db2\u9801\u7269\u4ef6\u6642\u9593\u7dda"},"content":{"rendered":"\n<figure class=\"wp-block-gallery columns-2 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"525\" height=\"1024\" src=\"https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-content\/uploads\/2021\/04\/carbon-3-525x1024.png\" alt=\"\" data-id=\"106\" data-link=\"https:\/\/www.creamgod45.lionfree.net\/wordpress\/?attachment_id=106\" class=\"wp-image-106\" srcset=\"https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-content\/uploads\/2021\/04\/carbon-3-525x1024.png 525w, https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-content\/uploads\/2021\/04\/carbon-3-154x300.png 154w, https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-content\/uploads\/2021\/04\/carbon-3-768x1499.png 768w, https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-content\/uploads\/2021\/04\/carbon-3-787x1536.png 787w, https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-content\/uploads\/2021\/04\/carbon-3-1049x2048.png 1049w, https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-content\/uploads\/2021\/04\/carbon-3-1200x2343.png 1200w, https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-content\/uploads\/2021\/04\/carbon-3.png 1510w\" sizes=\"(max-width: 525px) 100vw, 525px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"686\" height=\"1024\" src=\"https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-content\/uploads\/2021\/04\/carbon1-1-686x1024.png\" alt=\"\" data-id=\"109\" data-full-url=\"https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-content\/uploads\/2021\/04\/carbon1-1.png\" data-link=\"https:\/\/www.creamgod45.lionfree.net\/wordpress\/?attachment_id=109\" class=\"wp-image-109\" srcset=\"https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-content\/uploads\/2021\/04\/carbon1-1-686x1024.png 686w, https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-content\/uploads\/2021\/04\/carbon1-1-201x300.png 201w, https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-content\/uploads\/2021\/04\/carbon1-1-768x1147.png 768w, https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-content\/uploads\/2021\/04\/carbon1-1-1029x1536.png 1029w, https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-content\/uploads\/2021\/04\/carbon1-1-1372x2048.png 1372w, https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-content\/uploads\/2021\/04\/carbon1-1-1200x1792.png 1200w, https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-content\/uploads\/2021\/04\/carbon1-1.png 1440w\" sizes=\"(max-width: 686px) 100vw, 686px\" \/><\/figure><\/li><\/ul><figcaption class=\"blocks-gallery-caption\">Carbon \u7522\u751f\u7684\u539f\u59cb\u78bc | CSS | HTML<\/figcaption><\/figure>\n\n\n\n<p>HTML \u7a0b\u5f0f\u78bc<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"timeline\"&gt;\n  &lt;div class=\"tlitem\"&gt;\n    &lt;div class=\"tlitem_frame\"&gt;\n      &lt;span class=\"tlitem_icon\"&gt;\n        &lt;div class=\"tlitem_time\"&gt;1980\/1&lt;\/div&gt;&amp;nbsp;\n        &lt;div class=\"tlitem_line\"&gt;&lt;\/div&gt;\n      &lt;\/span&gt;\n      &lt;div class=\"tlitem_content\"&gt;\n        &lt;h4&gt;TEST 1&lt;\/h4&gt;\n        &lt;div&gt;\n          &lt;p&gt;TEST&lt;\/p&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;div class=\"tlitem\"&gt;\n    &lt;div class=\"tlitem_frame\"&gt;\n      &lt;span class=\"tlitem_icon\"&gt;\n        &lt;div class=\"tlitem_time\"&gt;1995\/11&lt;\/div&gt;&amp;nbsp;\n        &lt;div class=\"tlitem_line\"&gt;&lt;\/div&gt;\n      &lt;\/span&gt;\n      &lt;div class=\"tlitem_content\"&gt;\n        &lt;h4&gt;TEST 2&lt;\/h4&gt;\n        &lt;div&gt;\n          &lt;p&gt;TEST&lt;\/p&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;div class=\"tlitem\"&gt;\n    &lt;div class=\"tlitem_frame\"&gt;\n      &lt;span class=\"tlitem_icon\"&gt;\n        &lt;div class=\"tlitem_time\"&gt;1997\/1&lt;\/div&gt;&amp;nbsp;\n        &lt;div class=\"tlitem_line\"&gt;&lt;\/div&gt;\n      &lt;\/span&gt;\n      &lt;div class=\"tlitem_content\"&gt;\n        &lt;h4&gt;TEST 3&lt;\/h4&gt;\n        &lt;div&gt;\n          &lt;p&gt;TEST\n          &lt;\/p&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>CSS \u7a0b\u5f0f\u78bc<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.timeline{\n    position: relative;\n    width: 500px;\n    .tlitem{\n        width: 100%;\n        .tlitem_frame{\n            padding: 16px;\n            display: inline-block;\n            width: 100%;\n            .tlitem_icon{\n                position: absolute;\n                left: 94px;\n                .tlitem_time{\n                    position: absolute;\n                    left: -72px;\n                    top: 72px;\n                }\n                .tlitem_line{\n                    position: absolute;\n                    left: 0px;\n                    top: 76px;\n                    background-color: black;\n                    border-radius: 8px;\n                    width: 72px;\n                    height: 12px;\n                }\n            }\n            .tlitem_icon::before{\n                position: absolute;\n                top:72px;\n                left: -3px;\n                content: '';\n                width: 20px;\n                height: 20px;\n                background: black;\n                border-radius: 100%;\n                border: gray 3px solid;\n            }\n            .tlitem_icon::before .red {\n                background: red;\n            }\n            .tlitem_content{\n                padding: 16px;\n                display: inline-block;\n                background: #fff23b;\n                border-left: 12px solid black;\n                color: black;\n                border-radius: 12px;\n                width: auto;\n                margin-left: 144px;\n            }\n        }\n    }\n}\n\n.timeline::before{\n    content: '';\n    width: 12px;\n    height: 100%;\n    background: gray;\n    position: absolute;\n    left: 94px;\n    border-radius: 8px;\n}<\/code><\/pre>\n\n\n\n<p><strong>\u9810\u89bd\u756b\u9762<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"703\" height=\"841\" src=\"https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-content\/uploads\/2021\/04\/preview.png\" alt=\"\" class=\"wp-image-113\" srcset=\"https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-content\/uploads\/2021\/04\/preview.png 703w, https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-content\/uploads\/2021\/04\/preview-251x300.png 251w\" sizes=\"(max-width: 703px) 100vw, 703px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>CSS \u7db2\u9801\u7269\u4ef6\u6642\u9593\u7dda<\/p>\n","protected":false},"author":1,"featured_media":67,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"two_page_speed":[],"footnotes":""},"categories":[5],"tags":[14,9,7,16,17,15],"class_list":["post-96","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-5","tag-css","tag-css3","tag-html","tag-16","tag-17","tag-15"],"_links":{"self":[{"href":"https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-json\/wp\/v2\/posts\/96"}],"collection":[{"href":"https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-json\/wp\/v2\/comments?post=96"}],"version-history":[{"count":6,"href":"https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-json\/wp\/v2\/posts\/96\/revisions"}],"predecessor-version":[{"id":115,"href":"https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-json\/wp\/v2\/posts\/96\/revisions\/115"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-json\/wp\/v2\/media\/67"}],"wp:attachment":[{"href":"https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-json\/wp\/v2\/media?parent=96"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-json\/wp\/v2\/categories?post=96"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creamgod45.lionfree.net\/wordpress\/wp-json\/wp\/v2\/tags?post=96"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}