search

博客列表 >网格布局实现课程信息

网格布局实现课程信息

xsrsblog
xsrsblog原创
2020年06月29日 22:18:31596浏览

效果：

源码：

  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.     <title>Document</title>
  7.     <style>
  8.       * {
  9.         /* padding: 0;
  10.         margin: 0; */
  11.         text-decoration: none;
  12.       }
  14.       /* 外层容器设置宽高、开启相对定位，
  15.       作为动态盒子的定位点 */
  16.       .container {
  17.         width: 150px;
  18.         height: 140px;
  19.         position: relative;
  20.         border-radius: 5px;
  21.       }
  22.       /* 动态盒子开启绝对定位，并把bottom值设置为0，
  23.       调整盒子增长方向为由下往上 */
  24.       .inner1 {
  25.         font-size: 13px;
  26.         height: 60px;
  27.         transition: height 1s;
  28.         /* border: 1px solid red; */
  29.         position: absolute;
  30.         bottom: 0px;
  31.         color: gray;
  32.         background-color: rgb(226, 226, 217);
  33.         border-radius: 5px;
  34.       }
  35.       /* 开启定位，防止被inner1覆盖 */
  36.       .inner2 {
  37.         width: 100%;
  38.         text-align: center;
  39.         position: absolute;
  40.         bottom: 0;
  41.         /* border: 1px solid blue; */
  42.         color: gray;
  43.       }
  44.       /* 伪类，盒子变高 */
  45.       .container:hover .inner1 {
  46.         height: 100px;
  48.         /* background-color: lightblue; */
  49.       }
  50. /* 网格布局，5列3行 */
  51.       .gridBox {
  52.         display: grid;
  53.         grid-template-columns: repeat(5, 1fr);
  54.         grid-template-rows: repeat(3, 1fr);
  55.         width: 850px;
  56.         height: 450px;
  57.         /* border: 1px solid red; */
  58.       }
  59.       /* 区域设置 */
  60.       .item1 {
  61.         grid-column: 1/2;
  62.         grid-row: 1/3;
  63.         /* background-color: red; */
  64.       }
  65.       .item {
  66.         margin: auto;
  67.       }
  68.     </style>
  69.   </head>
  70.   <body>
  71.     <div class="gridBox">
  72.       <div class="item item1">
  73.         <a href=""><img src="黑莲花.jpg" alt="" style="width: 150px;" /></a>
  74.       </div>
  75.       <div class="item">
  76.         <div class="container">
  77.           <a href="#">
  78.             <img
  79.               src="黑莲花.jpg"
  80.               alt=""
  81.               style="width: 150px; display: inline-block;"
  82.             />
  83.             <div class="inner1">
  84.               <i>初级</i>&nbsp;&nbsp;<span>MYSQL面向对象极速入门</span>
  85.               <br />
  86.               <br />
  87.             </div>
  88.             <div class="inner2">
  89.               <span>20W+次播放</span>
  90.             </div>
  91.           </a>
  92.         </div>
  93.       </div>
  94. <!-- 重复12次<div class="item">...</div> -->
  95.     </div>
  96.   </body>
  97. </html>
上一条：grid布局实现php中文网课程栏目目录(几乎100%还原了)下一条：PHP大牛成长之路：Flex布局仿PHP中文网
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多