简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 前端学习-1226号作业
Blogger Information
Blog 4
fans 0
comment 0
visits 2231
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
前端学习-1226号作业
天
Original
485 people have browsed it

效果图展示

布局思路：最主要的是先行分析整个布局方案，从上到下，从左到右，先html再一步步css，outline的帮助的巨大的，看得到才能写的到。代码是跟着录播一边思考一边写的，应该多多练习，熟能生巧

二手交易

HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="public_second_hand.css">
  6.     <link rel="stylesheet" href="../public_headline/public_headline.css">
  7.     <title>公共二手区域交易组件</title>
  8. </head>
  9. <body>
  10. <div class="public-headline">
  11.     <!--    文本必须/推荐放在一个行内标签中,div中的文本成为匿名文本-->
  12.     <span>二手交易</span>
  13. </div>
  14. <div class="public_second_hand">
  15. <!--    标题1-->
  16.     <div class="title1">
  17.         <a href="" >抢好货</a>
  18.         <span>0低价,便捷,安全,快速</span>
  19.     </div>
  20. <!--    标题2-->
  21.       <div class="title2">
  22.           <span>热门分类</span>
  23.           <a href="">美女写真</a>
  24.           <a href="">日本美女</a>
  25.           <a href="">国内美女</a>
  26.           <a href="">AV美女</a>
  27.           <a href="">美国美女</a>
  28.       </div>
  29. <!--    商品展示区-->
  30.     <div class="goods">
  31. <!--        1.左边商品列表-->
  32.         <div class="goods-list">
  33. <!--            商品简介-->
  34.             <div class="intro">
  35.                 <a href="" ><img src="../../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  36.                 <a href="">美女性感写真</a>
  37.                 <div>
  38.                     <span>&yen; 333</span>
  39.                     <span>美女</span>
  40.                 </div>
  41.             </div>
  42.             <div class="intro">
  43.                 <a href="" ><img src="../../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  44.                 <a href="">美女性感写真</a>
  45.                 <div>
  46.                     <span>&yen; 333</span>
  47.                     <span>美女</span>
  49.                 </div>
  50.             </div>
  51.             <div class="intro">
  52.             <a href="" ><img src="../../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  53.             <a href="">美女性感写真</a>
  54.             <div>
  55.                 <span>&yen; 333</span>
  56.                 <span>美女</span>
  58.             </div>
  59.         </div>
  60.             <div class="intro">
  61.                 <a href="" ><img src="../../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  62.                 <a href="">美女性感写真</a>
  63.                 <div>
  64.                     <span>&yen; 333</span>
  65.                     <span>美女</span>
  67.                 </div>
  68.             </div>
  69.             <div class="intro">
  70.                 <a href="" ><img src="../../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  71.                 <a href="">美女性感写真</a>
  72.                 <div>
  73.                     <span>&yen; 333</span>
  74.                     <span>美女</span>
  76.                 </div>
  77.             </div>
  78.             <div class="intro">
  79.                 <a href="" ><img src="../../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  80.                 <a href="">美女性感写真</a>
  81.                 <div>
  82.                     <span>&yen; 333</span>
  83.                     <span>美女</span>
  85.                 </div>
  86.             </div>
  87.             <div class="intro">
  88.                 <a href="" ><img src="../../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  89.                 <a href="">美女性感写真</a>
  90.                 <div>
  91.                     <span>&yen; 333</span>
  92.                     <span>美女</span>
  94.                 </div>
  95.             </div>
  96.             <div class="intro">
  97.                 <a href="" ><img src="../../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  98.                 <a href="">美女性感写真</a>
  99.                 <div>
  100.                     <span>&yen; 333</span>
  101.                     <span>美女</span>
  103.                 </div>
  104.             </div>
  105.         </div>
  106. <!--        2.右侧的功能快速入口-->
  107.         <div class="quick-entry">
  108.             <a href=""><img src="../../../static/images/ad/1.png" alt=""></a>
  109.             <a href=""><img src="../../../static/images/ad/2.png" alt=""></a>
  110.             <a href=""><img src="../../../static/images/ad/3.png" alt=""></a>
  111.             <a href=""><img src="../../../static/images/ad/4.png" alt=""></a>
  112.             <div>
  113.                 <a href=""><img src="../../../static/images/ad/image.png" alt=""></a>
  114.                 <a href=""><img src="../../../static/images/ad/ad2.jpg" alt=""></a>
  115.             </div>
  116.         </div>
  117.     </div>
  118. </div>
  119. </body>
  120. </html>

CSS样式

  1. /*样式重置*/
  2. @import "../public_reset.css";
  3. /*大标题组件*/
  4. @import "../public_headline/public_headline.css";
  6. /*二手交易专区的样式表*/
  7. .public_second_hand{
  8.     width: 1200px;
  9.     padding: 10px;
  10.     box-sizing: border-box;
  11.     margin: auto;
  12.     border-radius: 5px;
  13.     background-color: #fff;
  14. }
  15. .public_second_hand:hover{
  16.     box-shadow: 0 0 8px #888;
  17. }
  18. /*标题一*/
  19. .title1 {
  20.     height: 50px;
  21.     border-bottom: 1px solid #cccccc;
  22.     box-sizing: border-box;
  24. }
  25. .public_second_hand > .title1 > a {
  26.     font-size: 23px;
  27.     margin-right: 20px;
  28. }
  29. .public_second_hand > .title1 > span{
  30.     color: red;
  31. }
  32. /*标题二*/
  33. .public_second_hand > .title2{
  34.     height: 55px;
  35. }
  36. .public_second_hand > .title2 > span{
  37.     font-size: 23px;
  38.     margin-right: 20px;
  39.     color: red;
  40. }
  41. .public_second_hand > .title2 > span ~ a{
  42.     margin-left: 20px;
  43. }
  44. .public_second_hand > .title2 > span ~ a:hover{
  45.      color: #795da3;
  46. }
  48. /*商品展示区*/
  49. .public_second_hand > .goods {
  50.     height: 440px;
  51.     display: flex;
  52. }
  53. .public_second_hand > .goods > .goods-list {
  54.     padding: 10px;
  55.     box-sizing: border-box;
  56.     flex-basis: 800px;
  57.     display: flex;
  58.     flex-flow: row wrap;
  59.     justify-content: space-between;
  60. }
  62. .public_second_hand > .goods > .goods-list > .intro {
  63.     width: 178px;
  64.     height: 200px;
  65.     display: flex;
  66.     flex-flow: column nowrap;
  67.     justify-content: space-between;
  68. }
  69. .public_second_hand > .goods > .goods-list > .intro img {
  71.     border-radius: 5px;
  72.     border: 1px solid #cccccc;
  73.     box-sizing: border-box;
  75. }
  76. .public_second_hand > .goods > .goods-list > .intro span:first-child {
  77.     color: red;
  78. }
  79. .public_second_hand > .goods > .goods-list > .intro div {
  80.     display: flex;
  81.     justify-content: space-between;
  82. }
  83. .public_second_hand > .goods > .goods-list > .intro span:last-child {
  84.     color: white;
  85.     background-color: lightseagreen;
  86.     padding:0 5px;
  87.     margin-left: auto;
  88. }
  89. /*功能快速入口区*/
  90. .public_second_hand > .goods  > .quick-entry {
  91.      flex-basis: 400px;
  92.      padding: 10px;
  93.      display: flex;
  94.      flex-flow: row wrap;
  95.      justify-content: space-between;
  97.  }
  99. .public_second_hand > .goods  > .quick-entry img{
  100.     width: 190px;
  101.     height: 130px;
  102.     }
  103. .public_second_hand > .goods  > .quick-entry > div{
  104.     width: 400px;
  105.     display: flex;
  106.     flex-flow: column nowrap;
  108. }
  109. .public_second_hand > .goods  > .quick-entry > div img{
  110.     width: 393px;
  111.     height: 60px;
  112.     display: flex;
  113.     flex-flow: column nowrap;
  115. }

评论

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="public_comment_reply.css">
  6.     <link rel="stylesheet" href="../../../static/font/iconfont.css">
  7.     <title>评论区与回复</title>
  8. </head>
  9. <body>
  10.    <div class="public-comment-reply">
  11. <!--       评论区-->
  12.        <div class="comment">
  13.            <h3>我要评论</h3>
  14.            <div>
  15.               <label for="comment">
  16.                   <img src="../../../static/images/user.png" alt="">
  17.               </label>
  18.                <textarea name="" id="comment" ></textarea>
  19.            </div>
  20.            <button>发表评论</button>
  21.        </div>
  22. <!--       回复区-->
  23.        <div class="reply">
  24.            <h3>最新回复</h3>
  25.            <div>
  26.                <img src="../../../static/images/user.png" alt="">
  27.                <div class="reply-detail">
  28.                    <span>用户昵称</span>
  29.                    <span>留言内容</span>
  30.                    <div class="dianzan">
  31.                        <span>时间</span>
  32.                        <span><i class="iconfont icon-dianzan"></i>回复</span>
  33.                    </div>
  34.                </div>
  35.            </div>
  36.            <div>
  37.                <img src="../../../static/images/user.png" alt="">
  38.                <div class="reply-detail">
  39.                    <span>用户昵称</span>
  40.                    <span>留言内容</span>
  41.                    <div class="dianzan">
  42.                        <span>时间</span>
  43.                        <span><i class="iconfont icon-dianzan"></i>回复</span>
  44.                    </div>
  45.                </div>
  46.            </div>
  47.            <div>
  48.                <img src="../../../static/images/user.png" alt="">
  49.                <div class="reply-detail">
  50.                    <span>用户昵称</span>
  51.                    <span>留言内容</span>
  52.                    <div class="dianzan">
  53.                        <span>时间</span>
  54.                        <span><i class="iconfont icon-dianzan"></i>回复</span>
  55.                    </div>
  56.                </div>
  57.            </div>
  58.            <div>
  59.                <img src="../../../static/images/user.png" alt="">
  60.                <div class="reply-detail">
  61.                    <span>用户昵称</span>
  62.                    <span>留言内容</span>
  63.                    <div class="dianzan">
  64.                        <span>时间</span>
  65.                        <span><i class="iconfont icon-dianzan"></i>回复</span>
  66.                    </div>
  67.                </div>
  68.            </div>
  70.            </div>
  72.    </div>
  73. </body>
  74. </html>

CSS样式

  1. @import "../../public/public_reset.css";
  3. .public-comment-reply{
  4.     padding: 15px;
  5.     box-sizing: border-box;
  6.     background-color: #fff;
  7.     display: flex;
  8.     flex-flow: column nowrap;
  9. }
  11. .public-comment-reply img{
  12.     width: 60px;
  13.     height: 60px;
  14.     border-radius: 5px;
  15.     box-shadow: 1px 1px 5px #cccccc;
  16. }
  17. .public-comment-reply > .comment{
  18.     display: flex;
  19.     flex-flow: column nowrap;
  20. }
  21. .public-comment-reply > .comment{
  22.     display: flex;
  23.     flex-flow: column nowrap;
  24. }
  25. .public-comment-reply .comment > h3{
  26.     border-top: 1px solid #cccccc;
  27.     padding: 20px 0;
  28. }
  30. .public-comment-reply .comment > div{
  31.     padding: 15px 0;
  32.     height: 200px;
  33.     display: flex;
  34.     flex-flow: row nowrap;
  35. }
  36. .public-comment-reply .comment > div img{
  37.     align-self: start;
  38. }
  39. .public-comment-reply .comment > div textarea{
  40.     height: 200px;
  41.     margin-left: 20px;
  42.     resize: none;/*使得文本域不会被拉伸*/
  43.     flex: 1;
  44. }
  45. .public-comment-reply .comment > div textarea:hover{
  46.     box-shadow: 0 0 5px #888888;
  47. }
  48. .public-comment-reply .comment >button{
  49.     font-size: 14px;
  50.     background-color: #f64c59;
  51.     border: none;
  52.     width: 150px;
  53.     height: 40px;
  54.     align-self: end;
  55. }
  56. .public-comment-reply .comment >button:hover {
  57.     background-color: #178cee;
  58.     box-shadow: 0 0 8px #888888;
  59.     cursor: pointer;
  60. }
  61. /*回复区*/
  62. .public-comment-reply > .reply{
  63.     display: flex;
  64.     flex-flow: column nowrap;
  65.     padding: 20px 0;
  66. }
  67. .public-comment-reply > .reply h3{
  68.     font-size: 16px;
  69.     padding: 20px 0;
  70. }
  71. .public-comment-reply > .reply > div{
  72.     display: flex;
  73.     flex-flow: row nowrap;
  74.     margin-top: 20px;
  75. }
  76. .public-comment-reply > .reply > div img{
  77.     align-self: center;
  78. }
  79. .public-comment-reply > .reply > .reply-detail{
  80.     display: flex;
  81.     flex-flow: column nowrap;
  82. }
  83. .public-comment-reply > .reply  > div > .reply-detail{
  84.     display: flex;
  85.     flex-flow: column nowrap;
  86.     flex: 1;
  87.     height: 90px;
  88.     margin-left: 20px;
  89.     justify-content: space-between;
  90. }
  91. .public-comment-reply > .reply  > div > .reply-detail > .dianzan{
  92.     display: flex;
  93.     flex-flow: row nowrap;
  94.     justify-content: space-between;/* 或者使用下面的*/
  95. }
  96. /*.public-comment-reply > .reply  > div > .reply-detail > .dianzan > span:last-child{*/
  97. /*    margin-left: auto;*/
  98. /*}*/
  100. /*.public-comment-reply > .reply  > div > .reply-detail > .dianzan i{*/
  101. /*    color: red;*/
  102. /*    font-size: 1.5rem;*/
  103. /*}*/
  104. .public-comment-reply > .reply  > div > .reply-detail > .dianzan i:hover{
  105.     color: red;
  106. }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：看线框图, 还不错
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！