阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      CSS+js 有序排行

      HTML 代码如下:

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8"/>
          <title>无序列表CSS3</title>
          <link rel="stylesheet"href="css/main.css"/>
      </head>
      <body>
      <div class="wrap">
          <ol id="ol1" class="list">
              <!--<li><a href="" target="_blank"></a></li>-->
          </ol>
      </div>
      <script>
          var str = '';
          var data = [
                      { url : 'javascript:;', title : '朱安邦朱安邦' },
                      { url : 'javascript:;', title : '朱安邦' },
                      { url : 'javascript:;', title : '朱安邦朱安邦' },
                      { url : 'javascript:;', title : '朱安邦朱邦' },
                      { url : 'javascript:;', title : '朱安朱安邦' },
                      { url : 'javascript:;', title : '朱邦朱安邦' },
                      { url : 'javascript:;', title : '朱安邦朱安邦安邦朱安邦' },
                      { url : 'javascript:;', title : '朱安邦朱安安邦朱安邦' },
                      { url : 'javascript:;', title : '朱安安邦朱安邦' },
                      { url : 'javascript:;', title : '查看本页实现原理' }
          ];
          data.forEach(function(item){
              str+='<li><a href="'+item.url+'" target="_blank">'+item.title+'</a></li>'
          });
          document.getElementById('ol1').innerHTML = str;
      </script>
      </body>
      </html>
      

      CSS 代码如下

      /*清楚样式*/
      body,ol,div,li{  margin: 0;  padding: 0; font-size: 18px;font-family: "微软雅黑"; }
      a {text-decoration: none;color: #101010}
      a:hover {  text-decoration: none;}
      /*正式部分*/
      .wrap {  width: 500px;  font-size: 22px;  margin: 20px auto 0;}
      .list {  padding: 0 60px;}
      .list li {line-height: 50px;  border-bottom: 1px solid #CCC;  }
      .list li a {display: block;padding: 5px 10px;  transition: all 0.6s;  }
      .list li:nth-last-child(1) a{color: #ff0000;}
      .list li a:hover {
          /*text-indent首行缩进的,效果的主要*/
          text-indent: 25px;
          border-radius: 5px;
          color: #fff;
          text-shadow: 0 2px 1px #360;
          background-color: #393;
          /*下面是四套渐变的,没写欧朋的*/
          background-image: -webkit-linear-gradient(top,#62c462,#51a351);
          background-image: -moz-linear-gradient(top,#62c462,#51a351);
          background-image: -ms-linear-gradient(top,#62c462,#51a351);
          background-image: linear-gradient(top,#62c462,#51a351);
      }
      
      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      本文目录
      目录