search

博客列表 >12月26号作业吗

12月26号作业吗

- 迷舍人
- 迷舍人原创
2019年12月28日 12:00:21661浏览

注意容器和项目 别再套盒子中混掉 然后就是在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. }
上一条：12.20作业网页传统布局下一条：微信中点击链接弹出防封遮罩层强制使用浏览器打开页面的最新实现方式
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多