search

博客列表 >grid 12列栅格布局的组件并仿写页面

grid 12列栅格布局的组件并仿写页面

L.E
L.E原创
2021年04月23日 01:12:23602浏览

1.栅格布局

  • html 代码
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>12列栅格布局</title>
  7.     <link rel="stylesheet" href="grid.css" />
  8.   </head>
  9.   <body>
  10.     <div class="container">
  11.       <!-- 先写一行，在行中再定义列 -->
  12.       <!-- 1等份 -->
  13.       <div class="row">
  14.         <span class="item col-12">12列</span>
  15.       </div>
  17.       <!-- 2等份 -->
  18.       <div class="row">
  19.         <span class="item col-6">6列</span>
  20.         <span class="item col-6">6列</span>
  21.       </div>
  23.       <!-- 3等份 -->
  24.       <div class="row">
  25.         <span class="item col-4">4列</span>
  26.         <span class="item col-4">4列</span>
  27.         <span class="item col-4">4列</span>
  28.       </div>
  30.       <div class="row">
  31.         <span class="item col-3">3列</span>
  32.         <span class="item col-9">9列</span>
  33.       </div>
  34.     </div>
  35.   </body>
  36. </html>
  • css 代码
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. body {
  8.   width: 100vw;
  9.   height: 100vh;
  10.   display: grid;
  11.   place-content: center;
  12. }
  14. .container {
  15.   min-width: 80vw;
  16.   display: grid;
  17.   gap: 0.5em;
  18. }
  20. .container .row {
  21.   display: grid;
  22.   grid-template-columns: repeat(12, 1fr);
  23.   min-height: 3em;
  24.   gap: 0.5em;
  25. }
  27. .container .row .item {
  28.   padding: 1em;
  29.   border: 1px solid;
  30.   background-color: cyan;
  31. }
  33. .col-12 {
  34.   grid-area: auto / span 12;
  35. }
  37. .col-11 {
  38.   grid-area: auto / span 11;
  39. }
  41. .col-10 {
  42.   grid-area: auto / span 10;
  43. }
  45. .col-9 {
  46.   grid-area: auto / span 9;
  47. }
  49. .col-8 {
  50.   grid-area: auto / span 8;
  51. }
  53. .col-7 {
  54.   grid-area: auto / span 7;
  55. }
  57. .col-6 {
  58.   grid-area: auto / span 6;
  59. }
  61. .col-5 {
  62.   grid-area: auto / span 5;
  63. }
  65. .col-4 {
  66.   grid-area: auto / span 4;
  67. }
  69. .col-3 {
  70.   grid-area: auto / span 3;
  71. }
  73. .col-2 {
  74.   grid-area: auto / span 2;
  75. }
  77. .col-1 {
  78.   grid-area: auto / span 1;
  79. }
  • 效果图

2.仿写 php 中文网手机版首页

  • html 代码
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>12列栅格布局仿写页面</title>
  7.     <link rel="stylesheet" href="css/grid.css" />
  8.     <link rel="stylesheet" href="css/index.css" />
  9.     <style></style>
  10.   </head>
  11.   <body>
  12.     <!-- 页眉 -->
  13.     <header>
  14.       <div class="container">
  15.         <div class="row">
  16.           <div class="item col-2">
  17.             <a href="" class="user"
  18.               ><img src="img/login.png" alt="" class="user-img"
  19.             /></a>
  20.           </div>
  21.           <div class="item col-8">
  22.             <a href="" class="logo"
  23.               ><img src="img/logo.png" alt="" class="img-logo"
  24.             /></a>
  25.           </div>
  26.           <div class="item col-2">
  27.             <img src="img/menu.png" alt="" class="menu-img" />
  28.           </div>
  29.         </div>
  30.       </div>
  31.     </header>
  32.     <!-- 主体 -->
  33.     <main>
  34.       <div class="silder">
  35.         <ul>
  36.           <li><img src="img/3.jpg" alt="" /></li>
  37.         </ul>
  38.       </div>
  39.       <div class="container menus">
  40.         <ul class="row">
  41.           <li class="col-3">
  42.             <a href=""><img src="img/html.png" alt="" />HTML/CSS</a>
  43.           </li>
  44.           <li class="col-3">
  45.             <a href=""><img src="img/JavaScript.png" alt="" />JavaScript</a>
  46.           </li>
  47.           <li class="col-3">
  48.             <a href=""><img src="img/code.png" alt="" />服务器</a>
  49.           </li>
  50.           <li class="col-3">
  51.             <a href=""><img src="img/sql.png" alt="" />数据库</a>
  52.           </li>
  53.           <li class="col-3">
  54.             <a href=""><img src="img/app.png" alt="" />移动端</a>
  55.           </li>
  56.           <li class="col-3">
  57.             <a href=""><img src="img/manual.png" alt="" />手册</a>
  58.           </li>
  59.           <li class="col-3">
  60.             <a href=""><img src="img/tool2.png" alt="" />工具</a>
  61.           </li>
  62.           <li class="col-3">
  63.             <a href=""><img src="img/live.png" alt="" />直播</a>
  64.           </li>
  65.         </ul>
  66.       </div>
  67.       <!-- 推荐课程 -->
  68.       <div class="container tj">
  69.         <div class="title">推荐课程</div>
  70.         <div class="row kcgg">
  71.           <a class="col-6" href=""
  72.             ><img src="img/5e0d82773b4fe808.png" alt=""
  73.           /></a>
  74.           <a class="col-6" href=""
  75.             ><img src="img/5f606a9a7fe99960.jpg" alt=""
  76.           /></a>
  77.         </div>
  78.         <ul class="row kclist">
  79.           <li class="col-12">
  80.             <a href=""><img src="img/6049da2b3898c385.jpg" alt="" /></a>
  81.             <div class="tj-1-intro">
  82.               <p><a href="">php8，我来也</a></p>
  83.               <p><span class="level">初级</span><span>10000次播放</span></p>
  84.             </div>
  85.           </li>
  86.           <li class="col-12">
  87.             <a href=""><img src="img/6049da2b3898c385.jpg" alt="" /></a>
  88.             <div class="tj-1-intro">
  89.               <p><a href="">php8，我来也</a></p>
  90.               <p><span class="level">初级</span><span>10000次播放</span></p>
  91.             </div>
  92.           </li>
  93.         </ul>
  94.       </div>
  95.       <!-- 最新更新 -->
  96.       <div class="container zx">
  97.         <div class="title">最新更新</div>
  98.         <ul class="row kclist">
  99.           <li class="col-12">
  100.             <a href=""><img src="img/6077f6ddce966562.png" alt="" /></a>
  101.             <div class="zx-1-intro">
  102.               <p><a href="">Web开发进阶—jQuery</a></p>
  103.               <p class="zx-info">
  104.                 jQuery是一个 快速
  105.                 简洁的JavaScript框架，它封装JavaScript常用的功能代码
  106.                 提供一种简便的JavaScript设计模式。本套课程将带领大家进入jQuery的学习……
  107.               </p>
  108.               <p><span class="level">初级</span><span>888次播放</span></p>
  109.             </div>
  110.           </li>
  111.           <li class="col-12">
  112.             <a href=""><img src="img/6077f6ddce966562.png" alt="" /></a>
  113.             <div class="zx-1-intro">
  114.               <p><a href="">Web开发进阶—jQuery</a></p>
  115.               <p class="zx-info">
  116.                 jQuery是一个 快速
  117.                 简洁的JavaScript框架，它封装JavaScript常用的功能代码
  118.                 提供一种简便的JavaScript设计模式。本套课程将带领大家进入jQuery的学习……
  119.               </p>
  120.               <p><span class="level">初级</span><span>888次播放</span></p>
  121.             </div>
  122.           </li>
  123.           <li class="col-12">
  124.             <a href=""><img src="img/6077f6ddce966562.png" alt="" /></a>
  125.             <div class="zx-1-intro">
  126.               <p><a href="">Web开发进阶—jQuery</a></p>
  127.               <p class="zx-info">
  128.                 jQuery是一个 快速
  129.                 简洁的JavaScript框架，它封装JavaScript常用的功能代码
  130.                 提供一种简便的JavaScript设计模式。本套课程将带领大家进入jQuery的学习……
  131.               </p>
  132.               <p><span class="level">初级</span><span>888次播放</span></p>
  133.             </div>
  134.           </li>
  135.           <li class="col-12">
  136.             <a href=""><img src="img/6077f6ddce966562.png" alt="" /></a>
  137.             <div class="zx-1-intro">
  138.               <p><a href="">Web开发进阶—jQuery</a></p>
  139.               <p class="zx-info">
  140.                 jQuery是一个 快速
  141.                 简洁的JavaScript框架，它封装JavaScript常用的功能代码
  142.                 提供一种简便的JavaScript设计模式。本套课程将带领大家进入jQuery的学习……
  143.               </p>
  144.               <p><span class="level">初级</span><span>888次播放</span></p>
  145.             </div>
  146.           </li>
  147.           <li class="col-12">
  148.             <a href=""><img src="img/6077f6ddce966562.png" alt="" /></a>
  149.             <div class="zx-1-intro">
  150.               <p><a href="">Web开发进阶—jQuery</a></p>
  151.               <p class="zx-info">
  152.                 jQuery是一个 快速
  153.                 简洁的JavaScript框架，它封装JavaScript常用的功能代码
  154.                 提供一种简便的JavaScript设计模式。本套课程将带领大家进入jQuery的学习……
  155.               </p>
  156.               <p><span class="level">初级</span><span>888次播放</span></p>
  157.             </div>
  158.           </li>
  159.           <li class="col-12">
  160.             <a href=""><img src="img/6077f6ddce966562.png" alt="" /></a>
  161.             <div class="zx-1-intro">
  162.               <p><a href="">Web开发进阶—jQuery</a></p>
  163.               <p class="zx-info">
  164.                 jQuery是一个 快速
  165.                 简洁的JavaScript框架，它封装JavaScript常用的功能代码
  166.                 提供一种简便的JavaScript设计模式。本套课程将带领大家进入jQuery的学习……
  167.               </p>
  168.               <p><span class="level">初级</span><span>888次播放</span></p>
  169.             </div>
  170.           </li>
  171.         </ul>
  172.       </div>
  173.     </main>
  174.     <!-- 页脚 -->
  175.     <footer>
  176.       <nav class="footer-navs">
  177.         <a href=""><img src="img/home.png" alt="" />首页</a>
  178.         <a href=""><img src="img/video.png" alt="" />视频</a>
  179.         <a href=""><img src="img/live2.png" alt="" />直播</a>
  180.         <a href=""><img src="img/community.png" alt="" />社区</a>
  181.         <a href=""><img src="img/my.png" alt="" />我的</a>
  182.       </nav>
  183.     </footer>
  184.   </body>
  185. </html>
  • css 代码

grid.css

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. .container {
  8.   min-width: 80vw;
  9.   display: grid;
  10.   gap: 0.5em;
  11. }
  13. .container .row {
  14.   display: grid;
  15.   /* 任何一行都是由12列组成 */
  16.   grid-template-columns: repeat(12, 1fr);
  17.   min-height: 3em;
  18.   gap: 0.5em;
  19. }
  21. .container .row .item {
  22.   padding: 1em;
  23.   border: 1px solid;
  24.   background-color: cyan;
  25. }
  27. .col-12 {
  28.   grid-area: auto / span 12;
  29. }
  31. .col-11 {
  32.   grid-area: auto / span 11;
  33. }
  35. .col-10 {
  36.   grid-area: auto / span 10;
  37. }
  39. .col-9 {
  40.   grid-area: auto / span 9;
  41. }
  43. .col-8 {
  44.   grid-area: auto / span 8;
  45. }
  47. .col-7 {
  48.   grid-area: auto / span 7;
  49. }
  51. .col-6 {
  52.   grid-area: auto / span 6;
  53. }
  55. .col-5 {
  56.   grid-area: auto / span 5;
  57. }
  59. .col-4 {
  60.   grid-area: auto / span 4;
  61. }
  63. .col-3 {
  64.   grid-area: auto / span 3;
  65. }
  67. .col-2 {
  68.   grid-area: auto / span 2;
  69. }
  71. .col-1 {
  72.   grid-area: auto / span 1;
  73. }

index.css

  1. body {
  2.   background-color: #edeff0;
  3. }
  5. a {
  6.   text-decoration: none;
  7.   color: #888;
  8. }
  10. li {
  11.   list-style: none;
  12. }
  13. /* 页眉 */
  14. header {
  15.   background-color: #2d353c;
  16.   position: fixed;
  17.   width: 100%;
  18.   top: 0;
  19.   height: 3em;
  20. }
  22. header .item {
  23.   height: 3em;
  24.   text-align: center;
  25. }
  27. header .user .user-img {
  28.   width: 2em;
  29.   margin: 0.5em 0 0 0;
  30.   border: 1px solid #8f9498;
  31.   border-radius: 50%;
  32. }
  34. header .logo .img-logo {
  35.   height: 100%;
  36. }
  38. header .menu-img {
  39.   margin: 1em 0 0 0;
  40. }
  42. /* 主体 */
  43. main {
  44.   margin-top: 3em;
  45. }
  46. main .silder {
  47.   height: 10em;
  48. }
  50. main .silder ul li img {
  51.   width: 100%;
  52.   height: 10em;
  53. }
  55. main .menus {
  56.   text-align: center;
  57.   font-size: 14px;
  58.   font-weight: bolder;
  59.   background-color: #fff;
  60.   padding-bottom: 1em;
  61. }
  63. main .menus ul li {
  64.   margin-top: 1em;
  65. }
  67. main .menus ul li a img {
  68.   width: 3em;
  69.   height: 3em;
  70.   display: block;
  71.   margin: 0 auto;
  72. }
  74. /* 推荐课程 */
  75. main .tj {
  76.   padding: 2em 0.5em 0;
  77. }
  79. main .tj .title {
  80.   font-size: 18px;
  81.   font-weight: bolder;
  82.   color: #888;
  83. }
  85. main .tj .kcgg a img {
  86.   width: 100%;
  87.   height: auto;
  88. }
  90. main .tj .kclist li {
  91.   background-color: #fff;
  92.   padding: 0.5em;
  93.   display: grid;
  94.   grid-template-columns: 40% 1fr;
  95.   margin-bottom: 1em;
  96. }
  98. main .tj .kclist a img {
  99.   width: 100%;
  100.   height: auto;
  101. }
  103. main .tj .kclist .tj-1-intro {
  104.   margin: 0 0.5em;
  105. }
  107. main .tj .kclist .tj-1-intro p {
  108.   margin-bottom: 0.5em;
  109. }
  111. main .tj .kclist .tj-1-intro p span {
  112.   font-size: 12px;
  113.   color: #888;
  114. }
  116. main .tj .kclist .tj-1-intro p span.level {
  117.   background-color: #595757;
  118.   color: #fff;
  119.   padding: 3px;
  120.   border-radius: 8px;
  121. }
  123. /* 最新更新 */
  124. main .zx {
  125.   padding: 2em 0.5em 0;
  126.   margin-bottom: 3.5em;
  127. }
  129. main .zx .title {
  130.   font-size: 18px;
  131.   font-weight: bolder;
  132.   color: #888;
  133. }
  135. main .zx .kclist li {
  136.   background-color: #fff;
  137.   padding: 0.5em;
  138.   display: grid;
  139.   grid-template-columns: 40% 60%;
  140.   margin-bottom: 1em;
  141. }
  143. main .zx .kclist a img {
  144.   width: 100%;
  145.   height: auto;
  146. }
  148. main .zx .kclist .zx-1-intro {
  149.   margin: 0 0.5em;
  150. }
  152. main .zx .kclist .zx-1-intro p {
  153.   margin-bottom: 0.5em;
  154.   display: block;
  155. }
  157. main .zx .kclist .zx-1-intro p.zx-info {
  158.   font-size: 12px;
  159.   color: #888;
  160.   overflow: hidden;
  161.   white-space: nowrap;
  162.   text-overflow: ellipsis;
  163. }
  165. main .zx .kclist .zx-1-intro p span {
  166.   font-size: 12px;
  167.   color: #888;
  168. }
  170. main .zx .kclist .zx-1-intro p span.level {
  171.   background-color: #595757;
  172.   color: #fff;
  173.   padding: 3px;
  174.   border-radius: 8px;
  175. }
  177. main .zx .kclist .zx-info + p {
  178.   display: flex;
  179.   justify-content: space-between;
  180. }
  182. /* 页脚 */
  183. footer {
  184.   width: 100%;
  185.   height: 3.5em;
  186.   bottom: 0;
  187.   position: fixed;
  188.   display: flex;
  189.   justify-content: space-around;
  190.   align-items: center;
  191.   background-color: #edeff0;
  192.   border-top: 1px solid #ccc;
  193. }
  195. footer nav {
  196.   display: flex;
  197.   flex-flow: row wrap;
  198.   justify-content: space-between;
  199.   width: 100%;
  200. }
  202. footer nav a {
  203.   display: flex;
  204.   flex-flow: column nowrap;
  205.   align-items: center;
  206.   width: 20%;
  207.   font-size: 14px;
  208. }
  • 效果图
上一条：电商快递物流信息短信通知API案例代码-快递100下一条：JavaScript:时间对象，实例演示右下角广告图
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议