阿西河

所有教程

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

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    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的教程都有!

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

    目录
    本文目录
    目录