24为师网页的分析

Posted 2020-08-05

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了24为师网页的分析相关的知识，希望对你有一定的参考价值。

　　24为师网站地址：https://24ways.org/，比较突出的效果就是右上角翻页出现作者头像的效果，见猎心喜，于是模仿写了一个，没有用animate，辛勤的你可以优化一下，顺便指点下。

　　实现的效果：1.当鼠标位于文章上方时，右上角翻页，出现作者头像。

　　　　　　　　2.文章高度自适应

　　以下是代码（调代码用的时间太长了，好累，css内嵌在style里，脚本内嵌在script里都不长，内容比较长的是文档结构，博客就懒得美化了）

<!DOCTYPE html>
<html>
    <head>
        <title>pageRight</title>
        <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script src="https://common.cnblogs.com/script/jquery.js"></script>
      <style>
          *{
              box-sizing: border-box;
          }
          html{
              background: gray;
          }
          h3,
          p{
              font-family: Helvetica, Arial;
              font-size: 16px;
          }
          h3{
              color: #275C83;
              font-size: 2em;
              width: 5em;
          }
          ol{
              list-style:none;
          }
          li{

              display: list-item;
              float: left;
          }
          div.content{
              margin-top: 0;
              padding-top: 20px;
          }
          div.article{
              display: inline-block;
              margin-top: 0;
              margin-right: 50px;
              padding-left: 1em;
              width: 400px;
              background: white;
          }
          .writer{
              position: relative;
          }
          .writer .mask{
              display: block;
              position: absolute;
              top: 0;
              right: 0;
              width: 100px;
              height: 100px;
              border-bottom: 100px solid white;
              border-right: 100px solid #bbb;
              z-index: 2;
          }
          .mask
          .writer a{
              position: absolute;
              height: 100px;
              width: 100px;
              top: 0;
              right: 0;
              display: block;
          }
          .writer .pic{
              position: absolute;
              top: 0;
              right: 0;
              display: block;
              width: 6em;
              height: 6em;
              background: url("http://images.cnblogs.com/cnblogs_com/carryme15/869262/o_swirl_pattern.png") no-repeat;
              z-index: 1;
          }
      </style>
  </head>
  <body>
  
  <div class="content">
      <ol>
          <li>
              <div class="article">
                  <div class="writer">
                      <div class="mask"></div>
                      <div class="pic"></div>
                  </div>
                  <h3>No One Fight</h3>
                  <p>sfasdfsdfsfdsfs</p>
                  <p>sitdown go aford sha kima shag</p>
                  <p>sfasdfsdfsfdsfs</p>
                  <p>sitdown go aford sha kima shag</p>
                  <p>sfasdfsdfsfdsfs</p>
                  <p>sitdown go aford sha kima shag</p>
                  <p>sfasdfsdfsfdsfs</p>
              </div>
          <li>
              <div class="article">
                  <div class="writer">
                      <div class="mask"></div>
                      <div class="pic"></div>
                  </div>
                  <h3>Good Man Die</h3>
                  <p>sitdown go aford sha kima shag</p>
                  <p>sfasdfsdfsfdsfs</p>
              </div>
          </li>
      </ol>
    </div>
      <script>
          $(document).ready(function(){
              //height auto高度自适应
              var ars = $(".article");
              $.each(ars,function(i,a){
                  if(i%2==0){
                      if($(a).height()>$(ars).eq(i+1).height()){
                          $(ars).eq(i+1).height($(a).height());
                      }
                      else{
                          $(a).height($(ars).eq(i+1).height());
                      }
                  }
              });
              //hover特效
              $(".article").hover(function(){
                   $(this).find(".mask").css({"borderBottom": "100px solid #CA1111",
               "borderRight": "100px solid transparent"});
               },
              function(){
                   $(this).find(".mask").css({"border-bottom": "100px solid white",
                   "border-right": "100px solid #bbb"});
               });
          });
      </script>
  </body>
</html>

以上是关于24为师网页的分析的主要内容，如果未能解决你的问题，请参考以下文章

HTML代码片段

炫酷 CSS 背景效果的 10 个代码片段

2021-12-24：划分字母区间。字符串 S 由小写字母组成。我们要把这个字符串划分为尽可能多的片段，同一字母最多出现在一个片段中。返回一个表示每个字符串片段的长度的列表。力扣763。某大厂面试

HTML5期末大作业：餐饮美食网站设计——咖啡(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计咖啡网页设计美食餐饮网页设计...(代码片段

微信小程序代码片段

网页与mysql数据库怎么连接?