设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 为何没有在ol里添加li元素
返回列表 发新帖
查看: 2048|回复: 5

[已解决]为何没有在ol里添加li元素

[复制链接]
小黄练编程
发表于 2022-4-9 17:25:16 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x 
<!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>
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

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>
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

小黄练编程
 楼主| 发表于 2022-4-10 11:45:23 | 显示全部楼层
ba21 发表于 2022-4-9 21:42

大哥咋解决我最新的帖子那个问题啊，我那方法错哪了。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

ba21
发表于 2022-4-10 12:27:37 | 显示全部楼层
小黄练编程 发表于 2022-4-10 11:45
大哥咋解决我最新的帖子那个问题啊，我那方法错哪了。

回答不上
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

小黄练编程
 楼主| 发表于 2022-4-10 14:03:28 | 显示全部楼层
ba21 发表于 2022-4-10 12:27
回答不上

你给我改改也可以啊，我那个方法不是解决html5语义化标签的方法吗，还是那个方法就是错误的
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

小黄练编程
 楼主| 发表于 2022-4-10 14:06:26 | 显示全部楼层
ba21 发表于 2022-4-10 12:27
回答不上

我想得到的main的display的属性值目的就是看看语义化兼容问题有没有解决，也可以不会答那个问题，主要就是想知道我那个方法如何实现解决兼容问题。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-7-5 16:07

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表