{"id":497,"date":"2024-05-21T16:09:47","date_gmt":"2024-05-21T08:09:47","guid":{"rendered":"https:\/\/instantcheeseshao.com\/?p=497"},"modified":"2024-06-14T11:54:20","modified_gmt":"2024-06-14T03:54:20","slug":"%e3%80%90%e5%89%8d%e7%ab%af%e6%96%b0%e6%89%8b%e6%97%a5%e8%a8%98%e3%80%911-%e4%bb%80%e9%ba%bc%e6%98%afhtml%ef%bc%9f%e4%bb%80%e9%ba%bc%e6%98%afcss%ef%bc%9f%e4%bd%bf%e7%94%a8codepen%e9%ab%94%e9%a9%97","status":"publish","type":"post","link":"https:\/\/instantcheeseshao.com\/%e3%80%90%e5%89%8d%e7%ab%af%e6%96%b0%e6%89%8b%e6%97%a5%e8%a8%98%e3%80%911-%e4%bb%80%e9%ba%bc%e6%98%afhtml%ef%bc%9f%e4%bb%80%e9%ba%bc%e6%98%afcss%ef%bc%9f%e4%bd%bf%e7%94%a8codepen%e9%ab%94%e9%a9%97\/","title":{"rendered":"\u3010\u524d\u7aef\u65b0\u624b\u7b46\u8a18\u30111-\u4ec0\u9ebc\u662fHTML\uff1f\u4ec0\u9ebc\u662fCSS\uff1f\u4f7f\u7528CodePen\u9ad4\u9a57\u64b0\u5beb\u7db2\u7ad9\u5427\uff01"},"content":{"rendered":"\n
\u4eca\u5e744\u6708\u5e95\uff0c\u6211\u5831\u540d\u4e86\u516d\u89d2\u5b78\u9662\u76842024\u8edf\u9ad4\u5de5\u7a0b\u5e2b\u9ad4\u9a57\u71df\uff0c\u6210\u70ba\u4e86\u6211\u5b78\u7fd2\u7db2\u7ad9\u524d\u7aef\u8a2d\u8a08\u7684\u8d77\u9ede\u3002<\/p>\n\n\n\n
\u9019\u500b\u8ab2\u7a0b\u539f\u50f9799\u5143\uff0c\u56e0\u70ba\u525b\u597d\u6709\u8ffd\u8e64\u67da\u667a\u592b\u59bb\u9019\u500b\u7c89\u5c08\uff0c\u5c31\u7528\u4ed6\u5011\u63d0\u4f9b\u7684\u6298\u6263\u78bc\uff0c\u8cb7\u5230\u4e86699\u5143\u7684\u8ab2\u7a0b\u3002\u9019\u500b\u8ab2\u7a0b\u6db5\u84cb60\u500b\u5c0f\u6642\u5f9eHTML\u3001CSS\u5230JavaScript\u7684\u8d85\u5b8c\u6574\u6559\u5b78\u5f71\u7247\uff0c\u52a0\u4e0a\u6bcf\u9031\u6821\u9577\u7684\u76f4\u64ad\u8ab2\u7a0b\u3001\u8a8d\u771f\u7d93\u71df\u7684Discord\u793e\u7fa4\uff0c\u751a\u81f3\u9084\u6709\u52a9\u6559\u9010\u4e00\u6279\u6539\u4f5c\u696d\u4e26\u63d0\u4f9b\u7d50\u696d\u8b49\u66f8\uff0c\u8d85\u7d1a\u7cbe\u5be6\u7684\u5167\u5bb9\uff0c\u525b\u597d\u9047\u4e0a\u6211\u96e2\u8077\u7684\u9019\u6bb5\u671f\u9593\uff0c\u5c31\u6c7a\u5b9a\u8981\u653e\u4e0b\u4e00\u5207\u8a8d\u771f\u5b78\u7fd2\u4e86\u3002<\/p>\n\n\n\n
\u6b61\u8fce\u4f86\u5230\u5373\u6eb6\u555f\u601d\uff01\u6211\u662f\u7ad9\u9577 \u90b5Shao\uff0c\u6211\u559c\u6b61\u95b1\u8b80\u3001\u559c\u6b61\u5b78\u7fd2\uff0c\u800c\u9019\u662f\u6211\u7df4\u7fd2\u8f38\u51fa\u6240\u5b78\u7684\u4e00\u500b\u5e73\u53f0\uff0c\u6211\u5728\u9019\u88e1\u8a66\u8457\u7528\u6700\u7c21\u55ae\u7684\u65b9\u5f0f\uff0c\u5206\u4eab\u555f\u767c\u601d\u8003\u7684\u77e5\u8b58\uff0c\u800c\u6211\u4eca\u5929\u8981\u8ddf\u5927\u5bb6\u5206\u4eab\u4ec0\u9ebc\u662fHTML\uff0c\u548cCSS\u6709\u4ec0\u9ebc\u5dee\u5225\uff1f<\/p>\n\n\n\n
HTML\u7c21\u55ae\u7684\u4f86\u8aaa\u5c31\u662f\u7db2\u7ad9\u7684\u9aa8\u67b6<\/strong>\uff0c\u6211\u5011\u53ef\u4ee5\u900f\u904eHTML\u7684\u8a9e\u6cd5\u4f86\u544a\u8a34\u700f\u89bd\u5668\uff0c\u6211\u7684\u7db2\u7ad9\u653e\u5165\u4e86\u54ea\u4e9b\u5167\u5bb9<\/strong>\u4ee5\u53ca\u9019\u4e9b\u5167\u5bb9\u7684\u7d50\u69cb<\/strong>\uff0c\u597d\u8b93\u700f\u89bd\u5668\u77e5\u9053\u8a72\u5982\u4f55\u986f\u793a\u6211\u7684\u5167\u5bb9\u3002<\/p>\n\n\n\n \u5982\u679cHTML\u662f\u7db2\u7ad9\u7684\u9aa8\u67b6\uff0cCSS\u5c31\u597d\u6bd4\u662f\u7db2\u7ad9\u7684\u88dd\u6f62<\/strong>\uff0c\u6c7a\u5b9a\u4e86\u7db2\u7ad9\u7684\u5916\u89c0\uff1b\u8209\u4f8b\u4f86\u8aaa\uff0c\u6211\u5011\u900f\u904eHTML\u63d2\u4e86\u4e00\u584a\u5beb\u6709\u7db2\u7ad9\u6a19\u984c\u7684\u9580\u724c\uff0cCSS\u5247\u6c7a\u5b9a\u9019\u584a\u9580\u724c\u61c9\u8a72\u8981\u9577\u6210\u4ec0\u9ebc\u6a23\u5b50\uff0c\u5305\u542b\u984f\u8272\u3001\u5b57\u9ad4\u3001\u88dd\u98fe\u7b49\u7b49\u3002<\/p>\n\n\n\n \u63a5\u4e0b\u4f86\u6211\u60f3\u900f\u904e\u4e00\u5f35\u5716\u7247\u4f86\u52a0\u6df1\u5927\u5bb6\u5c0d\u65bcHTML\u8207CSS\u5206\u5de5\u7684\u5370\u8c61\uff0c\u8acb\u898b\u4e0b\u5716\uff1a<\/p>\n\n\n\n \u5f9e\u9019\u5f35\u5716\u61c9\u8a72\u5927\u6982\u53ef\u4ee5\u7406\u89e3\uff0cHTML\u662f\u5efa\u7bc9\u5e2b\uff0c\u8ca0\u8cac\u5c07\u623f\u5b50\u84cb\u597d\uff0c\u81f3\u65bc\u623f\u5b50\u6700\u7d42\u61c9\u8a72\u8981\u9577\u6210\u4ec0\u9ebc\u6a23\u5b50\uff0c\u9084\u662f\u8981\u770bCSS\u9019\u4f4d\u88dd\u6f62\u5e2b\u5085\u600e\u9ebc\u8a2d\u8a08\u4e86\u3002\u800c\u9019\u5169\u8005\u662f\u4e92\u76f8\u5354\u4f5c\u7684\u95dc\u4fc2\uff0c\u5c31\u597d\u50cf\u5728\u84cb\u623f\u5b50\u4e4b\u524d\uff0c\u6211\u5011\u5c31\u6703\u5148\u898f\u5283\u623f\u5b50\u8981\u9577\u6210\u4ec0\u9ebc\u6a23\u5b50\uff0c\u597d\u8b93\u5efa\u7bc9\u5e2b\u53bb\u8a2d\u8a08\u67b6\u69cb\uff0c\u800c\u88dd\u6f62\u5e2b\u5085\u518d\u4f9d\u64da\u67b6\u69cb\u53bb\u88dd\u6f62\u3002\u540c\u7406CSS\u5728\u88dd\u6f62\u7db2\u7ad9\u6642\u9700\u8981\u4f9d\u64daHTML\u7576\u4e2d\u7684\u67b6\u69cb\u4f86\u64b0\u5beb\u76f8\u61c9\u7684\u7a0b\u5f0f\u78bc\uff0cHTML\u4e5f\u9700\u8981\u6839\u64da\u7db2\u7ad9\u6700\u7d42\u5e0c\u671b\u9577\u6210\u4ec0\u9ebc\u6a23\u5b50\uff0c\u4f86\u64b0\u5beb\u9069\u5408CSS\u7684\u67b6\u69cb\u3002<\/p>\n\n\n\n \u9019\u500b\u90e8\u5206\u6211\u5011\u53ef\u4ee5\u900f\u904e codePen<\/a> \u9019\u500b\u7db2\u7ad9\u4f86\u6dfa\u6dfa\u7684\u9ad4\u9a57\u4e00\u4e0bHTML\u8207CSS\u7684\u64b0\u5beb\u65b9\u5f0f\u3002<\/p>\n\n\n\n\u4ec0\u9ebc\u662fCSS\uff1f<\/h4>\n\n\n\n
\u5716\u793aHTML\u8207CSS\u4e4b\u9593\u7684\u95dc\u4fc2<\/h4>\n\n\n\n
<\/figure>\n\n\n\n
HTML\u548cCSS\u5be6\u969b\u4e0a\u662f\u5982\u4f55\u5354\u4f5c\u7684\u5462\uff1f<\/h3>\n\n\n\n
\u904b\u7528CodePen\u4f86\u9ad4\u9a57<\/h4>\n\n\n\n