ASCII码 ASCII码

grid网格布局最新课程部分

发布于：2022-03-27 11:03:18  栏目：技术文档

最新课程单元

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.      }

实例效果图

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行