小黄练编程 发表于 2022-4-9 17:25:16

为何没有在ol里添加li元素

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>滚动轮播图</title>
                <style>
                *{
                        padding:0;
                        margin:0;
                }
                .span1{
                        position:absolute;
                        top:50%;
                        left:0;
                        width:40px;
                        height:40px;
                        background-color:rgba(150,100,100,.6);
                        cursor:pointer;
                }
                .span2{
                        position:absolute;
                        top:50%;
                        right:0;
                        width:40px;
                        height:40px;
                        background-color:red;
                        background-color:rgba(150,100,100,.6);
                        cursor:pointer;
                }
                .main{
                        position:relative;
                        width:400px;
                        height:400px;
                        background-color:gray;
                        margin:0 auto;
                }
                .main img{
                        width:400px;
                        height:400px;
                       
                }
                       
                ul{
                        display:flex;
                        width:1600px;
                        height:400px;
                        background-color:red;
                }
                ul li{
                        /* float:left; */
                        list-style:none;
                }
                .em1{
                        display:block;
                        width:20px;
                        height:20px;
                        /* background-color:yellow; */
                        margin:0 auto;
                        margin-top:5px;
                        border:5px solid #fff;
                        border-bottom:none;
                        border-right:none;
                        transform:rotate(-45deg);
                }
                .em2{       
                        display:block;
                        width:20px;
                        height:20px;
                        /* background-color:yellow; */
                        margin:0 auto;
                        margin-top:5px;
                        border:5px solid #fff;
                        border-bottom:none;
                        border-right:none;
                        transform:rotate(135deg);
                        }
                ol{
                          position:absolute;
                                /* top:50%;*/
                                bottom:5%;
                                left:25%;
                                width:200px;
                                height:40px;
                                background-color:red;
                        }
                        ol li{
                                width:5px;
                                height:5px;
                                border-radius:50%;
                                border:3px solid black;
                        }
                </style>
        </head>
        <body>
                <div class='main'>
                        <ul>
                                <li><img src='img/24_404_15a398a36e51a9e.gif'></li>
                                <li><img src='img/24_404_7f5a32ac20ee3ef.gif'></li>
                                <li><img src='img/24_404_8675904ec7935f2.gif'></li>
                                <li><img src='img/24_404_e52d2c605f2fb83.gif'></li>
                        </ul>
                        <ol>
                        </ol>
                        <span class="span1"><em class='em1'></em></span>
                        <span class="span2"><em class='em2'></em></span>
                </div>
                <script>
                var ul=document.querySelector('ul');
                var ol=document.querySelector('ol');
                var lis=document.querySelector('li');
                for(var i=0; i<lis.length;i++){
                       var li=document.createElement('li');
                       ol.appendChild(li);
                }/////////////////////////////////////
       
                </script>
        </body>
</html>

ba21 发表于 2022-4-9 21:42:09

<!DOCTYPE html>
<html>
      <head>
                <meta charset="utf-8">
                <title>滚动轮播图</title>
                <style>
                *{
                        padding:0;
                        margin:0;
                }
                .span1{
                        position:absolute;
                        top:50%;
                        left:0;
                        width:40px;
                        height:40px;
                        background-color:rgba(150,100,100,.6);
                        cursor:pointer;
                }
                .span2{
                        position:absolute;
                        top:50%;
                        right:0;
                        width:40px;
                        height:40px;
                        background-color:red;
                        background-color:rgba(150,100,100,.6);
                        cursor:pointer;
                }
                .main{
                        position:relative;
                        width:400px;
                        height:400px;
                        background-color:gray;
                        margin:0 auto;
                }
                .main img{
                        width:400px;
                        height:400px;
                        
                }
                        
                ul{
                        display:flex;
                        width:1600px;
                        height:400px;
                        background-color:red;
                }
                ul li{
                        /* float:left; */
                        list-style:none;
                }
                .em1{
                        display:block;
                        width:20px;
                        height:20px;
                        /* background-color:yellow; */
                        margin:0 auto;
                        margin-top:5px;
                        border:5px solid #fff;
                        border-bottom:none;
                        border-right:none;
                        transform:rotate(-45deg);
                }
                .em2{      
                        display:block;
                        width:20px;
                        height:20px;
                        /* background-color:yellow; */
                        margin:0 auto;
                        margin-top:5px;
                        border:5px solid #fff;
                        border-bottom:none;
                        border-right:none;
                        transform:rotate(135deg);
                        }
                ol{
                            position:absolute;
                              /* top:50%;*/
                              bottom:5%;
                              left:25%;
                              width:200px;
                              height:40px;
                              background-color:red;
                        }
                        ol li{
                              width:5px;
                              height:5px;
                              border-radius:50%;
                              border:3px solid black;
                        }
                </style>
      </head>
      <body>
                <div class='main'>
                        <ul>
                              <li><img src='img/24_404_15a398a36e51a9e.gif'></li>
                              <li><img src='img/24_404_7f5a32ac20ee3ef.gif'></li>
                              <li><img src='img/24_404_8675904ec7935f2.gif'></li>
                              <li><img src='img/24_404_e52d2c605f2fb83.gif'></li>
                        </ul>
                        <ol>
                        </ol>
                        <span class="span1"><em class='em1'></em></span>
                        <span class="span2"><em class='em2'></em></span>
                </div>
                <script>
                var ul=document.querySelector('ul');
                var ol=document.querySelector('ol');
                var lis=document.querySelector('li');
                for(var i=0; i<4;i++){
                        var text=document.createTextNode("test"+i);
                         var li=document.createElement('li');
                         li.appendChild(text)
                         ol.appendChild(li);
                }
      
                </script>
      </body>
</html>

小黄练编程 发表于 2022-4-10 11:45:23

ba21 发表于 2022-4-9 21:42


大哥咋解决我最新的帖子那个问题啊,我那方法错哪了。

ba21 发表于 2022-4-10 12:27:37

小黄练编程 发表于 2022-4-10 11:45
大哥咋解决我最新的帖子那个问题啊,我那方法错哪了。

回答不上

小黄练编程 发表于 2022-4-10 14:03:28

ba21 发表于 2022-4-10 12:27
回答不上

你给我改改也可以啊,我那个方法不是解决html5语义化标签的方法吗,还是那个方法就是错误的

小黄练编程 发表于 2022-4-10 14:06:26

ba21 发表于 2022-4-10 12:27
回答不上

我想得到的main的display的属性值目的就是看看语义化兼容问题有没有解决,也可以不会答那个问题,主要就是想知道我那个方法如何实现解决兼容问题。{:5_100:}
页: [1]
查看完整版本: 为何没有在ol里添加li元素