布局转换

最新推荐文章于 2024-08-29 09:49:06 发布

Apress92

最新推荐文章于 2024-08-29 09:49:06 发布

阅读量235

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/bin1813/article/details/53513072

版权

javascript 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    #ul1{
        width: 366px;
        margin: 0 auto;
        position: relative;
    }
     #ul1 li{
         list-style: none;
         width: 100px;
         height: 100px;
         background-color:#ccc ;
         border: 1px solid black;
         float: left;
         margin: 10px;
     }

    </style>
    <script src="move3.js"></script>
    <script>
            window.onload=function(){
                var oUl=document.getElementById('ul1');
                var aLi=oUl.getElementsByTagName('li');
                for(i=0;i<aLi.length;i++){
                    aLi[i].style.left=aLi[i].offsetLeft+'px';
                    aLi[i].style.top=aLi[i].offsetTop+'px';
                }
                for(i=0;i<aLi.length;i++){
                    aLi[i].style.position='absolute';
                    aLi[i].style.margin='0';
                }
            }

    </script>
</head>
<body>
<ul id="ul1">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>