search

博客列表 >1228-Grid重写

1228-Grid重写


原创
2020年01月01日 21:41:47460浏览

HTML

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <link rel="stylesheet" href="Gird-ZY.css">
  8.     <title>Grid</title>
  9. </head>
  10. <body>
  11.     <div class="public-headline">
  12.         <span>素材交易</span>
  13.     </div>
  15.     <!-- 标题组件 -->
  16.     <div class="public-headline-demo">
  17.         <!-- 标题 -->
  18.         <div class="title1">
  19.             <a href="">图库</a>
  20.             <span>便宜 方便 安全</span>
  21.         </div>
  22.         <div class="title2">
  23.             <span>热门图库</span>
  24.             <a href="">明星</a>
  25.             <a href="">动图</a>
  26.             <a href="">搞笑</a>
  27.             <a href="">表情包</a>
  28.             <a href="">风景</a>
  29.             <a href="">插画</a>
  30.             <a href="">手绘</a>
  31.             <a href="">名画</a>
  32.         </div>
  33.         <div class="pic">
  34.             <!-- 左侧 -->
  35.             <div class="pic-list">
  36.                 <!-- 图片预览 -->
  37.                 <div class="intro">
  38.                     <a href=""><img src="../static/images/11.jpg" alt="" width="180px" height="150px"></a>
  39.                     <a href="">明星</a>
  40.                     <div>
  41.                         <span>&yen;998</span>
  42.                         <span>明星</span>
  43.                     </div>
  44.                 </div>
  45.                 <div class="intro">
  46.                     <a href=""><img src="../static/images/11.jpg" alt="" width="180px" height="150px"></a>
  47.                     <a href="">动图</a>
  48.                     <div>
  49.                         <span>&yen;998</span>
  50.                         <span>动图</span>
  51.                     </div>
  52.                 </div>
  53.                 <div class="intro">
  54.                     <a href=""><img src="../static/images/11.jpg" alt="" width="180px" height="150px"></a>
  55.                     <a href="">搞笑</a>
  56.                     <div>
  57.                         <span>&yen;998</span>
  58.                         <span>搞笑</span>
  59.                     </div>
  60.                 </div>
  61.                 <div class="intro">
  62.                     <a href=""><img src="../static/images/11.jpg" alt="" width="180px" height="150px"></a>
  63.                     <a href="">表情包</a>
  64.                     <div>
  65.                         <span>&yen;998</span>
  66.                         <span>表情包</span>
  67.                     </div>
  68.                 </div>
  69.                 <div class="intro">
  70.                     <a href=""><img src="../static/images/11.jpg" alt="" width="180px" height="150px"></a>
  71.                     <a href="">风景</a>
  72.                     <div>
  73.                         <span>&yen;998</span>
  74.                         <span>风景</span>
  75.                     </div>
  76.                 </div>
  77.                 <div class="intro">
  78.                     <a href=""><img src="../static/images/11.jpg" alt="" width="180px" height="150px"></a>
  79.                     <a href="">插画</a>
  80.                     <div>
  81.                         <span>&yen;998</span>
  82.                         <span>插画</span>
  83.                     </div>
  84.                 </div>
  85.                 <div class="intro">
  86.                     <a href=""><img src="../static/images/11.jpg" alt="" width="180px" height="150px"></a>
  87.                     <a href="">手绘</a>
  88.                     <div>
  89.                         <span>&yen;998</span>
  90.                         <span>手绘</span>
  91.                     </div>
  92.                 </div>
  93.                 <div class="intro">
  94.                     <a href=""><img src="../static/images/11.jpg" alt="" width="180px" height="150px"></a>
  95.                     <a href="">名画</a>
  96.                     <div>
  97.                         <span>&yen;998</span>
  98.                         <span>名画</span>
  99.                     </div>
  100.                 </div>
  102.             </div>
  103.             <!-- 右侧 -->
  104.             <div class="ad-list">
  105.                 <a href=""><img src="../static/images/ad/1.png" alt=""></a>
  106.                 <a href=""><img src="../static/images/ad/2.png" alt=""></a>
  107.                 <a href=""><img src="../static/images/ad/3.png" alt=""></a>
  108.                 <a href=""><img src="../static/images/ad/4.png" alt=""></a>
  109.                 <div>
  110.                     <a href=""><img src="../static/images/ad/image.png" alt=""></a>
  111.                     <a href=""><img src="../static/images/ad/ad2.jpg" alt=""></a>
  112.                 </div>
  113.             </div>
  114.         </div>
  115.     </div>
  116. </body>
  117. </html>

CSS

  1. /* 通用样式 */
  2. *{
  3.     margin: 0;
  4.     padding: 0;
  5.     /* outline: 1px dashed red; */
  6. }
  7. body{
  8.     font-size: 13px;
  9.     color: cdcdcd;
  10.     background-color: efefef;
  11. }
  12. a{
  13.     color: #404040;
  15.     text-decoration: none;
  16.     font-size: 13px;
  17. }
  18. li{
  19.     list-style: none;
  20. }
  22. .public-headline{
  23.     padding: 30px;
  24.     text-align: center;
  25. }
  26. .public-headline span{
  27.     font-size: 30px;
  28.     font-weight: bolder;
  29.     padding-bottom: 7px;
  30.     border-bottom: 2px solid rebeccapurple;
  31. }
  32. /* 大标题 */
  33. .public-headline-demo{
  34.     width: 1200px;
  35.     padding: 10px;
  36.     box-sizing: border-box;
  37.     margin: auto;
  38.     border-radius: 5px;
  39.     border-color: #fff;
  40. }
  42. .public-headline-demo:hover{
  43.     box-shadow: 0 0 5px #888;
  44. }
  46. /* 图库 */
  47. .public-headline-demo > .title1{
  48.     height: 50px;
  49.     border-bottom: 1px solid #ccc;
  50.     box-sizing: border-box;
  51. }
  53. .public-headline-demo > .title1 >a{
  54.     font-size: 23px;
  55.     margin-right: 20px;
  56. }
  58. .public-headline-demo>.title1>span{
  59.     color: red;
  60. }
  62. /* 热门图库 */
  63. .public-headline-demo > .title2{
  64.     height: 55px;
  65.     border-bottom: 1px solid #cdcdcd;
  66.     line-height: 55px;
  67. }
  69. .public-headline-demo>.title2>span{
  70.     color: red;
  71.     font-size: 23px;
  72. }
  73. .public-headline-demo>.title2>span ~a{
  74.     padding-left: 20px;
  75. }
  76. .public-headline-demo>.title2>span ~a:hover{
  77.     color: royalblue;
  78. }
  80. /* 图片展示区 */
  81. .public-headline-demo>.pic{
  82.     height: 440px;
  83.     display: grid;
  84.     grid-template-columns: 2fr 1fr;
  85.     /* grid-column-gap: 5px; */
  86. }
  88. .public-headline-demo>.pic>.pic-list{
  89.     display: grid;
  90.     grid-template-columns: repeat(4,1fr);
  91.     grid-template-rows: repeat(2,1fr);
  92. }
  93. .public-headline-demo>.pic>.pic-list>.intro span:first-of-type{
  94.     color: red;
  95. }
  96. .public-headline-demo>.pic>.pic-list>.intro >div{
  97.     display: grid; 
  98.     grid-template-columns: 1fr 1fr;
  99.     /* grid-column-gap: 20px; */
  101. }
  102. .public-headline-demo>.pic>.pic-list>.intro span:last-of-type{
  103.     color: white;
  104.     background-color: #55ce9f;
  105.     margin-left: auto;
  106. }
  107. /* 广告 */
  108. .public-headline-demo > .pic > .ad-list {
  109.     display: grid;
  110.     grid-template-columns: 210px 210px;
  111.     grid-template-rows: 150px 150px;
  112. }
  113. .public-headline-demo > .pic > .ad-list img {
  114.     width: 190px;
  115.     height: 130px;
  116. }
  117. .public-headline-demo > .pic > .ad-list > div img {
  118.     width: 393px;
  119.     height: 60px;
  120. }

效果图

手写属性

总结

Grid会比flex更加简洁方便，有助于精简代码，更灵活的布局

上一条：1225_jquery异步请求 第40课下一条：1224_jquery节点查找、事件绑定、动画 第39课
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多