search

博客列表 >Grid还原首页图片布局

Grid还原首页图片布局

零龙
零龙原创
2020年07月04日 21:22:36597浏览

Grid还原首页图片布局

  • 效果展示：

HTML代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <link rel="stylesheet" href="font/iconfont.css">
  7.     <title>Grid还原首页图片布局</title>
  8. </head>
  9. <body>
  10.     <div class="container">
  11.         <div class="item"><i class="iconfont icon-ai-code"> </i>php入门精品课程 <i class="iconfont icon-ai-code"> </i></div>
  12.         <div class="item"><img src="https://www.php.cn/static/images/index_learn_first.jpg"></div>
  13.         <div class="item"><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
  14.         <div class="box"><i>最新</i> 编程学习方法分享直播公益课</div>
  15.         <div class="box-1">1W+次播放</div>
  16.         </div>
  17.         <div class="item"><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt="">
  18.         <div class="box"><i>最新</i> 编程学习方法分享直播公益课</div>
  19.         <div class="box-1">1W+次播放</div>
  20.         </div>
  21.            <div class="item"><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt="">
  22.         <div class="box"><i>最新</i> 编程学习方法分享直播公益课</div>
  23.         <div class="box-1">1W+次播放</div>
  24.         </div>
  25.            <div class="item"><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt="">
  26.         <div class="box"><i>最新</i> 编程学习方法分享直播公益课</div>
  27.         <div class="box-1">1W+次播放</div>
  28.         </div>
  29.            <div class="item"><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt="">
  30.         <div class="box"><i>最新</i> 编程学习方法分享直播公益课</div>
  31.         <div class="box-1">1W+次播放</div>
  32.         </div>
  33.            <div class="item"><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt="">
  34.         <div class="box"><i>最新</i> 编程学习方法分享直播公益课</div>
  35.         <div class="box-1">1W+次播放</div>
  36.         </div>
  37.            <div class="item"><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt="">
  38.         <div class="box"><i>最新</i> 编程学习方法分享直播公益课</div>
  39.         <div class="box-1">1W+次播放</div>
  40.         </div>
  41.            <div class="item"><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt="">
  42.         <div class="box"><i>最新</i> 编程学习方法分享直播公益课</div>
  43.         <div class="box-1">1W+次播放</div>
  44.         </div>
  45.            <div class="item"><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt="">
  46.         <div class="box"><i>最新</i> 编程学习方法分享直播公益课</div>
  47.         <div class="box-1">1W+次播放</div>
  48.         </div>
  49.            <div class="item"><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt="">
  50.         <div class="box"><i>最新</i> 编程学习方法分享直播公益课</div>
  51.         <div class="box-1">1W+次播放</div>
  52.         </div>
  53.            <div class="item"><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt="">
  54.         <div class="box"><i>最新</i> 编程学习方法分享直播公益课</div>
  55.         <div class="box-1">1W+次播放</div>
  56.         </div>
  57.            <div class="item"><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt="">
  58.         <div class="box"><i>最新</i> 编程学习方法分享直播公益课</div>
  59.         <div class="box-1">1W+次播放</div>
  60.         </div>
  61.            <div class="item"><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt="">
  62.         <div class="box"><i>最新</i> 编程学习方法分享直播公益课</div>
  63.         <div class="box-1">1W+次播放</div>
  64.         </div>
  66.     </div>
  67. </body>
  68. </html>

CSS代码：

  1. <style>
  2.     *{margin: 0 auto;
  3.     padding: 0;
  4.     box-sizing: border-box;   
  5.     font-family: Arial, Helvetica, sans-serif;   
  6.     }
  8.     .container{
  9.         width: 1200px;
  10.         height: 650px;
  11.         box-shadow: 0 0 10px rgba(0, 0, 0, 0.150);
  12.         border-radius: 10px;
  13.         margin-top: 20px;
  14.         display: grid;
  15.         grid-template-columns: repeat(5,215px);
  16.         grid-template-rows: 60px 170px 170px 170px;
  17.         justify-content: center;
  18.         gap:20px;
  20.     }
  21.     .container > .item:first-of-type{  
  22.         grid-column: span 5;
  23.         line-height: 80px;
  24.         font-size: 20px;       
  25.         font-weight: bold;
  27.     }
  28.     .container > .item:first-of-type > i{
  29.         line-height: 80px;
  30.         font-size: 18px;
  31.         color: #98a7ff;
  32.         font-style: normal;
  33.     }
  34.     .container > .item:nth-child(2)
  35.     {
  36.         grid-row: span 2;
  37.     }
  38.     .container > .item:nth-child(2) img{
  39.          box-shadow: 0 0 10px rgba(0, 0, 0, 0.180);
  40.         border-radius: 10px;
  41.         width: 215px;
  42.         height: 355px;
  44.     }
  45.     .container > .item:nth-child(n+3){
  46.        position: relative;   
  47.        box-shadow: 0 0 10px rgba(0, 0, 0, 0.180);
  48.        border-radius: 10px;
  49.     }
  50.     .container > .item:nth-child(n+3) img{
  51.          width: 215px;
  52.          height: 110px;
  54.     }
  55.     .container > .item:nth-child(n+3) .box{
  56.          width: 215px;
  57.          height:90px;                  
  58.          border-radius: 10px;
  59.          background: rgb(255, 255, 255);
  60.          position: absolute;
  61.          top:80px;
  62.          border-radius:10px;
  63.          padding-top: 10px;
  64.          padding-left: 15px;
  65.          padding-right: 15px;
  66.          font-size: 14px;       
  67.          display:block;
  68.          transition: top 0.2s;
  72.     }
  73.     .container > .item:nth-child(n+3) .box > i{
  74.          font-style: normal;
  75.          font-size: 12px;
  76.          padding: 1px;
  77.          background: #999;
  78.          color:white;
  79.          vertical-align:text-top;
  81.     } 
  82.      .container > .item:nth-child(n+3) .box:hover{
  83.          position: absolute;
  84.          top:25px;
  85.          background: rgb(255, 255, 255);
  87.          }
  88.     .container > .item:nth-child(n+3)  .box-1{
  89.          width: 215px;
  90.          background: rgb(255, 255, 255); 
  91.          height: 60px;
  92.          position: absolute;
  93.          top:110px;
  94.           border-radius:10px;
  95.           padding-left: 15px;         
  96.           font-size: 12px;
  97.           line-height: 50px;
  98.           color:#999;
  101.     }
  102. </style>

  • 课后总结

    • 在此次编写过程中采用了4行5列布局，头部的第一行设置了行高60px，进行了5列合并，文本居中，使用了阿里图标在文本左右。使用代码：
  1.   display: grid;                               /*使用Grid布局          */
  2.   grid-template-columns: repeat(5,215px);      /*设置5列宽度215px      */
  3.   grid-template-rows: 60px 170px 170px 170px;  /*设置4行对每个行高赋值  */
  4.   justify-content: center;                     /*对grid布局水平垂直居中 */
  5.   gap:20px;                                    /*间距设置为20px        */
  6.   grid-column: span 5;                         /*5列合并              */
  • 由于网页图片需要2个格子，所有第二个格子使用了2行合并。
  1.     container > .item:nth-child(2)
  2.     {
  3.         grid-row: span 2;
  4.     }
  • 其它格子样式一致，将1,2格分离出就能共用样式，本实例重点。
  1.   .container > .item:nth-child(n+3)
  • 使用两个DIV元素对鼠标移动和文本进行编写box样式和box-1样式。重点在父级container中使用position: relative; 定位。在box中使用position: absolute; 确保鼠标移动效果不溢出。
  1.  transition: top 0.2s;  /* 移动盒子动画 */
  • 个人觉得grid相对flex在多列且样式相同的布局中要方便的多。以后会多使用来加深印象
上一条：初识php变量下一条：15+ （编程基础）PHP环境搭建与变量的基本操作（20200701）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多