{"id":216,"date":"2024-09-22T10:00:08","date_gmt":"2024-09-22T02:00:08","guid":{"rendered":"\/?p=216"},"modified":"2025-09-26T23:35:37","modified_gmt":"2025-09-26T15:35:37","slug":"css","status":"publish","type":"post","link":"\/?p=216","title":{"rendered":"CSS"},"content":{"rendered":"\n<p>\u53c2\u8003\uff1a<a href=\"https:\/\/man.ilovefishc.com\/css3\/\">https:\/\/man.ilovefishc.com\/css3\/<\/a><\/p>\n\n\n\n<p>\u5de5\u5177\uff1a<a href=\"https:\/\/css.bqrdh.com\/glassmorphism-editor\">https:\/\/css.bqrdh.com\/glassmorphism-editor<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u5c45\u4e2d\u5e03\u5c40<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/\u7edd\u5bf9\u5b9a\u4f4d\u5e03\u5c40:\nposition: absolute;\ntop: 50%;\nleft: 50%;\ntransform: translate(-50%,-50%);\n\/\/\u7236\u5143\u7d20flex\u5e03\u5c40\ndisplay: flex;\njustify-content: center;\nalign-items: center;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">li\u6807\u7b7e\u53bb\u9664\u5706\u70b9<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>list-style: none;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">a\u6807\u7b7e\u53bb\u9664\u4e0b\u5212\u7ebf<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>text-decoration: none;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u5143\u7d20\u9760\u53f3<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>margin-left: auto;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">flex-\u6a2a\u5411\u5bf9\u9f50<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>display: flex;\nalign-items: center;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">flex-\u7eb5\u5411\u5bf9\u9f50<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>display: flex;\njustify-content: center;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u53bb\u9664input\u70b9\u51fb\u540e\u7684\u8fb9\u6846<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>input:focus{\n    outline: none;\n    background-color:rgb(227, 229, 231) ;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u53bb\u9664html\u8fb9\u6846<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>*{\n    padding: 0 auto;\n    margin: 0 auto;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Grid\u5e03\u5c40<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code> display: grid;  \n grid-template-columns: repeat(auto-fill,minmax(300px,1fr));\n\/\/\u6a2a\u6392\u91cd\u590d\u586b\u5145\u586b\u5145\u6b21\u6570\u4e3a\u81ea\u52a8\uff0c\u6700\u5c0f\u6a2a\u6392\u5927\u5c0f\u4e3a300px\uff0c\u6700\u59271fr\u5360\u6ee1\n \/* \u8bbe\u7f6e\u6a2a\u6392\u7684\u683c\u5f0f *\/\n gap: 20px;\n\/\/\u95f4\u8ddd20px<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-embed is-type-rich\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" src=\"\/\/player.bilibili.com\/player.html?aid=&#038;bvid=BV1gw41167gh&#038;p=1\" width=\"100%\" height=\"500\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u8bbe\u7f6e\u5f39\u7a97\u8131\u79bb\u6587\u672c\u6d41(\u5bfc\u822a\u680f\u7f6e\u9876)<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code> position: fixed;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u6587\u672c\u8d85\u51fa\u81ea\u52a8\u5f71\u85cf<\/h3>\n\n\n\n<p>overflow: hidden;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u76d1\u542c\u7a97\u53e3\u5927\u5c0f<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>@media only screen and (max-width: 600px){\n     csscode;\n}\n\/\/\u653e\u5728css\u6700\u540e\u653e\u524d\u9762\u4f1a\u88ab\u66ff\u6362<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u8bbe\u7f6e\u516c\u5171\u53c2\u6570<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>:root{\n    \/* \u6e10\u53d8\u5b57 *\/\n    --mian-h1-color:red;\n}\n\n\nbody{\n    text-align: center;\n\n}\n.butifultext{\n    color:var(--mian-h1-color);\n    transition: color 2s;\n}\n\/\/\u53ef\u4ee5\u901a\u8fc7js\u83b7\u53d6\u503c\u5e76\u66f4\u6539<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u52a8\u753b\u65f6\u95f4\u8bbe\u7f6e<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>transition: 1.5s;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u9690\u85cf\u9875\u9762\u4f46\u5360\u636e\u7a7a\u95f4<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>visibility: hidden;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u5782\u76f4\u6392\u5217<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>flex-direction: column;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u8bbe\u7f6e\u900f\u660e\u5ea6<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>opacity: 0.4;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u5728\u7edd\u5bf9\u5b9a\u4f4d\u4e0b\u8bbe\u7f6e\u9875\u9762\u4f18\u5148\u7ea7<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>z-index: 100;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u8bbe\u7f6e\u9f20\u6807\u6837\u5f0f<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>cursor: pointer;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u8ba1\u7b97\u51fd\u6570<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>calc(100% - 500px);\u6ce8\u610f\u51cf\u53f7\u524d\u540e\u8981\u52a0\u7a7a\u683c<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u53c2\u8003\uff1ahttps:\/\/man.ilovefishc.com\/css3\/ \u5de5\u5177\uff1ahttps:\/\/css.bqrd [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[23],"class_list":["post-216","post","type-post","status-publish","format-standard","hentry","category-css","tag-css"],"_links":{"self":[{"href":"\/index.php?rest_route=\/wp\/v2\/posts\/216"}],"collection":[{"href":"\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=216"}],"version-history":[{"count":13,"href":"\/index.php?rest_route=\/wp\/v2\/posts\/216\/revisions"}],"predecessor-version":[{"id":900,"href":"\/index.php?rest_route=\/wp\/v2\/posts\/216\/revisions\/900"}],"wp:attachment":[{"href":"\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=216"},{"taxonomy":"post_tag","embeddable":true,"href":"\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}