search

博客列表 >grid实现网页布局，仿php中文网-web前端第12章6.28

grid实现网页布局，仿php中文网-web前端第12章6.28

希望
希望原创
2020年06月29日 17:05:33644浏览

1.grid实现网页布局

  • 如下图仿php中文网一部分：
    grid页面

  • 代码如下：

    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>flex-grid</title>
    7.   <style>
    8.     .container {
    9.       width: 1200px;
    10.       height: 650px;
    11.       margin: 10px auto;
    12.       background: #fff;
    13.       display: grid;
    14.       /* 把标题看成一行 */
    15.       grid-template-columns: repeat(5, 250px);
    16.       grid-template-rows: 80px 190px 190px 190px;
    17.     }
    19.     .container .item:first-of-type {
    20.       grid-column: span 5;
    21.       line-height: 80px;
    22.       text-align: center;
    23.       font-size: 1.5em;
    24.       font-weight: 800;
    25.       color: #4d555d;
    26.     }
    27.     /* 第一张竖向大图区域 */
    28.     .container .item:nth-child(2) {
    29.       grid-row: span 2;
    30.       margin: 0 auto;
    31.     }
    32.     .container .item:nth-child(2) img {
    33.       border-radius: 8px;
    34.     }
    36.     .container .item:nth-child(n + 3) {
    37.       margin: 0 auto;
    38.       position: relative;
    39.     }
    40.     .container .item:nth-child(n + 3) img {
    41.       width: 217px;
    42.       height: 124px;
    43.       border-radius: 8px;
    44.     }
    45.     a {
    46.       display: block;
    47.       border-radius: 8px;
    48.       padding: 15px 20px;
    49.       position: absolute;
    50.       top: 94px;
    51.       transition: top 0.5s;
    52.       height: 90px;
    53.       width: 100%;
    54.       background: #fff;
    55.       color: #555;
    56.     }
    57.     .container .item:nth-child(n + 3) a:hover {
    58.       color: #333;
    59.       top: 50px;
    60.     }
    61.     .container .item:nth-child(n + 3) span {
    62.       position: absolute;
    63.       top: 130px;
    64.       left: 0;
    65.       width: 217px;
    66.       height: 40px;
    67.       padding: 0 20px;
    68.       line-height: 40px;
    69.       background: #fff;
    70.       color: #93999f;
    71.       font-size: 12px;
    72.       border-bottom-left-radius: 8px;
    73.       border-bottom-right-radius: 8px;
    74.       box-shadow: 0 4px 8px 0 rgba(67, 91, 116, 0.1);
    75.     }
    76.     .container .item i {
    77.       font-size: 0.5em;
    78.       margin-right: 5px;
    79.       padding: 2px;
    80.       color: grey;
    81.       background-color: rgba(204, 202, 202, 0.239);
    82.     }
    83.   </style>
    84. </head>
    85. <body>
    86.   <div class="container">
    87.     <div class="item">php入门精品课程</div>
    88.     <!-- 第一张竖大图 -->
    89.     <div class="item"><img src="./images/1.jpg" alt="" /></div>
    91.     <div class="item">
    92.       <img src="./images/2.png" alt="" />
    93.       <a href=""><i>初级</i>编程学习方法分享直播公益课</a>
    94.       <span>1W+次播放</span>
    95.     </div>
    96.     <div class="item">
    97.       <img src="./images/2.png" alt="" />
    98.       <a href=""><i>初级</i>编程学习方法分享直播公益课</a>
    99.       <span>1W+次播放</span>
    100.     </div>
    101.     <div class="item">
    102.       <img src="./images/2.png" alt="" />
    103.       <a href=""><i>初级</i>编程学习方法分享直播公益课</a>
    104.       <span>1W+次播放</span>
    105.     </div>
    106.     <div class="item">
    107.       <img src="./images/2.png" alt="" />
    108.       <a href=""><i>初级</i>编程学习方法分享直播公益课</a>
    109.       <span>1W+次播放</span>
    110.     </div>
    111.     <div class="item">
    112.       <img src="./images/2.png" alt="" />
    113.       <a href=""><i>初级</i>编程学习方法分享直播公益课</a>
    114.       <span>1W+次播放</span>
    115.     </div>
    116.     <div class="item">
    117.       <img src="./images/2.png" alt="" />
    118.       <a href=""><i>初级</i>编程学习方法分享直播公益课</a>
    119.       <span>1W+次播放</span>
    120.     </div>
    121.     <div class="item">
    122.       <img src="./images/2.png" alt="" />
    123.       <a href=""><i>初级</i>编程学习方法分享直播公益课</a>
    124.       <span>1W+次播放</span>
    125.     </div>
    126.     <div class="item">
    127.       <img src="./images/2.png" alt="" />
    128.       <a href=""><i>初级</i>编程学习方法分享直播公益课</a>
    129.       <span>1W+次播放</span>
    130.     </div>
    131.     <div class="item">
    132.       <img src="./images/2.png" alt="" />
    133.       <a href=""><i>初级</i>编程学习方法分享直播公益课</a>
    134.       <span>1W+次播放</span>
    135.     </div>
    136.     <div class="item">
    137.       <img src="./images/2.png" alt="" />
    138.       <a href=""><i>初级</i>编程学习方法分享直播公益课</a>
    139.       <span>1W+次播放</span>
    140.     </div>
    141.     <div class="item">
    142.       <img src="./images/2.png" alt="" />
    143.       <a href=""><i>初级</i>编程学习方法分享直播公益课</a>
    144.       <span>1W+次播放</span>
    145.     </div>
    146.     <div class="item">
    147.       <img src="./images/2.png" alt="" />
    148.       <a href=""><i>初级</i>编程学习方法分享直播公益课</a>
    149.       <span>1W+次播放</span>
    150.     </div>
    151.     <div class="item">
    152.       <img src="./images/2.png" alt="" />
    153.       <a href=""><i>初级</i>编程学习方法分享直播公益课</a>
    154.       <span>1W+次播放</span>
    155.     </div>
    156.     </div>
    157.   </div>
    158. </body>
    159. </html>

    2.总结

  1. grid: 容器>单元格>项目,项目必须在单元格里
  2. 还能选择网格区域
  3. 就像一个表格，分为行与列，能够进行项目填充
上一条：Grid布局php中文网九宫格用法下一条：grid网格布局仿制php中文网课程网页
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多