{"id":1580,"date":"2022-07-02T02:05:00","date_gmt":"2022-07-01T18:05:00","guid":{"rendered":"https:\/\/fromideatocreation.com\/?p=1210"},"modified":"2023-07-02T16:36:47","modified_gmt":"2023-07-02T08:36:47","slug":"%e3%80%90next-js-%e7%b3%bb%e5%88%97%e3%80%91%e8%b3%87%e7%94%a2%e3%80%81%e5%be%8c%e8%a8%ad%e8%b3%87%e6%96%99%e8%88%87css-7-2","status":"publish","type":"post","link":"https:\/\/fromideatocreation.com\/?p=1580","title":{"rendered":"\u3010NEXT.JS \u7cfb\u5217\u3011\u8cc7\u7522\u3001\u5f8c\u8a2d\u8cc7\u6599\u8207CSS 7"},"content":{"rendered":"\n

\u96d5\u7422\u4f48\u5c40<\/h2>\n\n\n\n

\u5230\u76ee\u524d\u70ba\u6b62\uff0c\u6211\u5011\u53ea\u6dfb\u52a0\u4e86\u6700\u5c11\u7684 React \u548c CSS \u7a0b\u5f0f\u78bc\u4f86\u8aaa\u660e\u8af8\u5982 CSS \u6a21\u7d44\u4e4b\u985e\u7684\u6982\u5ff5\u3002 \u5728\u6211\u5011\u7e7c\u7e8c\u4e0b\u4e00\u7bc0\u95dc\u65bc\u8cc7\u6599\u7372\u53d6<\/a>\u7684\u8ab2\u7a0b\u4e4b\u524d\uff0c\u8b93\u6211\u5011\u5b8c\u5584\u4e00\u4e0b\u6211\u5011\u7684\u9801\u9762\u6a23\u5f0f\u548c\u7a0b\u5f0f\u78bc\u3002<\/p>\n\n\n\n

<\/div>\n\n\n\n

\u66f4\u65b0 components\/layout.module.css<\/h3>\n\n\n\n

\u9996\u5148\uff0c\u6253\u958b components\/layout.module.css<\/code> \u4e26\u5c07\u5176\u5167\u5bb9\u66ff\u63db\u70ba\u4ee5\u4e0b\u66f4\u7cbe\u7f8e\u7684\u4f48\u5c40\u548c\u982d\u50cf\u6a23\u5f0f\uff1a<\/p>\n\n\n\n

.container {\n  max-width: 36rem;\n  padding: 0 1rem;\n  margin: 3rem auto 6rem;\n}\n\n.header {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.backToHome {\n  margin: 3rem 0 0;\n}<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
\u5efa\u7acb styles\/utils.module.css<\/h3>\n\n\n\n
\u5176\u6b21\uff0c\u8b93\u6211\u5011\u70ba\u5b57\u578b\u548c\u5176\u4ed6\u8de8\u591a\u500b\u5143\u4ef6\u53ef\u4f7f\u7528\u7684\u5efa\u7acb\u4e00\u4e9b\u5be6\u7528\u7684 CSS classes\u3002<\/p>\n\n\n\n
\u8b93\u6211\u5011\u6dfb\u52a0\u4e00\u500b\u540d\u70ba styles\/utils.module.css<\/code> \u7684\u65b0 CSS \u6587\u4ef6\uff0c\u5176\u5167\u5bb9\u5982\u4e0b\uff1a<\/p>\n\n\n\n
.heading2Xl {\n  font-size: 2.5rem;\n  line-height: 1.2;\n  font-weight: 800;\n  letter-spacing: -0.05rem;\n  margin: 1rem 0;\n}\n\n.headingXl {\n  font-size: 2rem;\n  line-height: 1.3;\n  font-weight: 800;\n  letter-spacing: -0.05rem;\n  margin: 1rem 0;\n}\n\n.headingLg {\n  font-size: 1.5rem;\n  line-height: 1.4;\n  margin: 1rem 0;\n}\n\n.headingMd {\n  font-size: 1.2rem;\n  line-height: 1.5;\n}\n\n.borderCircle {\n  border-radius: 9999px;\n}\n\n.colorInherit {\n  color: inherit;\n}\n\n.padding1px {\n  padding-top: 1px;\n}\n\n.list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.listItem {\n  margin: 0 0 1.25rem;\n}\n\n.lightText {\n  color: #666;\n}<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
\u66f4\u65b0 components\/layout.js<\/h3>\n\n\n\n
\u7b2c\u4e09\uff0c\u6253\u958b components\/layout.js<\/code> \u4e26\u5c07\u5176\u5167\u5bb9\u66ff\u63db\u70ba\u4ee5\u4e0b\u7a0b\u5f0f\u78bc\uff0c\u5c07 Your Name<\/code> \u66f4\u6539\u70ba\u5be6\u969b\u540d\u7a31\uff1a<\/p>\n\n\n\n
import Head from 'next\/head';\nimport Image from 'next\/image';\nimport styles from '.\/layout.module.css';\nimport utilStyles from '..\/styles\/utils.module.css';\nimport Link from 'next\/link';\n\nconst name = 'Your Name';\nexport const siteTitle = 'Next.js Sample Website';\n\nexport default function Layout({ children, home }) {\n  return (\n    <div className={styles.container}>\n      <Head>\n        <link rel=\"icon\" href=\"\/favicon.ico\" \/>\n        <meta\n          name=\"description\"\n          content=\"Learn how to build a personal website using Next.js\"\n        \/>\n        <meta\n          property=\"og:image\"\n          content={`https:\/\/og-image.vercel.app\/${encodeURI(\n            siteTitle,\n          )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}\n        \/>\n        <meta name=\"og:title\" content={siteTitle} \/>\n        <meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n      <\/Head>\n      <header className={styles.header}>\n        {home ? (\n          <>\n            <Image\n              priority\n              src=\"\/images\/profile.jpg\"\n              className={utilStyles.borderCircle}\n              height={144}\n              width={144}\n              alt={name}\n            \/>\n            <h1 className={utilStyles.heading2Xl}>{name}<\/h1>\n          <\/>\n        ) : (\n          <>\n            <Link href=\"\/\">\n              <a>\n                <Image\n                  priority\n                  src=\"\/images\/profile.jpg\"\n                  className={utilStyles.borderCircle}\n                  height={108}\n                  width={108}\n                  alt={name}\n                \/>\n              <\/a>\n            <\/Link>\n            <h2 className={utilStyles.headingLg}>\n              <Link href=\"\/\">\n                <a className={utilStyles.colorInherit}>{name}<\/a>\n              <\/Link>\n            <\/h2>\n          <\/>\n        )}\n      <\/header>\n      <main>{children}<\/main>\n      {!home && (\n        <div className={styles.backToHome}>\n          <Link href=\"\/\">\n            <a>\u2190 Back to home<\/a>\n          <\/Link>\n        <\/div>\n      )}\n    <\/div>\n  );\n}<\/code><\/pre>\n\n\n\n
\u4ee5\u4e0b\u662f\u65b0\u5167\u5bb9\uff1a<\/p>\n\n\n\n