search

博客列表 >grid栅格布局与grid实战

grid栅格布局与grid实战

月光下，遗忘黑暗
月光下，遗忘黑暗原创
2021年04月05日 16:24:58592浏览

1.栅格布局

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>栅格布局</title>
  6.     <link rel="stylesheet" href="reset.css">
  7. </head>
  8. <body>
  9.     <div class="container">
  10. <!--        一等份-->
  11.         <div class="row">
  12.             <span class="item col-2"></span>
  13.             <span class="item col-10"></span>
  14.         </div>
  15.         <div class="row">
  16.             <span class="item col-12"></span>
  17.         </div>
  18.         <div class="row">
  19.             <span class="item col-6"></span>
  20.             <span class="item col-6"></span>
  21.         </div>
  22.         <div class="row">
  23.             <span class="item col-4"></span>
  24.             <span class="item col-4"></span>
  25.             <span class="item col-4"></span>
  26.         </div>
  27.         <div class="row">
  28.             <span class="item col-3"></span>
  29.             <span class="item col-3"></span>
  30.             <span class="item col-3"></span>
  31.             <span class="item col-3"></span>
  32.         </div>
  33.         <div class="row">
  34.             <span class="item col-2"></span>
  35.             <span class="item col-2"></span>
  36.             <span class="item col-2"></span>
  37.             <span class="item col-2"></span>
  38.             <span class="item col-2"></span>
  39.             <span class="item col-2"></span>
  40.         </div>
  41.         <div class="row">
  42.             <span class="item col-1"></span>
  43.             <span class="item col-1"></span>
  44.             <span class="item col-1"></span>
  45.             <span class="item col-1"></span>
  46.             <span class="item col-1"></span>
  47.             <span class="item col-1"></span>
  48.             <span class="item col-1"></span>
  49.             <span class="item col-1"></span>
  50.             <span class="item col-1"></span>
  51.             <span class="item col-1"></span>
  52.             <span class="item col-1"></span>
  53.             <span class="item col-1"></span>
  54.         </div>
  55.     </div>
  56. </body>
  57. </html>
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  6. }
  7. body {
  8.     width: 100vh;
  9.     height: 100vh;
  10.     display: grid;
  11.     place-content: center;
  12. }
  13. .container {
  14.     min-width: 80vh;
  15.     display: grid;
  16.     gap: 0.5em;
  17. }
  18. .container >.row{
  19.     display: grid;
  20.     grid-template-columns: repeat(12,1fr);
  21.     min-height: 3em;
  22.     gap: 0.5em;
  23. }
  24. .container > .row > .item {
  25.     border: 1px solid red;
  26.     padding: 1em;
  27. }
  28. .col-12 {
  29.     grid-area: auto / span  12;
  30. }
  31. .col-11 {
  32.     grid-area: auto / span  11;
  33. }
  34. .col-10 {
  35.     grid-area: auto / span  10;
  36. }
  37. .col-9 {
  38.     grid-area: auto / span  9;
  39. }
  40. .col-8 {
  41.     grid-area: auto / span  8;
  42. }
  43. .col-7 {
  44.     grid-area: auto / span  7;
  45. }
  47. .col-6 {
  48.     grid-area: auto / span  6;
  49. }
  50. .col-5 {
  51.     grid-area: auto / span  5;
  52. }
  53. .col-4 {
  54.     grid-area: auto / span  4;
  55. }
  56. .col-3 {
  57.     grid-area: auto / span  3;
  58. }
  59. .col-2 {
  60.     grid-area: auto / span  2;
  61. }

效果图

2.grid仿写php中文网首页

代码块 html部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>grid实战</title>
  6.     <link rel="stylesheet" href="css/font_2461844_scjsya2glco/iconfont.css">
  7.     <link rel="stylesheet" href="css/reset.css">
  8.     <link rel="stylesheet" href="css/course.css">
  9.     <link rel="stylesheet" href="css/footer.css">
  10.     <link rel="stylesheet" href="css/header.css">
  11.     <script src="css/font_2461844_scjsya2glco/iconfont.js"></script>
  12. </head>
  13. <body>
  14.     <div class="header">
  15.         <div class="icon">
  16.             <a href="">
  17.                 <svg class="icon" aria-hidden="true">
  18.                     <use xlink:href="#icon-php"></use>
  19.                  </svg>
  20.             </a>
  21.             <div class="php"><a href="">中文网</a></div>
  22.         </div>
  23.         <div class="dh">
  24.             <div class="item"><a href="">首页</a></div>
  25.             <div class="item"><a href="">视频教程</a></div>
  26.             <div class="item"><a href="">入门教程</a></div>
  27.             <div class="item"><a href="">社区问答</a></div>
  28.             <div class="item"><a href="">技术文章</a></div>
  29.             <div class="item"><a href="">资源下载</a></div>
  30.             <div class="item"><a href="">编程词典</a></div>
  31.             <div class="item"><a href="">工具下载</a></div>
  32.             <div class="item"><a href="">php培训</a></div>
  33.         </div>
  35.         <div class="photo">
  36.             <svg class="icon" aria-hidden="true">
  37.                 <use xlink:href="#icon-BARISTA"></use>
  38.             </svg>
  39.         </div>
  40.     </div>
  41.     <div class="main-top">
  42.         <nav class="menus">
  43.             <ul>
  44.                 <li><a href="">php开发</a></li>
  45.                 <li><a href="">前端开发</a></li>
  46.                 <li><a href="">服务端开发</a></li>
  47.                 <li><a href="">移动开发</a></li>
  48.                 <li><a href="">数据库</a></li>
  49.                 <li><a href="">服务器运维&下载</a></li>
  50.                 <li><a href="">在线工具箱</a></li>
  51.                 <li><a href="">常用类库</a></li>
  52.             </ul>
  53.         </nav>
  54.             <ul class="navs">
  55.                 <li><a href="">php头条</a></li>
  56.                 <li><a href="">独孤九剑</a></li>
  57.                 <li><a href="">学习路线</a></li>
  58.                 <li><a href="">在线工具</a></li>
  59.                 <li><a href="">趣味课堂</a></li>
  60.                 <li><a href="">社区问答</a></li>
  61.                 <li><a href="">课程搜索</a></li>
  62.                 <input type="search" placeholder="输入关键字搜索" >
  63.                 </ul>
  64.                 <div class="slider">轮播图</div>
  65.                 <ul class="courses">
  66.                     <li><a href=""><img src="css/img/index_yunv.jpg" alt=""></a></li>
  67.                     <li><a href=""><img src="css/img/index_php_item2_.png" alt=""></a></li>
  68.                     <li><a href=""><img src="css/img/index_php_item3.jpg" alt=""></a></li>
  69.                     <li><a href=""><img src="css/img/index_php_new4.jpg" alt=""></a></li>
  70.                 </ul>
  71.     </div>
  73. <!--    课程列表区-->
  74. <div class="main-course">
  75.     <h3><b>&lt;/&gt;</b>php入门精品课<b>&lt;/&gt;</b></h3>
  76.     <ul class="course-list">
  77.         <li><a href=""><img src="" alt=""></a></li>
  78.         <li><a href=""><img src="" alt=""></a></li>
  79.         <li><a href=""><img src="" alt=""></a></li>
  80.         <li><a href=""><img src="" alt=""></a></li>
  81.         <li><a href=""><img src="" alt=""></a></li>
  82.         <li><a href=""><img src="" alt=""></a></li>
  83.         <li><a href=""><img src="" alt=""></a></li>
  84.         <li><a href=""><img src="" alt=""></a></li>
  85.         <li><a href=""><img src="" alt=""></a></li>
  86.         <li><a href=""><img src="" alt=""></a></li>
  87.         <li><a href=""><img src="" alt=""></a></li>
  88.         <li><a href=""><img src="" alt=""></a></li>
  89.         <li><a href=""><img src="" alt=""></a></li>
  90.         <li><a href=""><img src="" alt=""></a></li>
  91.     </ul>
  92. </div>
  93. <div class="footer">123</div>
  94. </body>
  95. </html>

效果图

  • css代码

    reset.css
  1. * {
  2.     margin:0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5.     font-size: 16px;
  7. }
  8. body {
  9.     font-size: 1.6rem;
  10.     background-color: rgb(243,245,247);
  11. }
  12. /*去点*/
  13. li {
  14.     list-style: none;
  15. }
  16. /*去下划线*/
  17. a {
  18.     text-decoration: none;
  19.     color: #444;
  20. }
  21. .icon {
  22.     width: 4em; height: 4em;
  23.     vertical-align: -0.15em;
  24.     fill: currentColor;
  25.     overflow: hidden;
  26. }

header.css

  1. .header {
  2.     height: 4rem;
  3.     display: flex;
  4.     flex-flow: row nowrap;
  5.     margin-bottom: 30px;
  6. }
  7. .header>div {
  8.     background-color: black;
  10. }
  11. .header >div:first-of-type{
  13.     flex: 2;
  14.     display: flex;
  15.     align-items: center;
  16. }
  17. .php>a{
  18.     font-size: 1.5rem;
  19. }
  20. .header>div:nth-of-type(2) {
  22.     flex: 9;
  23.     display: flex;
  24.     align-items: center;
  25. }
  26. .header>div:nth-of-type(2) a {
  27.     font-size: 0.9em;
  28. }
  29. .header>div:last-of-type {
  30.     flex: 6;
  31.     padding: 0.1rem 1rem 1rem 1rem;
  32.     text-align: right;
  34. }
  35. .header>div:last-of-type>svg {
  36.     cursor : pointer;
  37. }
  39. a {
  40.     color: #cccccc;
  41. }
  42. .header>div:nth-of-type(2)>div {
  43.     flex: 1;
  44. }

course.css

  1. .main-course h3 b{
  2.    color: rgb(30,159,255);
  3. }
  4. .main-top {
  5.    display: grid;
  6.    background-color: white;
  7.    height: 510px;
  8.    width: 1200px;
  9.    margin:auto;
  10.    border-radius: 1rem;
  11.    grid-template-columns: 216px 1fr;
  12.    grid-template-rows: 60px 1fr 120px;
  13. }
  14.    .menus {
  15.       grid-area:span 3;
  16.       background-color: #55a532;
  17.       border-radius: 1rem 0 0 1rem;
  18. }
  19.    ul.navs {
  20.       background-color: #63a35c;
  21.       display: flex;
  22.       justify-content: space-around;
  23.       padding-top: 1rem;
  24.       padding-bottom: 1rem;
  25.    }
  26.    ul.navs li a {
  27.       color: black;
  28.    }
  29.    .menus ul{
  30.       height: 100%;
  31.       display: flex;
  32.       flex-flow: column nowrap;
  33.       justify-content: space-around;
  34.       padding: 1rem;
  35.    }
  36.    .courses {
  37.       display: grid;
  38.       grid-template-columns: 1fr 1fr 1fr 1fr;
  39.       padding-top: 1rem;
  40.       padding-left: 0.5rem;
  41.    }
  42.    .courses img {
  43.       border-radius: 0.5rem;
  44.    }
  45.    .main-course {
  46.       display: grid;
  47.       width: 1200px;
  48.       height: 700px;
  49.       margin: auto;
  50.       border-radius: 0.5rem;
  51.       margin-top: 10rem;
  52.       margin-bottom: 3rem;
  53.       background-color: white;
  54.    }
  55.    .main-course h3 {
  56.       text-align: center;
  57.       margin-top: 1rem;
  58.       font-size: 1.5rem;
  59.       height: 3rem;
  60.    }
  61.    .main-course .course-list {
  62.       margin-top: -19rem;
  63.       display: grid;
  64.       grid-template-columns: repeat(5,1fr);
  65.       grid-template-rows: repeat(3,1fr);
  66.       gap: 20px;
  67.       padding: 1rem;
  68.    }
  69.    .course-list li {
  70.       background-color: #795da3;
  71.       border-radius: 1rem;
  73.    }
  74.    .course-list li:first-of-type {
  75.       grid-area: span 2;
  76.    }

footer.css

  1. .footer {
  2.     height: 10em;
  3.     background-color: #444;
  4.     color: #ccc;
  6. }
上一条：js 引入方式，常量，变量，函数的声明和使用----0331下一条：210331 JavaScript引入方式 变量与常量 函数
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议