简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

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

12月26号作业吗

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

注意容器和项目 别再套盒子中混掉 然后就是在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 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多