简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)
Home > List of blog posts > 8月9日作业grid布局
Blogger Information
Blog 5
fans 0
comment 1
visits 2733
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
8月9日作业grid布局
收银系统数据化的博客
Original
566 people have browsed it

grid布局要点

  1. 通过grid-template-columns和grid-template-rows设置布局的列数和行业
  2. 单位fr设置比例,也可以用和px混用但总大小要先减掉px后才能算比例.也可以使用百分号和auto
  3. 使用重复函数repeat可方便的设置多列
  4. 使用auto-fill可以实现自动填充,能达到媒体查询效果

    12列栅格布局

    该种布局方式其实是把一个页面划分成12列,然后通过合并使每行显示不同的列数来实现布局的

    使用做好的12列栅格布局的CSS做一个网页

    CSS代码
    ```CSS
  • {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    }
    body {
    / 整个页面设置成flex布局,并居中,这样整体效果好看些 /
    / display: flex;
    justify-content: center;
    align-items: center;
    min-width: 100vw;
    min-height: 100vh;     /
    }

.container {
/ 最外面的大容器设置成grid布局指定最小宽度 /
display: grid;
/ 设置gap网格间距 /
gap: 5px;
min-width: 1000px;
}
.container > .row {
/ 每行都设置成grid布局并设置成12份 /
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 5px;
min-height: 50px;
}
.row > .item {
/ 设置一下每一个项目的外观方便看出来 /
background-color: lightgreen;
padding: 10px;
border: 1px solid red;
border-radius: 8px;
}
/ 以下代码设置每列的合并情况，这里为了方便使用设置了十二种情况 /
.col6 {
grid-column: span 6;
}
.col4 {
grid-column: span 4;
}
.col3 {
grid-column: span 3;
}
.col2 {
grid-column: span 2;
}
.col1 {
grid-column: span 1;
}
.col7 {
grid-column-end: span 7;
}
.col8 {
grid-column: span 8;
}
.col9 {
grid-column: span 9;
}
.col10 {
grid-column: span 10;
}
.col11 {
grid-column: span 11;
}
.col12 {
grid-column: span 12;
}

  2. ------------
  4. html代码
  5. ```html
  6. <!DOCTYPE html>
  7. <html lang="en">
  8.   <head>
  9.     <meta charset="UTF-8" />
  10.     <meta name="viewport" content="width=q, initial-scale=1.0" />
  11.     <title>作业12列栅格布局做一个企业页面框架</title>
  12.     <style>
  13.       @import url(grid_12.css);
  14.       .container > :nth-last-child(2) {
  15.         min-height: 80vh;
  16.       }
  17.       .item {
  18.         text-align: center;
  19.       }
  20.     </style>
  21.   </head>
  22.   <body>
  23.     <div class="container">
  24.       <div class="row">
  25.         <div class="item col12 header">导航区</div>
  26.       </div>
  27.       <div class="row">
  28.         <div class="item col2 left">左侧区</div>
  29.         <div class="item col8 main">主内容区</div>
  30.         <div class="item col2 right">右侧区</div>
  31.       </div>
  32.       <div class="row">
  33.         <div class="item col12 footer">页脚区</div>
  34.       </div>
  35.     </div>
  36.   </body>
  37. </html>

预览效果

产品相册实例(grid布局综合应用)

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  6. a {
  7.   /* 去掉链接文本的下划线 */
  8.   text-decoration: none;
  9.   /* 修改颜色 */
  10.   color: #555;
  11.   /* 设置阴影效果 */
  12.   text-shadow: 2px 2px 10x #555;
  13.   /* 设置对齐方式 */
  14.   align-content: center;
  15. }
  17. h1 {
  18.   /* 取消标题 文本加粗 */
  19.   font-weight: normal;
  20.   color: white;
  21.   text-align: center;
  22.   /* 外边距20 */
  23.   margin-top: 20px;
  24. }
  25. body {
  26.   /* 整个body颜色改成lightseagreen */
  27.   background-color: lightseagreen;
  28. }
  30. .container {
  31.   /* 最大容器使用网格布局 */
  32.   display: grid;
  33.   /* 重点: 这里通过auto-fill自动填充实现媒体查询效果,后面的250  200px表示的是大小值 */
  34.   grid-template-columns: repeat(auto-fill, 250px);
  35.   grid-template-rows: repeat(auto-fill, 200px);
  36.   place-content: space-evenly;
  37.   /* 最小宽度和高度设置成100个视口高度 */
  38.   min-width: 100vw;
  39.   min-height: 100vh;
  40.   /* padding: 50px; */
  41.   /* 网络间距调整成30比较合适 */
  42.   gap: 30px;
  43. }
  44. img {
  45.   /* 此处的图片大小是指定的,因为产品原始图片大小不同,不固定下来显示不正常 */
  46.   width: 230px;
  47.   height: 180px;
  48.   /* text-align: center; */
  49. }
  50. .container > .item {
  51.   /* 网络项目中的内容使用flex布局做精细调整 */
  52.   display: flex;
  53.   /* flex布局流使用列的方式  不换行 */
  54.   flex-flow: column nowrap;
  55.   /* 项目加圆角 */
  56.   border-radius: 10px;
  57.   padding: 10px;
  58.   background-color: #eee;
  59.   /* 设置交叉轴和主轴对齐 */
  60.   align-items: center;
  61.   justify-self: center;
  62. }
  63. .item :last-child {
  64.   /* 这里单独设置了一下文字描述的内边距因为不设置字会压到图片内容 */
  65.   font-size: 20px;
  66.   color: #000;
  67.   padding: 10px;
  68. }
  69. .container > .item:hover {
  70.   box-shadow: 2px 2px 2px #555;
  71.   /* 设置鼠标经过交果，以下通过calc函数改变了宽度和高度 */
  72.   width: calc(100% * 1.04);
  73.   height: calc(100% * 1.04);
  74.   background-color: lightcyan;
  75. }

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.     <title>产品图册实例</title>
  7.     <!-- <link rel="stylesheet" href="//m.sbmmt.com/rt_css/style.css" /> -->
  8.     <style>
  9.       @import url(/rt_css/style.css);
  10.     </style>
  11.   </head>
  12.   <body>
  13.     <h1>产品图册</h1>
  14.     <div class="container">
  15.       <div class="item">
  16.         <a href=""><img src="\网络相册素材\K1.jpg" alt="" /> </a
  17.         ><a href="">商泰收款机</a>
  18.       </div>
  19.       <div class="item">
  20.         <a href=""><img src="\网络相册素材\K2.jpg" alt="" /></a
  21.         ><a href="">海信收款机</a>
  22.       </div>
  23.       <div class="item">
  24.         <a href=""><img src="\网络相册素材\K3.jpg" alt="" /></a
  25.         ><a href="">唯拓收款机</a>
  26.       </div>
  27.       <div class="item">
  28.         <a href=""><img src="\网络相册素材\K4.jpg" alt="" /></a
  29.         ><a href="">中崎</a>
  30.       </div>
  31.       <div class="item">
  32.         <a href=""><img src="\网络相册素材\K5.jpg" alt="" /></a
  33.         ><a href="">商宜</a>
  34.       </div>
  35.       <div class="item">
  36.         <a href=""><img src="\网络相册素材\K6.jpg" alt="" /></a
  37.         ><a href="">生意通</a>
  38.       </div>
  39.       <div class="item">
  40.         <a href=""><img src="\网络相册素材\K7.png" alt="" /></a
  41.         ><a href="">赢通</a>
  42.       </div>
  43.     </div>
  44.   </body>
  45. </html>

运行效果

小问题:使上用述代码做出的案便,当浏览器缩小为图片只能显示一列时,后面的图片和文字有变化,不知道代码是不是有问题,其它情况下代码工作都正常.请老师或同学指出一下,谢谢!!

变为一列时运行效果如下图:

Correction status：Uncorrected

Teacher's comments：
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 [email protected] Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！

  • Back top