Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid网格布局最新课程部分
Blogger Information
Blog 29
fans 0
comment 0
visits 19533
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
728 people have browsed it

最新课程单元

HTML部分

  1.    <body>
  2.     <h2>最新课程</h2>
  3.     <div class="conteiner">
  4.         <div><img src="img/623d6ce036b81626.jpg"/>
  5.         <i>初级</i> JavaScript基础语法【dom|bom|es6新语法|jQuery
  6.         <p ><img class="sc" src="img/收藏(1).png"/>收藏</p></div>
  8.         <div><img src="img/62398b673ecc4667.jpg" >
  9.         <i>初级</i> 前端最全HTTP基础原理及应用<br>
  10.         <p ><img class="sc"src="img/收藏(1).png"/>收藏</p>
  11.         </div>
  12.         <div><img src="img/62398b5dadc79937.jpg" >
  13.         <i>初级</i>HTTP协议<br><br>
  14.         <p ><img class="sc" src="img/收藏(1).png"/>收藏</p>
  15.         </div>
  16.         <div><img src="img/62381b3e817d4409.jpg" >
  17.         <i>初级</i>接口开发规范【服务器端标准的接口Restful API开发全过程】
  18.         <p ><img class="sc" src="img/收藏(1).png"/>收藏</p>
  19.         </div>
  20.         <div ><img src="img/623057031def7707.jpg" >
  21.         <i>初级</i>MySQL查询优化方案【大厂架构师亲授】
  22.         <p ><img class="sc" src="img/收藏(1).png"/>收藏</p>
  23.         </div>
  24.         <div><img src="img/622efba5b8f59620.jpg" >
  25.         <i>初级</i>Web前端Promise教程从入门到精通
  26.         <p ><img class="sc" src="img/收藏(1).png"/>收藏</p>
  27.         </div> 
  28.         <div><img src="img/622ee24c8180c270.jpg" >
  29.         <i>初级</i>Bootstrap框架讲解<br><br>
  30.         <p ><img class="sc" src="img/收藏(1).png"/>收藏</p>
  31.         </div>
  32.         <div><img src="img/6226fe0150292919.jpg" >
  33.         <i>初级</i>【小白入门 通俗易懂】一周学会Linux
  34.         <p ><img class="sc" src="img/收藏(1).png"/>收藏</p>
  35.         </div>
  36.         <div><img src="img/6225aaf1beb5a942.jpg" >
  37.         <i>初级</i>仿美团APP实战开发【前端程序员必备的JavaScript项目实战】
  38.         <p ><img class="sc" src="img/收藏(1).png"/>收藏</p>
  39.         </div>
  40.         <div><img src="img/6226d78b754aa110.png" >
  41.         <i>初级</i>公益直播：PHP入门到实战--实现邮箱验证（队列发送邮件）
  42.         <p ><img class="sc" src="img/收藏(1).png"/>收藏</p>
  43.         </div>
  44.     </div>
  46.         </body>

css部分

` *{
margin: 0px;
padding: 0px;
box-sizing: border-box;

  1.      }
  3.      body{
  4.     font-size: 14px;
  5.     font-family: "微软雅黑";
  6.     background-color: #e0e2e3;
  7.      }
  8.      h2{
  9.     margin-left: 176px;
  10.     margin-top: 150px;
  11.     margin-bottom: -50px;
  12.     }
  13.       .conteiner{
  14.     /* 网格容器 */
  15.     display: grid;
  16.     /* 2行5列 */
  17.     grid-template-columns:repeat(5,14.375rem);
  18.     grid-template-rows: repeat(2,14.9375rem);
  19.     margin-left: 170px;
  20.     margin-top: 100px;
  21.     /* 网格行列边距 */
  22.     grid-row-gap: 20px;
  23.     grid-column-gap: 28px;
  24.     }
  25.       .conteiner .sc{
  26.     /* 收藏图片宽高 */
  27.     width: 15px;
  28.     height:15px;
  29.     margin-left: 160px;
  30.     margin-right: 10px;
  31.     margin-top: 30px;
  32.     color:#bababa
  34.      }
  35.      .conteiner p{
  36.     color: #93999f;
  38.      }
  39.      .conteiner div{
  40.     /* 网格内背景颜色 */
  41.     background-color:#ffffff;
  42.     /* 网格圆角 */
  43.     border-radius: 10px;
  44.      }
  45.      .conteiner img{
  46.     width:14.375rem;
  47.     height:8.4385rem;
  48.     /* 网格内图片圆角 */
  49.     border-radius: 10px 10px 0px 0px;
  50.      }
  51.      .conteiner i{
  52.         display: block;
  53.         float: left;
  54.         width: 28px;
  55.         height: 16px;
  56.         background: #93999f;
  57.         line-height: 16px;
  58.         overflow: hidden;
  59.         text-align: center;
  60.         font-style: normal;
  61.         font-size: 11px;
  62.         color: #ffffff;
  63.         margin-right: 10px;
  64.         margin-left: 20px;
  65.         margin-top: 3px;
  66.      }

实例效果图

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