search

博客列表 >前端学习-1226号作业

前端学习-1226号作业

天
天原创
2020年01月06日 17:13:46495浏览

效果图展示

布局思路：最主要的是先行分析整个布局方案，从上到下，从左到右，先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. }
上一条：精选 - 微信域名检测接口（微信官方api）和请求示例下一条：前端学习-1227号作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多