Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 12月26号作业吗
Blogger Information
Blog 18
fans 0
comment 0
visits 10857
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
12月26号作业吗
- 迷舍人
Original
662 people have browsed it

注意容器和项目 别再套盒子中混掉 然后就是在html中不要写错是在那个div中


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="pulic_second_hand.css">
  6.     <title>公共二手交易区</title>
  7. </head>
  8. <body>
  9.     <!--引入大标题-->
  10.     <div class="public-headline">
  11.         <span>二手交易</span>
  12.     </div>
  13.     <!-- 二手交易专区-->
  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="">国内美女</a>
  27.             <a href="">AV美女</a>
  28.         </div>
  29.         <!--商品展示区-->
  30.         <div class="goods">
  31.             <div class="goods-list">
  32.                 <div class="intro">
  33.                     <a href=""><img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  34.                     <a href="">美女性感写真海报艺术装饰糊涂贴纸1</a>
  35.                     <div>
  36.                         <span>&yen;333</span>
  37.                         <span>美女</span>
  38.                     </div>
  39.                 </div>
  40.                 <div class="intro">
  41.                     <a href=""><img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  42.                     <a href="">美女性感写真海报艺术装饰糊涂贴纸1</a>
  43.                     <div>
  44.                         <span>&yen;333</span>
  45.                         <span>美女</span>
  46.                     </div>
  47.                 </div>
  48.                 <div class="intro">
  49.                     <a href=""><img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  50.                     <a href="">美女性感写真海报艺术装饰糊涂贴纸1</a>
  51.                     <div>
  52.                         <span>&yen;333</span>
  53.                         <span>美女</span>
  54.                     </div>
  55.                 </div>
  56.                 <div class="intro">
  57.                     <a href=""><img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  58.                     <a href="">美女性感写真海报艺术装饰糊涂贴纸1</a>
  59.                     <div>
  60.                         <span>&yen;333</span>
  61.                         <span>美女</span>
  62.                     </div>
  63.                 </div>
  64.                 <div class="intro">
  65.                     <a href=""><img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  66.                     <a href="">美女性感写真海报艺术装饰糊涂贴纸1</a>
  67.                     <div>
  68.                         <span>&yen;333</span>
  69.                         <span>美女</span>
  70.                     </div>
  71.                 </div>
  72.                 <div class="intro">
  73.                     <a href=""><img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  74.                     <a href="">美女性感写真海报艺术装饰糊涂贴纸1</a>
  75.                     <div>
  76.                         <span>&yen;333</span>
  77.                         <span>美女</span>
  78.                     </div>
  79.                 </div>
  80.                 <div class="intro">
  81.                     <a href=""><img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  82.                     <a href="">美女性感写真海报艺术装饰糊涂贴纸1</a>
  83.                     <div>
  84.                         <span>&yen;333</span>
  85.                         <span>美女</span>
  86.                     </div>
  87.                 </div>
  88.                 <div class="intro">
  89.                     <a href=""><img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
  90.                     <a href="">美女性感写真海报艺术装饰糊涂贴纸1</a>
  91.                     <div>
  92.                         <span>&yen;333</span>
  93.                         <span>美女</span>
  94.                     </div>
  95.                 </div>
  96.             </div>
  97.             <!-- 右侧功能入口-->
  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/ad2.jpg" alt=""></a>
  105.                     <a href=""><img src="../../static/images/ad/image.png" alt=""></a>
  106.                 </div>
  107.         </div>
  109.     </div>
  110. </body>
  111. </html>
  1. /*引入公共样式*/
  2. @import "../public_teset.css";
  3. /*引入大标题*/
  4. @import "../public_headline/public_headline.css";
  7. .public-second-hand{
  8.     width: 1200px;
  9.     padding: 10px;
  10.     box-sizing: border-box;
  11.     margin: auto;
  12.     background-color: #fff;
  13. }
  14. .public-second-hand:hover{
  15.     box-shadow: 0 0 8px #888888;
  16. }
  17. .public-second-hand > .title1 {
  18.     height: 40px;
  19.     border-bottom: 1px #888888 solid;
  20.     box-sizing: border-box;
  21. }
  22. .public-second-hand > .title1 > a{
  23.     font-size: 20px;
  24.     margin-right: 20px;
  25. }
  26. .public-second-hand > .title1 > span{
  27.     color:red;
  28. }
  29. .public-second-hand > .title2{
  30.     height: 40px;
  31.     line-height: 40px;
  32. }
  33. .public-second-hand > .title2 > span{
  34.     color: red;
  35.     margin-right: 10px;
  36.     font-size: 18px;
  37. }
  38. .public-second-hand > .title2 > a{
  39.     padding: 0 10px;
  40. }
  41. .public-second-hand > .title2 > a:hover{
  42.     color: #bd2c00;
  43. }
  45. /*商品展示区*/
  46. .public-second-hand > .goods{
  47.     height: 440px;
  48.     display: flex;
  49. }
  50. .public-second-hand > .goods > .goods-list{
  51.     padding: 10px;
  52.     flex-basis: 800px;
  53.     display: flex;
  54.     flex-flow: row wrap;
  55.     justify-content: space-between;
  56. }
  57. .public-second-hand  > .goods >.goods-list > .intro{
  58.     width: 178px;
  59.     height: 200px;
  60.     display: flex;
  61.     flex-flow: column nowrap;
  62.     justify-content: space-between;
  63. }
  64. .public-second-hand  > .goods > .goods-list > .intro > div > span:first-of-type{
  65.     color: red;
  66. }
  67. .public-second-hand  > .goods > .goods-list > .intro > div > span:last-of-type{
  68.     background-color: #55a532;
  69.     color: #f5f2f0;
  70.     padding: 0 5px;
  71.     margin-left: auto;
  72.     margin-right: 5px;
  73. }
  74. .public-second-hand  > .goods > .goods-list > .intro > div{
  75.     display: flex;
  76. }
  78. /*快速入口*/
  79. .public-second-hand  > .goods >.quick-entry{
  80.     flex-basis: 400px;
  81.     padding: 10px;
  82.     display: flex;
  83.     flex-flow: row wrap;
  84.     justify-content: space-between;
  85. }
  86. .public-second-hand  > .goods >.quick-entry >a  img{
  87.     width: 190px;
  88.     height: 130px;
  89. }
  90. .public-second-hand  > .goods >.quick-entry > div{
  91.     width: 400px;
  92.     display: flex;
  93.     flex-direction: column;
  94. }
  95. .public-second-hand  > .goods >.quick-entry > div img{
  96.     width: 393px;
  97.     height: 60px;
  98. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>评论回复组件</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.         <!--评论区-->
  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="detail">
  28.                         <span>用户名称</span>
  29.                         <span>留言内容:PHP学习!加油.努力!!</span>
  30.                         <div>
  31.                             <span>
  32.                                 2019-11.11 12:22:33发表
  33.                             </span>
  34.                             <span>
  35.                                 <i class="iconfont icon-dianzan"></i>回复
  36.                             </span>
  37.                         </div>
  38.                     </div>
  39.                 </div>
  40.                 <div>
  41.                     <img src="../../static/images/user.png" alt="">
  42.                     <div class="detail">
  43.                         <span>用户名称</span>
  44.                         <span>留言内容:PHP学习!加油.努力!!</span>
  45.                         <div>
  46.                             <span>2019-11.11 12:22:33发表</span>
  47.                             <span><i class="iconfont icon-dianzan"></i>回复</span>
  48.                         </div>
  49.                     </div>
  50.                 </div>
  51.                 <div>
  52.                     <img src="../../static/images/user.png" alt="">
  53.                     <div class="detail">
  54.                         <span>用户名称</span>
  55.                         <span>留言内容:PHP学习!加油.努力!!</span>
  56.                         <div>
  57.                             <span>2019-11.11 12:22:33发表</span>
  58.                             <span><i class="iconfont icon-dianzan"></i>回复</span>
  59.                         </div>
  60.                     </div>
  61.                 </div>
  62.                 <div>
  63.                     <img src="../../static/images/user.png" alt="">
  64.                     <div class="detail">
  65.                         <span>用户名称</span>
  66.                         <span>留言内容:PHP学习!加油.努力!!</span>
  67.                         <div>
  68.                             <span>2019-11.11 12:22:33发表</span>
  69.                             <span><i class="iconfont icon-dianzan"></i>回复</span>
  70.                         </div>
  71.                     </div>
  72.                 </div>
  75.         </div>
  76.     </div>
  77. </body>
  78. </html>
  1. /*引入公共样式*/
  2. @import "../public_teset.css";
  4. .public-comment-reply {
  5.     padding: 15px;
  6.     box-sizing: border-box;
  7.     background-color: #ffffff;
  8.     display: flex;
  9.     flex-direction: column;
  10. }
  12. /*图片大小*/
  13. .public-comment-reply > .comment > div img{
  14.     width: 60px;
  15.     height: 60px;
  16. }
  17. .public-comment-reply > .reply > div img{
  18.     width: 60px;
  19.     height: 60px;
  20. }
  22. .public-comment-reply > .comment > h3{
  23.     padding: 10px;
  24.     border-top: #cccccc 1px solid;
  25. }
  26. .public-comment-reply > .comment {
  27.     display: flex;
  28.     flex-direction: column;
  29. }
  30. .public-comment-reply > .comment > div {
  31.   padding: 15px;
  32.     height: 200px;
  33.     display: flex;
  34.     flex-flow: row nowrap;
  35. }
  36. .public-comment-reply > .comment > div img{
  37.     align-self: flex-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 > button{
  46.     width: 70px;
  47.     height: 40px;
  48.     background-color: #df5000;
  49.     border: none;
  50.     color: #cccccc;
  51.     margin-left: auto;
  52. }
  53. .public-comment-reply > .comment > button:hover{
  54.     background-color: #0086b3;
  55.     display: flex;
  56.     flex-direction: column;
  57.     padding: 15px 0;
  58. }
  60. .public-comment-reply > .reply > h3 {
  61.     padding: 15px;
  62. }
  65. .public-comment-reply > .reply > div {
  66.     display: flex;
  67.     /*每条回复之间有间隙*/
  68.     margin-top: 30px;
  69. }
  71. /*头像居中*/
  72. .public-comment-reply > .reply > div > img {
  73.     align-self: center;
  74. }
  76. /*回复详情垂直排列三行*/
  77. .public-comment-reply > .reply > div .detail {
  78.     /*回复详情占据水平剩余全部空间*/
  79.     flex:auto;
  81.     display: flex;
  82.     flex-direction: column;
  83.     margin-left: 20px;
  84.     /*必须设置高度, 否则主轴无法产生剩余空间*/
  85.     height: 90px;
  86.     justify-content: space-between;
  87. }
  90. .public-comment-reply > .reply > div > .detail > div {
  91.     display: flex;
  92.     flex-direction: row;
  93.     /*二端对齐*/
  94.     justify-content: space-between;
  95. }
  98. .public-comment-reply > .reply > div .detail > div i {
  99.     color: red;
  100.     font-size: 1.2rem;
  101.     margin-right: 5px;
  102. }
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