search

博客列表 >2019年12月26日作业

2019年12月26日作业

涡流
涡流原创
2019年12月27日 19:17:09484浏览

second-hand.html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <!--引入阿里字体图标库的css-->
  6.     <link rel="stylesheet" href="../static/font/iconfont.css">
  7.     <link rel="stylesheet" href="second-hand.css">
  8.     <title>二手交易</title>
  9. </head>
  10. <body>
  11.     <span class="iconfont icon-huiyuan1"></span>
  12.     <hr>
  14.     <!-- 标题1 -->
  15.     <div class="title1">
  16.         <a href="">抢好货</a>
  17.         <span>0低价，便捷，安全，快速</span>
  18.     </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.     </div>
  29.     <!-- 功能区 -->
  30.     <div class="func">
  31.         <div class="left">
  32.             <div class="intro">
  33.                 <img src="full_template/static/images/shop/shop6.jpg" alt="">
  34.                 <a href="">家用电器家用电器家用电器</a>
  35.                 <div class="des">
  36.                     <span>$ 333</span>
  37.                     <span>电器</span>
  38.                 </div>
  39.             </div>
  40.             <div class="intro">
  41.                 <img src="full_template/static/images/shop/shop6.jpg" alt="" width="176">
  42.                 <a href="">家用电器家用电器家用电器</a>
  43.                 <div class="des">
  44.                     <span>$ 333</span>
  45.                     <span>电器</span>
  46.                 </div>
  47.             </div>
  48.             <div class="intro">
  49.                 <img src="full_template/static/images/shop/shop6.jpg" alt="" width="176">
  50.                 <a href="">家用电器家用电器家用电器</a>
  51.                 <div class="des">
  52.                     <span>$ 333</span>
  53.                     <span>电器</span>
  54.                 </div>
  55.             </div>
  56.             <div class="intro">
  57.                 <img src="full_template/static/images/shop/shop6.jpg" alt="" width="176">
  58.                 <a href="">家用电器家用电器家用电器</a>
  59.                 <div class="des">
  60.                     <span>$ 333</span>
  61.                     <span>电器</span>
  62.                 </div>
  63.             </div>
  64.             <div class="intro">
  65.                 <img src="full_template/static/images/shop/shop6.jpg" alt="" width="176">
  66.                 <a href="">家用电器家用电器家用电器</a>
  67.                 <div class="des">
  68.                     <span>$ 333</span>
  69.                     <span>电器</span>
  70.                 </div>
  71.             </div>
  72.             <div class="intro">
  73.                 <img src="full_template/static/images/shop/shop6.jpg" alt="" width="176">
  74.                 <a href="">家用电器家用电器家用电器</a>
  75.                 <div class="des">
  76.                     <span>$ 333</span>
  77.                     <span>电器</span>
  78.                 </div>
  79.             </div>
  80.             <div class="intro">
  81.                 <img src="full_template/static/images/shop/shop6.jpg" alt="" width="176">
  82.                 <a href="">家用电器家用电器家用电器</a>
  83.                 <div class="des">
  84.                     <span>$ 333</span>
  85.                     <span>电器</span>
  86.                 </div>
  87.             </div>
  88.             <div class="intro">
  89.                 <img src="full_template/static/images/shop/shop6.jpg" alt="" width="176">
  90.                 <a href="">家用电器家用电器家用电器</a>
  91.                 <div class="des">
  92.                     <span>$ 333</span>
  93.                     <span>电器</span>
  94.                 </div>
  95.             </div>
  96.         </div>
  98.         <div class="right">
  99.             <div class="ad">
  100.                 <img src="full_template/static/images/ad/1.png" alt="" width="180">
  101.                 <img src="full_template/static/images/ad/2.png" alt="" width="180">
  102.                 <img src="full_template/static/images/ad/3.png" alt="" width="180">
  103.                 <img src="full_template/static/images/ad/4.png" alt="" width="180">
  104.             </div>
  105.             <img src="full_template/static/images/ad/image.png" alt="" width="380">
  106.             <img src="full_template/static/images/ad/ad2.jpg" alt="" width="380">
  107.         </div>
  108.     </div>
  111. </body>
  112. </html>

second-hand.css代码

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     font-size: 13px;
  5.     /* outline: 2px solid cyan; */
  6. }
  8. a {
  9.      text-decoration: none;
  10.  }
  12. .title1 {
  13.     width: inherit;
  14.     height: 50px;
  15.     border-bottom: 1px solid #cccccc;
  16.     padding: 10px;
  17.     box-sizing: border-box;
  18. }
  20. .title1 > a {
  21.     font-size: 23px;
  22. }
  24. .title1 > span {
  25.     margin-left: 20px;
  26.     color: red;
  27. }
  29. .title2 {
  30.     width: inherit;
  31.     height: 60px;
  32.     padding: 10px;
  33.     box-sizing: border-box;
  34. }
  36. .title2 > span {
  37.     font-size: 23px;
  38.     color: red;
  39. }
  41. .title2 > a {
  42.     margin-left: 10px;
  43. }
  45. .func {
  46.     width: 1200px;
  47.     display: flex;
  48.     margin: auto;
  50. }
  52. .func > .left {
  53.     width: 800px;
  54.     display: flex;
  55.     flex-flow: row wrap;
  56. }
  58. .func > .left > .intro {
  59.     display: flex;
  60.     flex-flow: column wrap;
  61.     margin: 10px;
  62. }
  64. .func > .left > .intro > img {
  65.     width: 176px;
  66. }
  68. .func > .left > .intro > .des {
  69.     display: flex;
  70.     flex-flow: row nowrap;
  71.     justify-content: space-between;
  72. }
  74. .func > .left > .intro > .des span:first-of-type {
  75.     color: red;
  76.     /* padding: 0 10px 0 10px; */
  77. }
  79. .func > .left > .intro > .des span:last-of-type {
  80.     color: white;
  81.     background-color: green;
  82.     padding: 0 10px 0 10px;
  83. }
  85. .func > .left > .intro > .des span:last-of-type:hover {
  86.     background-color: blue;
  87.     cursor: pointer;
  88. }
  90. .func > .right {
  91.     width: 400px;
  92.     display: flex;
  93.     flex-flow: column nowrap;
  94.     justify-content: space-between;
  95.     align-items: center;
  96.     margin: 5px;
  97. }
  99. .func > .right > .ad {
  100.     display: flex;
  101.     flex-flow: row wrap;
  102.     justify-content: space-between;
  103.     margin: 10px;
  104. }
  106. .func > .right > img {
  108. }
上一条：flex实战(二手交易区,翻页,评论组件)下一条：删除的微信聊天记录怎么恢复
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多