登录  /  注册
首页 > 博客列表 > 13 pc网页一个模块的实战
博主信息
博文 62
粉丝 2
评论 1
访问量 40488
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
13 pc网页一个模块的实战
老黑
原创
537人浏览过

实战-模拟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>
批改老师：GuanhuiGuanhui

批改状态：合格

老师批语：可以把课程标题美化美化！
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录