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

鱼C论坛

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

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

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

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

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

x
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>滚动轮播图</title>
  6.                 <style>
  7.                 *{
  8.                         padding:0;
  9.                         margin:0;
  10.                 }
  11.                 .span1{
  12.                         position:absolute;
  13.                         top:50%;
  14.                         left:0;
  15.                         width:40px;
  16.                         height:40px;
  17.                         background-color:rgba(150,100,100,.6);
  18.                         cursor:pointer;
  19.                 }
  20.                 .span2{
  21.                         position:absolute;
  22.                         top:50%;
  23.                         right:0;
  24.                         width:40px;
  25.                         height:40px;
  26.                         background-color:red;
  27.                         background-color:rgba(150,100,100,.6);
  28.                         cursor:pointer;
  29.                 }
  30.                 .main{
  31.                         position:relative;
  32.                         width:400px;
  33.                         height:400px;
  34.                         background-color:gray;
  35.                         margin:0 auto;
  36.                 }
  37.                 .main img{
  38.                         width:400px;
  39.                         height:400px;
  40.                        
  41.                 }
  42.                        
  43.                 ul{
  44.                         display:flex;
  45.                         width:1600px;
  46.                         height:400px;
  47.                         background-color:red;
  48.                 }
  49.                 ul li{
  50.                         /* float:left; */
  51.                         list-style:none;
  52.                 }
  53.                 .em1{
  54.                         display:block;
  55.                         width:20px;
  56.                         height:20px;
  57.                         /* background-color:yellow; */
  58.                         margin:0 auto;
  59.                         margin-top:5px;
  60.                         border:5px solid #fff;
  61.                         border-bottom:none;
  62.                         border-right:none;
  63.                         transform:rotate(-45deg);
  64.                 }
  65.                 .em2{       
  66.                         display:block;
  67.                         width:20px;
  68.                         height:20px;
  69.                         /* background-color:yellow; */
  70.                         margin:0 auto;
  71.                         margin-top:5px;
  72.                         border:5px solid #fff;
  73.                         border-bottom:none;
  74.                         border-right:none;
  75.                         transform:rotate(135deg);
  76.                         }
  77.                 ol{
  78.                             position:absolute;
  79.                                 /* top:50%;*/
  80.                                 bottom:5%;
  81.                                 left:25%;
  82.                                 width:200px;
  83.                                 height:40px;
  84.                                 background-color:red;
  85.                         }
  86.                         ol li{
  87.                                 width:5px;
  88.                                 height:5px;
  89.                                 border-radius:50%;
  90.                                 border:3px solid black;
  91.                         }
  92.                 </style>
  93.         </head>
  94.         <body>
  95.                 <div class='main'>
  96.                         <ul>
  97.                                 <li><img src='img/24_404_15a398a36e51a9e.gif'></li>
  98.                                 <li><img src='img/24_404_7f5a32ac20ee3ef.gif'></li>
  99.                                 <li><img src='img/24_404_8675904ec7935f2.gif'></li>
  100.                                 <li><img src='img/24_404_e52d2c605f2fb83.gif'></li>
  101.                         </ul>
  102.                         <ol>
  103.                         </ol>
  104.                         <span class="span1"><em class='em1'></em></span>
  105.                         <span class="span2"><em class='em2'></em></span>
  106.                 </div>
  107.                 <script>
  108.                 var ul=document.querySelector('ul');
  109.                 var ol=document.querySelector('ol');
  110.                 var lis=document.querySelector('li');
  111.                 for(var i=0; i<lis.length;i++){
  112.                          var li=document.createElement('li');
  113.                          ol.appendChild(li);
  114.                 }/////////////////////////////////////
  115.        
  116.                 </script>
  117.         </body>
  118. </html>
复制代码
最佳答案
月排行榜 / 总排行榜
ba21
2022-4-9 21:42:09
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>滚动轮播图</title>
  6.                 <style>
  7.                 *{
  8.                         padding:0;
  9.                         margin:0;
  10.                 }
  11.                 .span1{
  12.                         position:absolute;
  13.                         top:50%;
  14.                         left:0;
  15.                         width:40px;
  16.                         height:40px;
  17.                         background-color:rgba(150,100,100,.6);
  18.                         cursor:pointer;
  19.                 }
  20.                 .span2{
  21.                         position:absolute;
  22.                         top:50%;
  23.                         right:0;
  24.                         width:40px;
  25.                         height:40px;
  26.                         background-color:red;
  27.                         background-color:rgba(150,100,100,.6);
  28.                         cursor:pointer;
  29.                 }
  30.                 .main{
  31.                         position:relative;
  32.                         width:400px;
  33.                         height:400px;
  34.                         background-color:gray;
  35.                         margin:0 auto;
  36.                 }
  37.                 .main img{
  38.                         width:400px;
  39.                         height:400px;
  40.                         
  41.                 }
  42.                         
  43.                 ul{
  44.                         display:flex;
  45.                         width:1600px;
  46.                         height:400px;
  47.                         background-color:red;
  48.                 }
  49.                 ul li{
  50.                         /* float:left; */
  51.                         list-style:none;
  52.                 }
  53.                 .em1{
  54.                         display:block;
  55.                         width:20px;
  56.                         height:20px;
  57.                         /* background-color:yellow; */
  58.                         margin:0 auto;
  59.                         margin-top:5px;
  60.                         border:5px solid #fff;
  61.                         border-bottom:none;
  62.                         border-right:none;
  63.                         transform:rotate(-45deg);
  64.                 }
  65.                 .em2{        
  66.                         display:block;
  67.                         width:20px;
  68.                         height:20px;
  69.                         /* background-color:yellow; */
  70.                         margin:0 auto;
  71.                         margin-top:5px;
  72.                         border:5px solid #fff;
  73.                         border-bottom:none;
  74.                         border-right:none;
  75.                         transform:rotate(135deg);
  76.                         }
  77.                 ol{
  78.                             position:absolute;
  79.                                 /* top:50%;*/
  80.                                 bottom:5%;
  81.                                 left:25%;
  82.                                 width:200px;
  83.                                 height:40px;
  84.                                 background-color:red;
  85.                         }
  86.                         ol li{
  87.                                 width:5px;
  88.                                 height:5px;
  89.                                 border-radius:50%;
  90.                                 border:3px solid black;
  91.                         }
  92.                 </style>
  93.         </head>
  94.         <body>
  95.                 <div class='main'>
  96.                         <ul>
  97.                                 <li><img src='img/24_404_15a398a36e51a9e.gif'></li>
  98.                                 <li><img src='img/24_404_7f5a32ac20ee3ef.gif'></li>
  99.                                 <li><img src='img/24_404_8675904ec7935f2.gif'></li>
  100.                                 <li><img src='img/24_404_e52d2c605f2fb83.gif'></li>
  101.                         </ul>
  102.                         <ol>
  103.                         </ol>
  104.                         <span class="span1"><em class='em1'></em></span>
  105.                         <span class="span2"><em class='em2'></em></span>
  106.                 </div>
  107.                 <script>
  108.                 var ul=document.querySelector('ul');
  109.                 var ol=document.querySelector('ol');
  110.                 var lis=document.querySelector('li');
  111.                 for(var i=0; i<4;i++){
  112.                         var text=document.createTextNode("test"+i);
  113.                          var li=document.createElement('li');
  114.                          li.appendChild(text)
  115.                          ol.appendChild(li);
  116.                 }
  117.         
  118.                 </script>
  119.         </body>
  120. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

ba21
发表于 2022-4-9 21:42:09 | 显示全部楼层    本楼为最佳答案   
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>滚动轮播图</title>
  6.                 <style>
  7.                 *{
  8.                         padding:0;
  9.                         margin:0;
  10.                 }
  11.                 .span1{
  12.                         position:absolute;
  13.                         top:50%;
  14.                         left:0;
  15.                         width:40px;
  16.                         height:40px;
  17.                         background-color:rgba(150,100,100,.6);
  18.                         cursor:pointer;
  19.                 }
  20.                 .span2{
  21.                         position:absolute;
  22.                         top:50%;
  23.                         right:0;
  24.                         width:40px;
  25.                         height:40px;
  26.                         background-color:red;
  27.                         background-color:rgba(150,100,100,.6);
  28.                         cursor:pointer;
  29.                 }
  30.                 .main{
  31.                         position:relative;
  32.                         width:400px;
  33.                         height:400px;
  34.                         background-color:gray;
  35.                         margin:0 auto;
  36.                 }
  37.                 .main img{
  38.                         width:400px;
  39.                         height:400px;
  40.                         
  41.                 }
  42.                         
  43.                 ul{
  44.                         display:flex;
  45.                         width:1600px;
  46.                         height:400px;
  47.                         background-color:red;
  48.                 }
  49.                 ul li{
  50.                         /* float:left; */
  51.                         list-style:none;
  52.                 }
  53.                 .em1{
  54.                         display:block;
  55.                         width:20px;
  56.                         height:20px;
  57.                         /* background-color:yellow; */
  58.                         margin:0 auto;
  59.                         margin-top:5px;
  60.                         border:5px solid #fff;
  61.                         border-bottom:none;
  62.                         border-right:none;
  63.                         transform:rotate(-45deg);
  64.                 }
  65.                 .em2{        
  66.                         display:block;
  67.                         width:20px;
  68.                         height:20px;
  69.                         /* background-color:yellow; */
  70.                         margin:0 auto;
  71.                         margin-top:5px;
  72.                         border:5px solid #fff;
  73.                         border-bottom:none;
  74.                         border-right:none;
  75.                         transform:rotate(135deg);
  76.                         }
  77.                 ol{
  78.                             position:absolute;
  79.                                 /* top:50%;*/
  80.                                 bottom:5%;
  81.                                 left:25%;
  82.                                 width:200px;
  83.                                 height:40px;
  84.                                 background-color:red;
  85.                         }
  86.                         ol li{
  87.                                 width:5px;
  88.                                 height:5px;
  89.                                 border-radius:50%;
  90.                                 border:3px solid black;
  91.                         }
  92.                 </style>
  93.         </head>
  94.         <body>
  95.                 <div class='main'>
  96.                         <ul>
  97.                                 <li><img src='img/24_404_15a398a36e51a9e.gif'></li>
  98.                                 <li><img src='img/24_404_7f5a32ac20ee3ef.gif'></li>
  99.                                 <li><img src='img/24_404_8675904ec7935f2.gif'></li>
  100.                                 <li><img src='img/24_404_e52d2c605f2fb83.gif'></li>
  101.                         </ul>
  102.                         <ol>
  103.                         </ol>
  104.                         <span class="span1"><em class='em1'></em></span>
  105.                         <span class="span2"><em class='em2'></em></span>
  106.                 </div>
  107.                 <script>
  108.                 var ul=document.querySelector('ul');
  109.                 var ol=document.querySelector('ol');
  110.                 var lis=document.querySelector('li');
  111.                 for(var i=0; i<4;i++){
  112.                         var text=document.createTextNode("test"+i);
  113.                          var li=document.createElement('li');
  114.                          li.appendChild(text)
  115.                          ol.appendChild(li);
  116.                 }
  117.         
  118.                 </script>
  119.         </body>
  120. </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-6-4 13:21

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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