简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 2019年12月26日作业
Blogger Information
Blog 7
fans 0
comment 0
visits 4766
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
2019年12月26日作业
涡流
Original
481 people have browsed it

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. }
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！