为何没有在ol里添加li元素,Web开发,技术交流,鱼C论坛

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

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

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]

鱼C论坛's Archiver

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