Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1228-Grid重写
Blogger Information
Blog 13
fans 0
comment 0
visits 10281
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
1228-Grid重写
Original
455 people have browsed it

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更加简洁方便，有助于精简代码，更灵活的布局

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：是的, grid是处理一些大的二维页面时, 能力更强大
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