{"id":217,"date":"2024-06-08T12:22:15","date_gmt":"2024-06-08T04:22:15","guid":{"rendered":"http:\/\/www.shifengzhi.asia\/?p=217"},"modified":"2024-06-08T12:22:15","modified_gmt":"2024-06-08T04:22:15","slug":"%e7%bd%91%e6%a0%bc%e5%b8%83%e5%b1%80%e7%bc%a9%e6%94%be%e5%8a%a8%e7%94%bb","status":"publish","type":"post","link":"https:\/\/boki.shifengzhi.top\/?p=217","title":{"rendered":"\u7f51\u683c\u5e03\u5c40\u7f29\u653e\u52a8\u753b"},"content":{"rendered":"

\u6548\u679c\u5c55\u793a<\/h3>\n

\"\"<\/div><\/p>\n

\u5177\u4f53\u5b9e\u73b0<\/h3>\n

HTML\u90e8\u5206\u6ca1\u4ec0\u4e48\u597d\u8bf4\u7684\uff0c\u5c31\u662f9\u4e2adiv\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n

\/\/ index.html\n<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <title>\u7f51\u683c\u5e03\u5c40\u52a8\u753b<\/title>\n  <link rel="stylesheet" href=".\/index.css">\n<\/head>\n<body>\n  <div class="container">\n    <div class="item"><\/div>\n    <div class="item"><\/div>\n    <div class="item"><\/div>\n    <div class="item"><\/div>\n    <div class="item"><\/div>\n    <div class="item"><\/div>\n    <div class="item"><\/div>\n    <div class="item"><\/div>\n    <div class="item"><\/div>\n  <\/div>\n<\/body>\n<\/html><\/code><\/pre>\n
\u6837\u5f0f\u90e8\u5206\u6211\u9009\u62e9\u7528SCSS\u6765\u5199\uff0c\u611f\u89c9\u66f4\u65b9\u4fbf\u4e00\u4e9b\uff0c\u53ef\u4ee5\u4f7f\u7528\u5faa\u73af\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n
\/\/ index.scss\nbody {\n  background: #23262d;\n}\n.container {\n  width: 400px;\n  height: 400px;\n  margin: 0 auto;\n  margin-top: 50px;\n  display: grid;\n  grid-template-rows: 1fr 1fr 1fr;\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-gap: 10px;\n  transition: 0.5s;\n}\n@for $i from 0 through 8 {\n  .item:nth-child(#{$i+1}){\n    \/\/ \u8272\u76f8\u73af\uff0chsl(hue, saturation, lightness)\uff0c(\u8272\u8c03\uff0c\u9971\u548c\u5ea6\uff0c\u4eae\u5ea6)\n    background: hsl(($i * 40%), 100%, 74%);\n  }\n  .container:has(.item:nth-child(#{$i+1}):hover) {\n    $r: floor($i \/ 3 + 1); \/\/ 1 - 3\n    $c: $i % 3 + 1; \/\/ 1 - 3\n    $arr: 1fr 1fr 1fr;\n    $rows: set-nth($arr, $r, 2fr);\n    $cols: set-nth($arr, $c, 2fr);\n    grid-template-rows: $rows;\n    grid-template-columns: $cols;\n  }\n}<\/code><\/pre>\n
\u5faa\u73af\u4ece0\u52308\u90fd\u80fd\u53d6\u5230\uff0c\u53ef\u4ee5\u53d6\u52308\uff0c\u4e0d\u8981\u5199\u62100\u52309\uff0c\u4e0d\u7136\u5c31\u8d8a\u754c\u4e86<\/strong>
\nPS\uff1aSCSS\u81ea\u52a8\u7f16\u8bd1\u51faCSS\u53ef\u4ee5\u4f7f\u7528\u63d2\u4ef6Easy Sass<\/code>
\n\u770b\u5b8c\u4e86\u4e5f\u53bb\u81ea\u5df1\u52a8\u624b\u5b9e\u73b0\u4e00\u4e0b\u5427~<\/p>\n","protected":false},"excerpt":{"rendered":"
\u6548\u679c\u5c55\u793a \u5177\u4f53\u5b9e\u73b0 HTML\u90e8\u5206\u6ca1\u4ec0\u4e48\u597d\u8bf4\u7684\uff0c\u5c31\u662f9\u4e2adiv\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a \/\/ index.html < […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[15],"class_list":["post-217","post","type-post","status-publish","format-standard","hentry","category-5","tag-css"],"_links":{"self":[{"href":"https:\/\/boki.shifengzhi.top\/index.php?rest_route=\/wp\/v2\/posts\/217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/boki.shifengzhi.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/boki.shifengzhi.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/boki.shifengzhi.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/boki.shifengzhi.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=217"}],"version-history":[{"count":1,"href":"https:\/\/boki.shifengzhi.top\/index.php?rest_route=\/wp\/v2\/posts\/217\/revisions"}],"predecessor-version":[{"id":218,"href":"https:\/\/boki.shifengzhi.top\/index.php?rest_route=\/wp\/v2\/posts\/217\/revisions\/218"}],"wp:attachment":[{"href":"https:\/\/boki.shifengzhi.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/boki.shifengzhi.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/boki.shifengzhi.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}