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

搜索
博主信息
博文 22
粉絲 1
評論 1
訪問量 26601
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
使用flex布局完成分頁、二手商品、評論回復(fù)--PHP培訓(xùn)十期線上班
Miss灬懶蟲
原創(chuàng)
1082人瀏覽過

使用flex布局完成分頁、二手商品、評論回復(fù)（補12.26）

因為工作原因，沒有能及完成相關(guān)學(xué)習(xí)任務(wù)，后面會盡快補上。
下面是使用flex布局，完成的三個簡單例子，分別依次按照分頁、二手商品、評論回復(fù)順序編寫，每個項目有又分為 效果圖、布局思路、HTML代碼和CSS代碼幾個部分。

簡單的分頁

效果圖

布局思路

首先，將包裹分頁的容器轉(zhuǎn)換為“彈性盒子”容器（container），然后讓整個盒子居中顯示，并且將盒子內(nèi)容的空間平局分配個盒子里面的項目（item），然后的a便簽中的文本進(jìn)行樣式調(diào)整，包括文本水平以及垂直居中，字體大小等，最后個鼠標(biāo)動作添加劃過特效（手型、陰影等）。

HTML代碼

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>公共翻頁標(biāo)簽</title>
  6.     <link rel="stylesheet" href="public_paginate.css">
  7. </head>
  8. <body>
  9. <div class="public-paginate">
  10.     <a href="">&lt;</a>
  11.     <a href="">1</a>
  12.     <a href="">2</a>
  13.     <a href="">3</a>
  14.     <a href="">4</a>
  15.     <a href="">5</a>
  16.     <a href="">6</a>
  17.     <a href="">7</a>
  18.     <a href="">8</a>
  19.     <a href="">&gt;</a>
  20. </div>
  21. </body>
  22. </html>

CSS代碼

  1. /*引入公共初始化標(biāo)簽樣式文件*/
  2. @import "public_reset.css";
  4. .public-paginate{
  5.     width: 1200px;
  6.     height: 60px;
  7.     display: flex;
  8.     flex-flow: row nowrap;
  9.     /*設(shè)置子元素在主軸上的對齊方式*/
  10.     justify-content: center;
  11.     /*設(shè)置子元素在交叉軸上的對齊方式*/
  12.     align-items: center;
  13. }
  14. .public-paginate > a{
  15.     width: 60px;
  16.     height: 40px;
  17.     line-height: 40px;
  18.     text-align: center;
  19.     font-size: 14px;
  20.     margin: 0 5px;
  21.     border-radius: 5px;
  22.     background-color: #fff;
  23. }
  24. .public-paginate > a:hover{
  25.     font-size: 1.2em;
  26.     font-weight: bolder;
  27.     color: #fff;
  28.     background-color: #0086b3;
  29.     /*陰影效果：
  30.     box-shadow: h-shadow v-shadow blur spread color inset.
  31.                 h-shadow: 陰影的水平位置
  32.                 v-shadow：陰影的垂直位置
  33.                 blur：陰影的模糊半徑
  34.                 spread：陰影的半徑
  35.                 color：陰影的顏色
  36.                 inset：將外部陰影改成內(nèi)部陰影【outset反過來】
  37.      */
  38.     box-shadow: 0 0 5px #888888;
  39. }

二手商品

效果圖

布局思路

首先，有一個包裹最外面的大盒子BOX（container）,在打盒子里面有3 行項目（item），其中 row-1 標(biāo)題1、row-2 標(biāo)題2+導(dǎo)航、row-3（BOX-2）。
row-3（BOX-2）西面，又包含3個盒子（BOX-3）,其中一個是商品的圖片和價格等，另外一個是快速入口。同時因為商品圖片格式等是一致的所以就又是一個盒子（BOX-4），而快速入口下面的廣告部分和上面的方向不一致，所以單拿出來做一個盒子（BOX-4。

HTML代碼

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>公共二手商品頭部列表</title>
  6.     <link rel="stylesheet" href="public_second_hand.css">
  7. </head>
  8. <body>
  9. <div class="public-second-hand">
  10. <!--    頭部標(biāo)題1-->
  11.     <div class="title1">
  12.         <span>搶好貨</span>
  13.         <span>0低價，便捷，安全，快速</span>
  14.     </div>
  15. <!--    頭部標(biāo)題2-->
  16.     <div class="title2">
  17.         <span>熱門分類</span>
  18.         <a href="">美女寫真</a>
  19.         <a href="">日本美女</a>
  20.         <a href="">美國美女</a>
  21.         <a href="">國內(nèi)美女</a>
  22.         <a href="">AV美女</a>
  23.     </div>
  24. <!--    二手商品列表以及快速入口-->
  25.     <div class="hand-content">
  26. <!--        商品列表-->
  27.         <div class="hand-list">
  28.             <div class="list-goods">
  29.             <img src="../../../1220/images/shop/shop1.jpg" alt="">
  30.             <span>美女性感寫真海報墻藝術(shù)裝飾、畫貼--圖1</span>
  31.             <div class="goods-price">
  32.                 <span>&yen;345</span>
  33.                 <span>美女</span>
  34.             </div>
  35.         </div>
  36.             <div class="list-goods">
  37.                 <img src="../../../1220/images/shop/shop2.jpg" alt="">
  38.                 <span>美女性感寫真海報墻藝術(shù)裝飾、畫貼--圖1</span>
  39.                 <div class="goods-price">
  40.                     <span>&yen;345</span>
  41.                     <span>美女</span>
  42.                 </div>
  43.             </div>
  44.             <div class="list-goods">
  45.                 <img src="../../../1220/images/shop/shop3.jpg" alt="">
  46.                 <span>美女性感寫真海報墻藝術(shù)裝飾、畫貼--圖1</span>
  47.                 <div class="goods-price">
  48.                     <span>&yen;345</span>
  49.                     <span>美女</span>
  50.                 </div>
  51.             </div>
  52.             <div class="list-goods">
  53.                 <img src="../../../1220/images/shop/shop4.jpg" alt="">
  54.                 <span>美女性感寫真海報墻藝術(shù)裝飾、畫貼--圖1</span>
  55.                 <div class="goods-price">
  56.                     <span>&yen;345</span>
  57.                     <span>美女</span>
  58.                 </div>
  59.             </div>
  60.             <div class="list-goods">
  61.                 <img src="../../../1220/images/shop/shop5.jpg" alt="">
  62.                 <span>美女性感寫真海報墻藝術(shù)裝飾、畫貼--圖1</span>
  63.                 <div class="goods-price">
  64.                     <span>&yen;345</span>
  65.                     <span>美女</span>
  66.                 </div>
  67.             </div>
  68.             <div class="list-goods">
  69.                 <img src="../../../1220/images/shop/shop6.jpg" alt="">
  70.                 <span>美女性感寫真海報墻藝術(shù)裝飾、畫貼--圖1</span>
  71.                 <div class="goods-price">
  72.                     <span>&yen;345</span>
  73.                     <span>美女</span>
  74.                 </div>
  75.             </div>
  76.             <div class="list-goods">
  77.                 <img src="../../../1220/images/shop/shop7.jpg" alt="">
  78.                 <span>美女性感寫真海報墻藝術(shù)裝飾、畫貼--圖1</span>
  79.                 <div class="goods-price">
  80.                     <span>&yen;345</span>
  81.                     <span>美女</span>
  82.                 </div>
  83.             </div>
  84.             <div class="list-goods">
  85.                 <img src="../../../1220/images/shop/shop8.jpg" alt="">
  86.                 <span>美女性感寫真海報墻藝術(shù)裝飾、畫貼--圖1</span>
  87.                 <div class="goods-price">
  88.                     <span>&yen;345</span>
  89.                     <span>美女</span>
  90.                 </div>
  91.             </div>
  92.         </div>
  93. <!--        快速入口-->
  94.         <div class="quick">
  95.             <div class="quick-entry">
  96.                 <a href=""><img src="../../../1220/images/ad/1.png" alt=""></a>
  97.                 <a href=""><img src="../../../1220/images/ad/2.png" alt=""></a>
  98.                 <a href=""><img src="../../../1220/images/ad/3.png" alt=""></a>
  99.                 <a href=""><img src="../../../1220/images/ad/4.png" alt=""></a>
  100.             </div>
  101.             <div class="quick-ad">
  102.                 <img src="../../../1220/images/ad/image.png" alt="">
  103.                 <img src="../../../1220/images/ad/ad2.jpg" alt="">
  104.             </div>
  105.         </div>
  106.     </div>
  107. </div>
  108. </body>
  109. </html>

CSS代碼

  1. /*引入公共重置標(biāo)簽樣式文件*/
  2. @import "public_reset.css";
  3. /*外層div轉(zhuǎn)彈性盒子*/
  4. .public-second-hand{
  5.     width: 1260px;
  6.     height: 530px;
  7.     background-color: #fff;
  8.     border-radius: 5px;
  9.     font-size: 13px;
  10.     color: #555555;
  11.     display: flex;
  12.     margin: 0 auto;
  13.     flex-flow: column nowrap;
  14. }
  15. .public-second-hand:hover{
  16.     box-shadow: 0 0 5px #888888;
  17. }
  19. /*頭部標(biāo)題1 樣式*/
  20. .public-second-hand >.title1{
  21.     height: 40px;
  22.     line-height: 40px;
  23.     text-align: left;
  24. }
  25. .public-second-hand >.title1 >span:first-of-type{
  26.     color: #404040;
  27.     font-size: 1.4rem;
  28.     margin: 0 10px;
  29. }
  30. .public-second-hand >.title1 >span:last-of-type{
  31.     color: red;
  32.     padding-left: 16px;
  33. }
  35. /*頭部標(biāo)題2 以及分類導(dǎo)航樣式*/
  36. .public-second-hand >.title2{
  37.     height: 40px;
  38.     margin: 10px 10px;
  39.     border-top: 1px solid #cccccc;
  40. }
  41. .public-second-hand >.title2 >span{
  42.     color: red;
  43.     font-size: 1.4rem;
  44. }
  45. .public-second-hand >.title2 >a{
  46.     margin: 0 10px;
  47. }
  48. .public-second-hand >.title2> a:hover {
  49.     color: lightcoral;
  50.     cursor: pointer;
  51. }
  53. /*商品列表與快速入口的大盒子*/
  54. .public-second-hand >.hand-content{
  55.     height: 420px;
  56.     display: flex;
  57.     margin: 0 5px;
  58. }
  59. /*商品列表小盒子*/
  60. .public-second-hand> .hand-content >.hand-list{
  61.     width: 850px;
  62.     height: 420px;
  63.     display: flex;
  64.     flex-flow: row wrap;
  65. }
  66. /*商品圖片與介紹*/
  67. .list-goods{
  68.     width: 200px;
  69.     height: 120px;
  70.     display: flex;
  71.     flex-flow: column nowrap;
  72.     margin: 0 5px;
  73. }
  74. .list-goods > img{
  75.     width: 190px;
  76.     height: 120px;
  77.     border-radius: 4px;
  78. }
  80. /*價格*/
  81. .goods-price{
  82.     text-align: center;
  83.     display: flex;
  84. }
  85. .goods-price >span:first-of-type{
  86.     color: red;
  87.     font-weight: bolder;
  88. }
  89. .goods-price >span:last-of-type{
  90.     color: #fff;
  91.     background-color: #669900;
  92.     margin-left: auto;
  93. }
  96. /*快速入口小盒子*/
  97. .public-second-hand> .hand-content >.quick{
  98.     width: 410px;
  99.     height: 420px;
  100.     display: flex;
  101.     flex-flow: column wrap;
  102. }
  103. .quick-entry{
  104.     display: flex;
  105.     flex-flow: row wrap;
  106.     justify-content: space-evenly;
  107. }
  108. .quick-entry a{
  109.     margin-top: 5px;
  110. }
  111. .quick-entry a img{
  112.     width: 190px;
  113.     height: 120px;
  114. }
  115. .quick-ad{
  116.     display: flex;
  117.     flex-flow: column nowrap;
  118.     margin: 0 auto;
  119. }
  120. .quick-ad >img{
  121.     width: 380px;
  122.     height: 65px;
  123. }

評論回復(fù)

效果圖

布局思路
首先，將模塊分成兩個部分，即評論區(qū)和回復(fù)區(qū)。因為都縱向排列，所以盒子基本都是flex-flow: column nowrap;,而評論區(qū)的文本域需要鋪滿剩余空間，所以flex:auto;resize: none;
其次，在回復(fù)內(nèi)容部分，因為回復(fù)點贊在另一個，所以最后這一樣也要轉(zhuǎn)化為盒子，并且包裹回復(fù)的<span>元素，需要margin-left: auto;

HTML代碼

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>公共組件-評論回復(fù)</title>
  6.     <link rel="stylesheet" href="public_comments_reply.css">
  7. </head>
  8. <body>
  9. <div class="public-comments-reply">
  10. <!--    評論區(qū)域-->
  11.     <div class="comments">
  12.         <span>我要評論</span>
  13.         <div class="comments-content">
  14.             <img src="../../../1220/images/user.png" alt="">
  15.             <label for="comments_text"></label>
  16.             <textarea name="comments_text" id="comments_text" cols="30" rows="10"></textarea>
  17.         </div>
  18.         <button>發(fā)表評論</button>
  19.     </div>
  20. <!--    回復(fù)區(qū)域-->
  21.     <div class="reply">
  22.         <span>最新回復(fù)</span>
  23. <!--        評論回復(fù)列表-->
  24.         <div class="reply-list">
  25.             <img src="../../../1220/images/user.png" alt="">
  26. <!--            評論內(nèi)容-->
  27.             <div class="reply-content">
  28.                 <span>用戶昵稱</span>
  29.                 <span>留言內(nèi)容：PHP中文網(wǎng)是一個有溫度、有內(nèi)容、有理想的學(xué)習(xí)平臺！</span>
  30. <!--                回復(fù)時間與點贊-->
  31.                 <div>
  32.                     <span>2019-12-23 14:52:49發(fā)布</span>
  33.                     <span><i class="iconfont">&#xec80;</i>回復(fù)</span>
  34.                 </div>
  35.             </div>
  36.         </div>
  37.         <div class="reply-list">
  38.             <img src="../../../1220/images/user.png" alt="">
  39.             <!--            評論內(nèi)容-->
  40.             <div class="reply-content">
  41.                 <span>用戶昵稱</span>
  42.                 <span>留言內(nèi)容：PHP中文網(wǎng)是一個有溫度、有內(nèi)容、有理想的學(xué)習(xí)平臺！</span>
  43.                 <!--                回復(fù)時間與點贊-->
  44.                 <div>
  45.                     <span>2019-12-23 14:52:49發(fā)布</span>
  46.                     <span><i class="iconfont">&#xec80;</i>回復(fù)</span>
  47.                 </div>
  48.             </div>
  49.         </div>
  50.         <div class="reply-list">
  51.             <img src="../../../1220/images/user.png" alt="">
  52.             <!--            評論內(nèi)容-->
  53.             <div class="reply-content">
  54.                 <span>用戶昵稱</span>
  55.                 <span>留言內(nèi)容：PHP中文網(wǎng)是一個有溫度、有內(nèi)容、有理想的學(xué)習(xí)平臺！</span>
  56.                 <!--                回復(fù)時間與點贊-->
  57.                 <div>
  58.                     <span>2019-12-23 14:52:49發(fā)布</span>
  59.                     <span><i class="iconfont">&#xec80;</i>回復(fù)</span>
  60.                 </div>
  61.             </div>
  62.         </div>
  63.         <div class="reply-list">
  64.             <img src="../../../1220/images/user.png" alt="">
  65.             <!--            評論內(nèi)容-->
  66.             <div class="reply-content">
  67.                 <span>用戶昵稱</span>
  68.                 <span>留言內(nèi)容：PHP中文網(wǎng)是一個有溫度、有內(nèi)容、有理想的學(xué)習(xí)平臺！</span>
  69.                 <!--                回復(fù)時間與點贊-->
  70.                 <div>
  71.                     <span>2019-12-23 14:52:49發(fā)布</span>
  72.                     <span><i class="iconfont">&#xec80;</i>回復(fù)</span>
  73.                 </div>
  74.             </div>
  75.         </div>
  76.     </div>
  77. </div>
  78. </body>
  79. </html>

CSS代碼

  1. /*引入公共重置標(biāo)簽樣式文件*/
  2. @import "public_reset.css";
  4. .public-comments-reply{
  5.     width: 1200px;
  6.     height: 720px;
  7.     font-size: 13px;
  8.     color: #555555;
  9.     background-color: #fff;
  10.     display: flex;
  11.     flex-flow: column nowrap;
  12.     margin: 0 auto;
  14. }
  15. .public-comments-reply img{
  16.     width: 50px;
  17.     height: 50px;
  18.     border-radius: 2px;
  19.     box-shadow: 0 0 2px #888888;
  20.     margin: 0 14px;
  21. }
  22. /*評論區(qū)域樣式*/
  23. .public-comments-reply >.comments{
  24.     width: 1160px;
  25.     height: 320px;
  26.     display: flex;
  27.     flex-flow: column nowrap;
  28.     justify-content: flex-start;
  29.     border-top: 1px solid #cccccc;
  30.     margin: 10px 10px;
  31. }
  32. /*評論區(qū)標(biāo)題*/
  33. .public-comments-reply >.comments >span:first-of-type{
  34.     height: 60px;
  35.     line-height: 60px;
  36.     font-weight: bolder;
  37. }
  38. /*評論切頭像與評論內(nèi)容*/
  39. .comments >.comments-content{
  40.     height: 200px;
  41.     display: flex;
  42. }
  44. /*文本域樣式*/
  45. .comments >.comments-content >textarea{
  46.     height: 200px;
  47.     flex:auto;
  48.     /*文本域不予許調(diào)整大小*/
  49.     resize: none;
  50. }
  51. .comments >.comments-content >textarea:hover{
  52.     box-shadow: 0 0 5px #888888;
  53. }
  55. /*評論區(qū)提交按鈕按*/
  56. .public-comments-reply >.comments >button{
  57.     width: 130px;
  58.     height: 34px;
  59.     border: none;
  60.     line-height: 34px;
  61.     text-align: center;
  62.     color: #fff;
  63.     background-color: #ff2017;
  64.     margin-top: 20px;
  65.     margin-left: auto;
  66. }
  67. .public-comments-reply >.comments >button:hover {
  68.     background-color: #178cee;
  69.     cursor: pointer;
  70.     box-shadow: 0 0 2px #888888;
  71. }
  72. /*回復(fù)區(qū)域樣式*/
  73. .public-comments-reply >.reply{
  74.     width: 1160px;
  75.     height: 360px;
  76.     display: flex;
  77.     flex-flow: column nowrap;
  78.     margin:0 10px;
  79. }
  80. .public-comments-reply >.reply >span{
  81.     height: 50px;
  82.     line-height: 50px;
  83.     font-weight: bolder;
  84. }
  85. /*回復(fù)內(nèi)容 頭像+內(nèi)容*/
  86. .public-comments-reply>.reply>.reply-list{
  87.     height: 70px;
  88.     display: flex;
  89.     flex-flow: row nowrap;
  90.     margin-bottom: 18px;
  91. }
  92. .public-comments-reply>.reply>.reply-list> img{
  93.     /*子元素交叉軸居中*/
  94.     align-self: center;
  95. }
  96. /*回復(fù)內(nèi)容*/
  97. .public-comments-reply>.reply>.reply-list>.reply-content{
  98.     flex:auto;
  99.     display: flex;
  100.     flex-flow: column nowrap;
  101.     justify-content: space-around;
  102. }
  103. .public-comments-reply>.reply>.reply-list>.reply-content >div{
  104.     display: flex;
  105. }
  106. .public-comments-reply>.reply>.reply-list>.reply-content >div >span:last-of-type{
  107.     margin-left: auto;
  108. }
  109. .public-comments-reply>.reply>.reply-list>.reply-content >div >span> i{
  110.     color: #ff2017;
  111.     font-size: 20px;
  112.     margin-right: 10px;
  113. }

謝謝，閱讀瀏覽！

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

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

老師批語：對頁面的基本控制技術(shù), 是宏觀上知識 , 對于字體大小顏色等細(xì)節(jié), 還是要根據(jù)自己喜愛決定
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(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
隨時隨地碎片化學(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+教程免費學(xué)