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

搜索
博主信息
博文 9
粉絲 3
評(píng)論 0
訪(fǎng)問(wèn)量 16277
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
2019-12-26作業(yè)，商品交易區(qū)和評(píng)論回復(fù)組件
十年一夢(mèng)
原創(chuàng)
851人瀏覽過(guò)

2019-12-26作業(yè) flex實(shí)戰(zhàn)

一、結(jié)構(gòu)分析思路

  • 1、拿到一個(gè)頁(yè)面之后，首先拆分組合，把整個(gè)頁(yè)面拆成每個(gè)小組件；
  • 2、拆開(kāi)之后把相似并且相近的元素組合一個(gè)大一點(diǎn)的元素；
  • 3、然后就可以根據(jù)結(jié)構(gòu)把各個(gè)大一點(diǎn)的元素的尺寸量好；
  • 4、再把所需要的素材全部準(zhǔn)備好之后就可以根據(jù)分拆組合的結(jié)構(gòu)寫(xiě)html代碼
  • 5、寫(xiě)好代碼，把大概的css寫(xiě)出來(lái)，在根據(jù)原圖對(duì)比微調(diào)；

二、作業(yè)代碼提交

  • 公共商品交易區(qū)public_second_hand.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>公共花卉交易區(qū)</title>
  6.     <link rel="stylesheet" href="public_second_hand.css">
  7. </head>
  8. <body>
  9. <!--引入大標(biāo)題-->
  10. <div class="public-headline">
  11.     <span>花卉交易</span>
  12. </div>
  13. <!--花卉交易區(qū)-->
  14. <div class="public-second-hand">
  15. <!--    標(biāo)題一-->
  16.     <div class="title-first">
  17.         <a href="">搶好貨</a>
  18.         <span> 0低價(jià), 便捷,安全,快速</span>
  19.     </div>
  20. <!--    標(biāo)題二-->
  21.     <div class="title-second">
  22.         <span>熱門(mén)分類(lèi)</span>
  23.         <a href="">藍(lán)紫色</a>
  24.         <a href="">紫紅色</a>
  25.         <a href="">白色</a>
  26.         <a href="">粉紅色</a>
  27.         <a href="">紅色</a>
  28.         <a href="">綠色</a>
  29.     </div>
  30.     <div class="goods">
  31.         <div class="goods-list">
  33.             <div class="intro">
  34.                 <a href=""><img src="../../../static/images/shop/shop1.jpg" alt=""></a>
  35.                 <a href="">桃紅色顏色大麗花花孤立孤芳自賞的美麗花</a>
  36.                 <div>
  37.                     <span>&yen; 389</span>
  38.                     <span>紅色花</span>
  39.                 </div>
  40.             </div>
  41.             <div class="intro">
  42.                 <a href=""><img src="../../../static/images/shop/shop2.jpg" alt=""></a>
  43.                 <a href="">桃紅色顏色大麗花花孤立孤芳自賞的美麗花</a>
  44.                 <div>
  45.                     <span>&yen; 389</span>
  46.                     <span>紅色花</span>
  47.                 </div>
  48.             </div>
  49.             <div class="intro">
  50.                 <a href=""><img src="../../../static/images/shop/shop3.jpg" alt=""></a>
  51.                 <a href="">桃紅色顏色大麗花花孤立孤芳自賞的美麗花</a>
  52.                 <div>
  53.                     <span>&yen; 389</span>
  54.                     <span>紅色花</span>
  55.                 </div>
  56.             </div>
  57.             <div class="intro">
  58.                 <a href=""><img src="../../../static/images/shop/shop4.jpg" alt=""></a>
  59.                 <a href="">桃紅色顏色大麗花花孤立孤芳自賞的美麗花</a>
  60.                 <div>
  61.                     <span>&yen; 389</span>
  62.                     <span>紅色花</span>
  63.                 </div>
  64.             </div>
  65.             <div class="intro">
  66.                 <a href=""><img src="../../../static/images/shop/shop5.jpg" alt=""></a>
  67.                 <a href="">桃紅色顏色大麗花花孤立孤芳自賞的美麗花</a>
  68.                 <div>
  69.                     <span>&yen; 389</span>
  70.                     <span>紅色花</span>
  71.                 </div>
  72.             </div>
  73.             <div class="intro">
  74.                 <a href=""><img src="../../../static/images/shop/shop6.jpg" alt=""></a>
  75.                 <a href="">桃紅色顏色大麗花花孤立孤芳自賞的美麗花</a>
  76.                 <div>
  77.                     <span>&yen; 389</span>
  78.                     <span>紅色花</span>
  79.                 </div>
  80.             </div>
  81.             <div class="intro">
  82.                 <a href=""><img src="../../../static/images/shop/shop7.jpg" alt=""></a>
  83.                 <a href="">桃紅色顏色大麗花花孤立孤芳自賞的美麗花</a>
  84.                 <div>
  85.                     <span>&yen; 389</span>
  86.                     <span>紅色花</span>
  87.                 </div>
  88.             </div>
  89.             <div class="intro">
  90.                 <a href=""><img src="../../../static/images/shop/shop8.jpg" alt=""></a>
  91.                 <a href="">桃紅色顏色大麗花花孤立孤芳自賞的美麗花</a>
  92.                 <div>
  93.                     <span>&yen; 389</span>
  94.                     <span>紅色花</span>
  95.                 </div>
  96.             </div>
  97.         </div>
  98.       <div class="quick-entry">
  99.           <a href=""><img src="../../../static/images/ad/1.png" alt=""></a>
  100.           <a href=""><img src="../../../static/images/ad/2.png" alt=""></a>
  101.           <a href=""><img src="../../../static/images/ad/3.png" alt=""></a>
  102.           <a href=""><img src="../../../static/images/ad/4.png" alt=""></a>
  103.           <div>
  104.               <a href=""><img src="../../../static/images/ad/image.png" alt=""></a>
  105.               <a href=""><img src="../../../static/images/ad/ad2.jpg" alt=""></a>
  106.           </div>
  107.       </div>
  108.     </div>
  109. </div>
  110. </body>
  111. </html>
  • 公共商品交易區(qū)樣式表public_second_hand.css
    1. @import "../public_reset.css";
    2. @import "../public_headline/public_headline.css";
    3. .public-second-hand {
    4.   width: 1200px;
    5.   padding: 10px;
    6.   box-sizing: border-box;
    7.   margin: auto;
    8.   background-color: #ffffff;
    9. }
    10. .public-second-hand:hover {
    11.   box-shadow: 0 0 8px #888888;
    12. }
    13. .public-second-hand > .title-first {
    14.   height: 50px;
    15.   border-bottom: 1px solid #cccccc;
    16.   box-sizing: border-box;
    17. }
    18. .public-second-hand > .title-first > a{
    19.   font-size: 23px;
    20.   margin-right: 20px;
    21. }
    22. .public-second-hand > .title-first > span {
    23.   color: red;
    24. }
    25. .public-second-hand > .title-second {
    26.   height: 55px;
    27. }
    28. .public-second-hand > .title-second > span {
    29.   font-size: 23px;
    30.   color: red;
    31. }
    32. .public-second-hand > .title-second > span ~ a {
    33.   margin-left: 20px;
    34. }
    35. .public-second-hand > .goods {
    36.   height: 440px;
    37.   display: flex;
    38. }
    39. .public-second-hand > .goods > .goods-list {
    40.   flex-basis: 800px;
    41.   padding: 10px;
    42.   display: flex;
    43.   flex-flow: row wrap;
    44.   justify-content: space-between;
    45. }
    46. .public-second-hand > .goods > .goods-list > .intro {
    47.   width: 178px;
    48.   height: 200px;
    49.   display: flex;
    50.   flex-flow: column nowrap;
    51.   justify-content: space-between;
    52. }
    53. .public-second-hand > .goods > .goods-list > .intro  img {
    54.   width: 176px;
    55.   height: 120px;
    56.   border: 1px solid #cccccc;
    57.   border-radius: 5px;
    58. }
    59. .public-second-hand > .goods > .goods-list > .intro div {
    60.   display: flex;
    61. }
    62. .public-second-hand > .goods > .goods-list > .intro span:first-of-type {
    63.   color: red;
    64. }
    65. .public-second-hand > .goods > .goods-list > .intro span:last-of-type {
    66.   color: white;
    67.   padding: 0 5px;
    68.   background-color: #55ce9f;
    69.   margin-left: auto;
    70. }
    71. .public-second-hand > .goods > .quick-entry {
    72.   flex-basis: 400px;
    73.   padding: 10px;
    74.   display: flex;
    75.   flex-flow: row wrap;
    76.   justify-content: space-between;
    77. }
    78. .public-second-hand > .goods > .quick-entry img {
    79.   width: 190px;
    80.   height: 130px;
    81. }
    82. .public-second-hand > .goods > .quick-entry > div {
    83.   flex-basis: 400px;
    84.   display: flex;
    85.   flex-direction: column;
    86. }
    87. .public-second-hand > .goods > .quick-entry > div img {
    88.   width: 393px;
    89.   height: 60px;
    90. }
  • 完成效果圖；

*公共評(píng)論回復(fù)區(qū)public_comment_reply.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>公共評(píng)論回復(fù)</title>
  6.     <link rel="stylesheet" href="public_comment_reply.css">
  7.     <link rel="stylesheet" href="../../../static/font/iconfont.css">
  8. </head>
  9. <body>
  10. <div class="public-comment-reply">
  11. <!--    評(píng)論輸入框-->
  12.    <div class="comment">
  13.        <h3>我要評(píng)論</h3>
  14.        <div>
  15.            <label for="comment"><img src="../../../static/images/user/user1.gif" alt=""></label>
  16.            <textarea name="" id="comment"></textarea>
  17.        </div>
  18.        <button>提交評(píng)論</button>
  19.    </div>
  20. <!--    評(píng)論列表-->
  21.     <div class="reply">
  22.         <h3>最新回復(fù)</h3>
  23.         <div>
  24.         <img src="../../../static/images/user/user2.gif" alt="">
  25.         <div class="detail">
  26.             <span>用戶(hù)昵稱(chēng)</span>
  27.             <span>留言?xún)?nèi)容：你家的花很漂亮，很喜歡哦！</span>
  28.             <div>
  29.                 <span>2019-12-27-14:45 發(fā)表</span>
  30.                 <span><i class="iconfont icon-dianzan"></i>回復(fù)</span>
  31.             </div>
  32.         </div>
  34.     </div>
  35.         <div>
  36.             <img src="../../../static/images/user/user3.gif" alt="">
  37.             <div class="detail">
  38.                 <span>用戶(hù)昵稱(chēng)</span>
  39.                 <span>留言?xún)?nèi)容：你家的花很漂亮，很喜歡哦！</span>
  40.                 <div>
  41.                     <span>2019-12-27-14:45 發(fā)表</span>
  42.                     <span><i class="iconfont icon-dianzan"></i>回復(fù)</span>
  43.                 </div>
  44.             </div>
  46.         </div>
  47.         <div>
  48.             <img src="../../../static/images/user/user4.gif" alt="">
  49.             <div class="detail">
  50.                 <span>用戶(hù)昵稱(chēng)</span>
  51.                 <span>留言?xún)?nèi)容：你家的花很漂亮，很喜歡哦！</span>
  52.                 <div>
  53.                     <span>2019-12-27-14:45 發(fā)表</span>
  54.                     <span><i class="iconfont icon-dianzan"></i>回復(fù)</span>
  55.                 </div>
  56.             </div>
  58.         </div>
  59.         <div>
  60.             <img src="../../../static/images/user/user5.gif" alt="">
  61.             <div class="detail">
  62.                 <span>用戶(hù)昵稱(chēng)</span>
  63.                 <span>留言?xún)?nèi)容：你家的花很漂亮，很喜歡哦！</span>
  64.                 <div>
  65.                     <span>2019-12-27-14:45 發(fā)表</span>
  66.                     <span><i class="iconfont icon-dianzan"></i>回復(fù)</span>
  67.                 </div>
  68.             </div>
  70.         </div>
  71.     </div>
  73. </div>
  74. </body>
  75. </html>
  • 公共評(píng)論區(qū)樣式表public_comment_reply.css
    ```css
    @import “../public_reset.css”;

.public-comment-reply {
padding: 15px;
box-sizing: border-box;
background-color: #ffffff;
display: flex;
flex-direction: column;
}
.public-comment-reply > .comment {
display: flex;
flex-direction: column;
}
.public-comment-reply > .comment h3 {
padding: 20px;
border-top: 1px solid #cccccc;
}
.public-comment-reply > .comment > div {
padding: 15px;
height: 200px;
display: flex;
flex-flow: row nowrap;
}
.public-comment-reply > .comment > div img {
align-self: start;
}
.public-comment-reply img {
width: 60px;
height: 60px;
box-shadow: 1px 1px 3px #cccccc;
border-radius: 5px;
}

.public-comment-reply > .comment > div textarea {
height: 200px;
margin-left: 20px;
resize: none;
flex: auto;
}
.public-comment-reply > .comment > button {
font-size: 14px;
color: white;
background-color: red;
border: none;
width: 150px;
height: 40px;
align-self: flex-end;
}
.public-comment-reply > .reply {
padding: 15px 0;
display: flex;
flex-direction: column;
}
.public-comment-reply > .reply > h3 {
padding: 20px 0;
}
.public-comment-reply > .reply > div {
display: flex;
margin-top: 30px;
}
.public-comment-reply > .reply > div > img {
align-self: center;
}
.public-comment-reply > .reply > div > .detail {
flex: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 90px;
margin-left: 20px;
}
.public-comment-reply > .reply > div > .detail > div {
display: flex;
justify-content: space-between;
}
.public-comment-reply > .reply > div > .detail > div i{
color: red;
font-size: 16px;
margin-right: 5px;
}
```

  • 完成效果圖

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

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

老師批語(yǔ)：素材一換, 就是不一樣, 很有創(chuàng)意, 你是女生吧?
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線(xiàn)php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

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

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