Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 13 pc网页一个模块的实战
Blogger Information
Blog 62
fans 2
comment 1
visits 42290
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
13 pc网页一个模块的实战
老黑
Original
559 people have browsed it

实战-模拟PHP中文网网页的一个内容
网页原内容如下：

自己做的内容如下：

自己的代码：
html部分

  1. <body>
  2.     <div class="container">
  3.         <div class="items1">
  4.             <img class="img" src="img/0.bmp" alt="">
  5.         </div>
  7.         <div class="items">
  8.             <img class="img" src="img/1.bmp" alt="">
  9.             <div class="ele"><a href="">
  10.                 <div class="ele1">
  11.                     <h3 class="p1" >
  12.                         <i class="p2">初级</i>
  13.                         CSS视频教程-玉女心经版
  14.                     </h3>
  15.                     <p class="p3"></p>
  16.                 </div>
  17.                 <div class="ele2">
  18.                     <p class="p4">10W+次播放</p>
  19.                 </div>
  20.             </a>
  21.             </div>           
  22.         </div>
  23. </body>

css部分

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5.   font-size: 14px;
  6. }
  7. a,p {
  8.   text-decoration: none;
  9. }
  10. .container {
  11.   width: 1080px;
  12.   height: 580px;
  13.   display: grid;
  14.   grid-template-columns: repeat(5, 200px);
  15.   grid-template-rows: repeat(3, 165px);
  16.   gap: 12px;
  17.   margin: auto;
  18. }
  20. .items1 {
  21.   grid-row: span 2;
  22. }
  24. .items1 > img {
  25. box-shadow: 0px 0px 10px #000;
  26. }
  28. .items {
  29.   width: 200px;
  30.   height: 180px;
  31.   position: relative;
  32.   border-radius: 5%;  /*圆角情况*/
  33. }
  35. .ele > a {
  36.   box-shadow: 0px 0px 10px #000;
  37.   border-radius: 5%;
  38.   position: absolute;
  39.   top: 95px;
  40.   width: 200px;
  41.   height: 65px;
  42.   background-color: white;
  43. }
  44. .ele > a:hover {
  45.   height: 95px;    /*点击后高度增加30px，对应的下面的顶部位置也向上移30px*/
  46.   position: absolute;
  47.   top: 65px;  /*位置向上移动30px，起到一个向上扩展的效果*/
  48.   display: flex;
  49.   flex-direction: column;
  50.   justify-content: space-between;
  51.   transition-duration: 0.5s; /*整个过程延续0.5s，就有一种舒缓的感觉。至于鼠标离开后的反馈后面也可以考虑下*/
  52. }
  53. img {
  54.   width: 200px;
  55.   float: right;
  56.   border-radius: 5%;
  57. }
  58. .p2 {
  59.   background-color: grey;
  60.   color: white;
  61. }
  62. h3 {
  63.   font-size: 17px;
  64. }
  • ① 一个讲解：向上浮动。自己的实现。
  1. .ele > a {
  2.   box-shadow: 0px 0px 10px #000;
  3.   border-radius: 5%;
  4.   position: absolute;
  5.   top: 95px;
  6.   width: 200px;
  7.   height: 65px;
  8.   background-color: white;
  9. }
  10. .ele > a:hover {
  11.   height: 95px;    /*点击后高度增加30px，对应的下面的顶部位置也向上移30px*/
  12.   position: absolute;
  13.   top: 65px;  /*位置向上移动30px，起到一个向上扩展的效果*/
  14.   display: flex;
  15.   flex-direction: column;
  16.   justify-content: space-between;
  17.   transition-duration: 0.5s; /*整个过程延续0.5s，就有一种舒缓的感觉。至于鼠标离开后的反馈后面也可以考虑下*/
  18. }

  • 老司机的实现方式

    1.     .courses-list > .container > .course .desc {
    2.       display: grid;
    3.       place-content: space-between;
    4.       min-height: 84px;/*这个地方是关键*/
    5.       background-color: #fff;
    6.       border-radius: 5%;
    7.       padding: 10px;
    8.       position: relative;
    9.       top: -42px;   /*这个地方是关键*/
    10.     }
    11.     .courses-list > .container > .course .desc:hover {
    12.       min-height: 130px;/*这个地方是关键*/
    13.       cursor: pointer;
    14.       position: relative;
    15.       top: -90px;/*这个地方是关键*/
    16.     }

  • ② 老司机内部部位的实现，
    老司机的：

    1.       <div class="course">
    2.         <a href=""><img src="lesson.jpg" alt="" /></a>
    3.         <div class="desc">
    4.           <a href=""><span>初级</span>30分钟学会网站布局</a>
    5.           <span>6W+播放</span>
    6.         </div>
    7.       </div>

    自己的：

    1.       <div class="items">
    2.           <img class="img" src="img/1.bmp" alt="">
    3.           <div class="ele"><a href="">
    4.               <div class="ele1">
    5.                   <h3 class="p1" >
    6.                       <i class="p2">初级</i>
    7.                       CSS视频教程-玉女心经版
    8.                   </h3>
    9.                   <p class="p3"></p>   <!--这块本来是想着放增加的内容。这个内容的添加可以通过伪类的js来实现-->
    10.               </div>
    11.               <div class="ele2">
    12.                   <p class="p4">10W+次播放</p>
    13.               </div>
    14.           </a>
    15.           </div>           
    16.       </div>
Correcting teacher：GuanhuiGuanhui

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