【轮播图】html里的同一句style语句，放到css里结果就不同了。是因为渲染加载顺序不同吗？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>焦点轮播图</title>
    <link rel="stylesheet" href="../css/style0.css">
    <script src="../js/js0.js"></script>
</head>
<body>
<div id="container">
      <!-- <div id="list" style="left: -1345px;" > -->
      <div id="list"  >
        <img src="../slidePic/slideShow05.jpg"  width:100px; height:100px; alt="1"/>
        <img src="../slidePic/slideShow01.jpg" width:100px; height:100px;alt="1"/>
        <img src="../slidePic/slideShow02.jpg" width:100px; height:100px;alt="2"/>
        <img src="../slidePic/slideShow03.jpg" width:100px; height:100px;alt="3"/>
        <img src="../slidePic/slideShow04.jpg" width:100px; height:100px;alt="4"/>
        <img src="../slidePic/slideShow05.jpg"width:100px; height:100px; alt="5"/>
        <img src="../slidePic/slideShow01.jpg" width:100px; height:100px; alt="5"/>
    </div>
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow">&lt;</a>
    <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>

</body>
</html>

 *{ 
     margin: 0;
      padding: 0;
      text-decoration: none;
 }
 #container {
      width: 1345px; 
      height: 600px;
       overflow: hidden; 
    position: relative;
}
 #list { 
     width: 9415px; 
     height: 600px; 
     position: absolute; 
     z-index: 1;
     left: -1345px;
 }
  #list img { 
      float: left;
    width:1345px;
}

html里用注释的那句话才能够实现图片轮播，若把html的 style=“left:-1345px; 去掉，

在css文件中#list的样式里添加，轮播的图片一直显示为slideShow01的图片，无法进行切换。

浏览器渲染是有优先级的，是因为这个优先级引起的吗，还是其他原因？

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

【轮播图】html里的同一句style语句，放到css里结果就不同了。是因为渲染加载顺序不同吗？

相关文章