亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 11
粉絲 0
評論 0
訪問量 12258
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
Gird網(wǎng)格布局實(shí)現(xiàn)商品列表頁--PHP培訓(xùn)十期線上班
宋明杰
原創(chuàng)
852人瀏覽過

Gird網(wǎng)格布局實(shí)現(xiàn)商品列表頁

初步接觸Grid,對他的屬性和參數(shù)很不熟練，東拉西扯，東拼西湊，總算完成了表面工作，但代碼慘不忍睹，特別是CSS部分，

對GRID容器和屬性的邊框—內(nèi)外邊距，還沒掌握怎樣設(shè)置

HTML代碼

  1. <body>
  2.     <div class="essp">
  3.         <div class="essp-bt">
  4.             <span>二手商品</span>
  5.         </div>
  6.         <div class="essp-xq">
  7.             <div class="essp-xq1">
  8.                 <a href="#">搶好貨</a>
  9.                 <span>0低價(jià)，便捷，安全，快速</span>
  10.             </div>
  11.             <div class="essp-xq2">
  12.                 <span>熱門分類</span>
  13.                 <a href="#">美女寫真</a>
  14.                 <a href="#">日本美女</a>
  15.                 <a href="#">中國美女</a>
  16.                 <a href="#">美國美女</a>
  17.                 <a href="#">AV美女</a>
  18.             </div>
  19.             <div class="essp-xq3">
  20.                 <div class="essp-xq3a">
  21.                     <div class="essp-xq3a1">
  22.                         <a href="#"><img src="img/999.jpg"></a>
  23.                         <a href="">解決實(shí)際的假發(fā)來得及反倒是浪費(fèi)絕對是是好</a>
  24.                         <div class="essp-xq3a2">
  25.                             <i>￥999</i>
  26.                             <b>美女</b>
  27.                         </div>
  28.                     </div>
  29.                     <div class="essp-xq3a1">
  30.                         <a href="#"><img src="img/999.jpg"></a>
  31.                         <a href="">解決實(shí)際的假發(fā)來得及反倒是浪費(fèi)絕對是是好</a>
  32.                         <div class="essp-xq3a2">
  33.                             <i>￥999</i>
  34.                             <b>美女</b>
  35.                         </div>
  36.                     </div>
  37.                     <div class="essp-xq3a1">
  38.                         <a href="#"><img src="img/999.jpg"></a>
  39.                         <a href="">解決實(shí)際的假發(fā)來得及反倒是浪費(fèi)絕對是是好</a>
  40.                         <div class="essp-xq3a2">
  41.                             <i>￥999</i>
  42.                             <b>美女</b>
  43.                         </div>
  44.                     </div>
  45.                     <div class="essp-xq3a1">
  46.                         <a href="#"><img src="img/999.jpg"></a>
  47.                         <a href="">解決實(shí)際的假發(fā)來得及反倒是浪費(fèi)絕對是是好</a>
  48.                         <div class="essp-xq3a2">
  49.                             <i>￥999</i>
  50.                             <b>美女</b>
  51.                         </div>
  52.                     </div>
  53.                     <div class="essp-xq3a1">
  54.                         <a href="#"><img src="img/999.jpg"></a>
  55.                         <a href="">解決實(shí)際的假發(fā)來得及反倒是浪費(fèi)絕對是是好</a>
  56.                         <div class="essp-xq3a2">
  57.                             <i>￥999</i>
  58.                             <b>美女</b>
  59.                         </div>
  60.                     </div>
  61.                     <div class="essp-xq3a1">
  62.                         <a href="#"><img src="img/999.jpg"></a>
  63.                         <a href="">解決實(shí)際的假發(fā)來得及反倒是浪費(fèi)絕對是是好</a>
  64.                         <div class="essp-xq3a2">
  65.                             <i>￥999</i>
  66.                             <b>美女</b>
  67.                         </div>
  68.                     </div>
  69.                     <div class="essp-xq3a1">
  70.                         <a href="#"><img src="img/999.jpg"></a>
  71.                         <a href="">解決實(shí)際的假發(fā)來得及反倒是浪費(fèi)絕對是是好</a>
  72.                         <div class="essp-xq3a2">
  73.                             <i>￥999</i>
  74.                             <b>美女</b>
  75.                         </div>
  76.                     </div>
  77.                     <div class="essp-xq3a1">
  78.                         <a href="#"><img src="img/999.jpg"></a>
  79.                         <a href="">解決實(shí)際的假發(fā)來得及反倒是浪費(fèi)絕對是是好</a>
  80.                         <div class="essp-xq3a2">
  81.                             <i>￥999</i>
  82.                             <b>美女</b>
  83.                         </div>
  84.                     </div>
  85.                 </div>
  86.                 <div class="essp-xq3b">
  87.                     <a href="#"><img src="img/1.png"> </a>
  88.                     <a href="#"><img src="img/2.png"> </a>
  89.                     <a href="#"><img src="img/3.png"> </a>
  90.                     <a href="#"><img src="img/4.png"> </a>
  91. <!--                    <a href="#" class="er1"><img src="img/ad1.png" class="er1"> </a>-->
  93.                     <span class="er1"><img src="img/ad1.png"></span>
  94.                     <span class="er1"><img src="img/ad2.jpg"></span>
  95. <!--                    <span>2</span>--
  96.                 </div>
  97.             </div>
  98.         </div>
  99.     </div>
  100. </body>

CSS代碼：

  1. *{
  2.     margin: 0px;
  3.     padding: 0px;
  4.     /*background: #cccccc;*/
  5.     /*font-size:13px;*/
  6.     /*color: #333333;*/
  7.     /*border: 1px solid red;*/
  9. }
  10. a{
  11.     text-decoration: none;
  12. }
  13. body{
  14.     background: #cccccc;
  15. }
  16. .essp{
  17.     width: 1200px;
  18.     margin: auto;
  19.     background: #ffffff;
  21. }
  22. .essp>.essp-bt{
  23.     padding: 20px;
  24.     text-align: center;
  25.     background: #cccccc;
  26. }
  27. .essp>.essp-bt span{
  28.     font-size: 30px;
  29.     color: #333;
  30.     border-bottom: 5px solid red;
  31. }
  32. .essp>.essp-xq>.essp-xq1{
  33.     margin: 10px 10px;
  34.     border-bottom: 1px solid #cccccc;
  35.     /*background: #ffffff;*/
  36.     /*color: #333333;*/
  37.     /*font-size: 25px;*/
  38.     display: flex;
  39.     padding: 8px;
  41. }
  42. .essp>.essp-xq>.essp-xq1>a{
  43.     font-size: 20px;
  44.     color: #333333;
  45.     font-weight: bold;
  47. }
  48. .essp>.essp-xq>.essp-xq1>span{
  49.     font-size: 13px;
  50.     color: red;
  51.     margin-left: 20px;
  52.     align-self:flex-end;
  54. }
  55. .essp>.essp-xq>.essp-xq2{
  56.     margin-bottom: 8px;
  57.     margin-left: 15px;
  58. }
  59. .essp>.essp-xq>.essp-xq2>span{
  60.     font-size: 20px;
  61.     color: red;
  62.     /*margin-bottom: 10px;*/
  63. }
  64. .essp>.essp-xq>.essp-xq2>a{
  65.     font-size: 13px;
  66.     color: #333333;
  67.     margin: 15px;
  68. }
  69. .essp>.essp-xq>.essp-xq3{
  70.     /*width: 1200px;*/
  71.     /*height: 480px;*/
  72.     display: grid;
  73.     grid-template-columns: 780px 380px;
  74.     grid-template-rows: 460px;
  75.     grid-gap:10px;
  76.     justify-content: center;
  77. }
  78. .essp>.essp-xq>.essp-xq3>.essp-xq3a{
  79.     display: grid;
  80.     grid-template-columns: repeat(4,185px);
  81.     grid-template-rows: 220px;
  82.     justify-content: center;
  83.     grid-gap: 12px;
  84.     /*justify-content: center;*/
  85.     /*align-items: center;*/
  86. }
  87. .essp>.essp-xq>.essp-xq3>.essp-xq3a>.essp-xq3a1{
  88.     display: grid;
  89.     grid-template-columns: 100%;
  90.     grid-template-rows: 60% 20% 10%;
  91.     grid-gap: 5%;
  92. }
  93. .essp>.essp-xq>.essp-xq3>.essp-xq3a>.essp-xq3a1 img,
  94. .essp>.essp-xq>.essp-xq3>.essp-xq3b img{
  95.     width: 100%;
  96.     height: 100%;
  97.     border-radius: 5px;
  98. }
  99. .essp>.essp-xq>.essp-xq3>.essp-xq3a>.essp-xq3a1 a{
  100.     color: #333333;
  101.     font-size: 13px;
  102. }
  103. .essp>.essp-xq>.essp-xq3>.essp-xq3a>.essp-xq3a1>.essp-xq3a2{
  104.     display: grid;
  105.     grid-template-columns: 50% 50%;
  106.     grid-template-rows: 100%;
  107.     /*justify-content: space-between;*/
  108. }
  109. .essp>.essp-xq>.essp-xq3>.essp-xq3a>.essp-xq3a1>.essp-xq3a2 i{
  110.     color: red;
  111.     font-size: 13px;
  112. }
  113. .essp>.essp-xq>.essp-xq3>.essp-xq3a>.essp-xq3a1>.essp-xq3a2 b{
  114.     margin-left: auto;
  115.     background: #0077aa;
  116.     color: #e9e9e9;
  117.     font-size: 13px;
  118.     border-radius: 3px;
  119. }
  120. .essp>.essp-xq>.essp-xq3>.essp-xq3b{
  121.     display: grid;
  122.     grid-template-columns: 46% 46%;
  123.     grid-template-rows: 30% 30% 15% 15%;
  124.     grid-gap: 3%;
  125.     justify-content: center;
  126.     /*grid-template-areas: '1 2'*/
  127.     /*                     '3 4'*/
  128.     /*                     '5 5'*/
  129.     /*                     '6 6';*/
  131. }
  132. .essp>.essp-xq>.essp-xq3>.essp-xq3b>.er1{
  133.     grid-column-start: span 2;
  135. }
  136. .essp>.essp-xq>.essp-xq3>.essp-xq3b>.er2{
  137.     grid-column-start: span 2;
  139. }

運(yùn)行截圖

手寫作業(yè)

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：字寫得好看的人, 學(xué)習(xí)能力肯定不會差的... 相信自己, 一定可以掌握grid
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)