Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Grid实战案例分享(相册和栅格布局组件)
Blogger Information
Blog 62
fans 7
comment 2
visits 58275
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Grid实战案例分享(相册和栅格布局组件)
我是郭富城
Original
587 people have browsed it

Grid实战案例分享

演示地址
我的相册：https://php520.vip/4.14/demo3.html
十二列栅格布局组件：https://php520.vip/4.14/demo1.html

1.我的相册

  • 使用grid布局，自动填充到生成的单元格中
  • auto-fill:将项目全部填充到容器中
  • auto-fit:忽略空的项目
  • 代码实例：
    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>网络相册</title>
    7.   <style>
    8.     * {
    9.       padding: 0;
    10.       margin: 0;
    11.       box-sizing: border-box;
    12.     }
    13.     a {
    14.       text-decoration: none;
    15.       color: #555;
    16.     }
    17.     a:hover {
    18.       color: coral;
    19.     }
    20.     body {
    21.       background-color: lightseagreen;
    22.     }
    23.     h1 {
    24.       color: #fff;
    25.       text-align: center;
    26.       letter-spacing: 5px;
    27.       font-weight: normal;
    28.       font-size: 2.5rem;
    29.       text-shadow: 2px 2px 2px #555;
    30.       margin-top: 20px;
    31.     }
    32.     .container {
    33.       min-width: 100vw;
    34.       min-height: 100vh;
    35.       padding: 50px;
    36.       display: grid;
    37.       /* 自动填充到生成的单元格中 */
    38.       /* auto-fill:将项目全部填充到容器中 */
    39.       /* auto-fit:忽略空的项目 */
    40.       grid-template-columns: repeat(auto-fill, 250px);
    41.       grid-template-rows: repeat(auto-fill, 280px);
    42.       justify-content: space-evenly;
    43.       align-content: space-evenly;
    44.       gap: 25px;
    45.     }
    46.     .container img {
    47.       width: 100%;
    48.       text-align: center;
    49.     }
    50.     .container > .item {
    51.       padding: 10px;
    52.       background-color: #fff;
    53.       border-radius: 10px;
    54.       display: flex;
    55.       flex-flow: column nowrap;
    56.       align-items: center;
    57.       justify-content: center;
    58.     }
    59.     .container > .item:hover {
    60.       box-shadow: 0 0 10px #555;
    61.       width: calc(100% * 1.02);
    62.       background-color: lemonchiffon;
    63.     }
    64.   </style>
    65. </head>
    66. <body>
    67.   <h1>我的相册</h1>
    68.   <div class="container">
    69.     <div class="item">
    70.       <!-- 图片 -->
    71.       <a href=""><img src="static/images/girl.jpg" alt="" /></a>
    72.       <!-- 文本 -->
    73.       <a href="">中国美女1</a>
    74.     </div>
    75.     <div class="item">
    76.       <!-- 图片 -->
    77.       <a href=""><img src="static/images/girl.jpg" alt="" /></a>
    78.       <!-- 文本 -->
    79.       <a href="">中国美女2</a>
    80.     </div>
    81.     <div class="item">
    82.       <!-- 图片 -->
    83.       <a href=""><img src="static/images/girl.jpg" alt="" /></a>
    84.       <!-- 文本 -->
    85.       <a href="">中国美女3</a>
    86.     </div>
    87.     <div class="item">
    88.       <!-- 图片 -->
    89.       <a href=""><img src="static/images/girl.jpg" alt="" /></a>
    90.       <!-- 文本 -->
    91.       <a href="">中国美女4</a>
    92.     </div>
    93.     <div class="item">
    94.       <!-- 图片 -->
    95.       <a href=""><img src="static/images/girl.jpg" alt="" /></a>
    96.       <!-- 文本 -->
    97.       <a href="">中国美女5</a>
    98.     </div>
    99.     <div class="item">
    100.       <!-- 图片 -->
    101.       <a href=""><img src="static/images/girl.jpg" alt="" /></a>
    102.       <!-- 文本 -->
    103.       <a href="">中国美女6</a>
    104.     </div>
    105.     <div class="item">
    106.       <!-- 图片 -->
    107.       <a href=""><img src="static/images/girl.jpg" alt="" /></a>
    108.       <!-- 文本 -->
    109.       <a href="">中国美女7</a>
    110.     </div>
    111.     <div class="item">
    112.       <!-- 图片 -->
    113.       <a href=""><img src="static/images/girl.jpg" alt="" /></a>
    114.       <!-- 文本 -->
    115.       <a href="">中国美女8</a>
    116.     </div>
    117.     <div class="item">
    118.       <!-- 图片 -->
    119.       <a href=""><img src="static/images/girl.jpg" alt="" /></a>
    120.       <!-- 文本 -->
    121.       <a href="">中国美女9</a>
    122.     </div>
    123.     <div class="item">
    124.       <!-- 图片 -->
    125.       <a href=""><img src="static/images/girl.jpg" alt="" /></a>
    126.       <!-- 文本 -->
    127.       <a href="">中国美女10</a>
    128.     </div>
    129.     <div class="item">
    130.       <!-- 图片 -->
    131.       <a href=""><img src="static/images/girl.jpg" alt="" /></a>
    132.       <!-- 文本 -->
    133.       <a href="">中国美女11</a>
    134.     </div>
    135.     <div class="item">
    136.       <!-- 图片 -->
    137.       <a href=""><img src="static/images/girl.jpg" alt="" /></a>
    138.       <!-- 文本 -->
    139.       <a href="">中国美女12</a>
    140.     </div>
    141.   </div>
    142. </body>
    143. </html>

2.十二列栅格布局组件

  • 直接上代码
    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="static/css/style.css" />
    7.   <title>模拟12列栅格布局</title>
    8. </head>
    9. <body>
    10.   <div class="container">
    11.     <!-- 第一步：创建一个行 -->
    12.     <div class="row">
    13.       <!-- 第二步：划分列 -->
    14.       <span class="item col-6">6</span>
    15.       <span class="item col-6">6</span>
    16.     </div>
    17.     <div class="row">
    18.       <!-- 三等分 -->
    19.       <span class="item col-4">4</span>
    20.       <span class="item col-4">4</span>
    21.       <span class="item col-4">4</span>
    22.     </div>
    23.     <!-- 三列 -->
    24.     <div class="row">
    25.       <span class="item col-2">2</span>
    26.       <span class="item col-8">8</span>
    27.       <span class="item col-2">2</span>
    28.     </div>
    29.     <div class="row">
    30.       <span class="item col-2">2</span>
    31.       <span class="item col-8">8</span>
    32.     </div>
    33.     <div class="row">
    34.       <span class="item col-1">1</span>
    35.       <span class="item col-1">2</span>
    36.       <span class="item col-1">3</span>
    37.       <span class="item col-1">4</span>
    38.       <span class="item col-1">5</span>
    39.       <span class="item col-1">6</span>
    40.       <span class="item col-1">7</span>
    41.       <span class="item col-1">8</span>
    42.       <span class="item col-1">9</span>
    43.       <span class="item col-1">10</span>
    44.       <span class="item col-1">11</span>
    45.       <span class="item col-1">12</span>
    46.     </div>
    47.   </div>
    48. </body>
    49. </html>
  • 效果图
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：直接复制课堂源码, 不太好, 还是要有点自己的创意
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post