布局转换

原创于 2016-12-08 08:27:59 发布 · 269 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

49 篇文章

订阅专栏

本文介绍了一种使用CSS进行特定布局的方法，并通过JavaScript实现了元素位置的动态调整。具体包括利用CSS样式实现统一的块级元素布局，以及JavaScript脚本如何初始化这些元素的位置。

<!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>