首页 » CSS » 让代码富有弹性

让代码富有弹性

原文 http://blog.csdn.net/qq_29022327/article/details/77072780

2017-08-11 16:20:04阅读(646)

一个简单的html+css+js代码

<style type = "text/css">
*{
    margin:0;
    padding:0;
}
#box{
    position:relative;
    margin:100px auto;
    width:100px;
    height:400px;
    background:red;
}
ul{
    position:absolute;
    height:100px;
    width:100px;//或100%
    bottom:0;
    overflow:hidden;
}
li{
    height:100px;
    width:20px;
}
</style>
<script>
    window.onload() = function(){
        var li01 = document.getElementById("li01");
        li01.onclick = function(){
            ……
        }
        省略……
    }
</script>
<body>
    <div id="box">
        <ul>
            <li id="li01"><img src="" alt="" /></li>
            <li id="li02"><img src="" alt="" /></li>
            <li id="li03"><img src="" alt="" /></li>
            <li id="li04"><img src="" alt="" /></li>
            <li id="li05"><img src="" alt="" /></li>
        </ul>
    </div>
</body>

改变css样式后

<style type = "text/css">
*{
    margin:0;
    padding:0;
}
#box{
    padding-top:300px;//去掉定位,改为内边距
    margin:100px auto;
    width:100px;
    height:100px;//////改变高度
    background:red;
}
ul{
    //position:absolute;//去掉定位
    height:100px;
    width:100px;//或100%
    //bottom:0;//无效
    overflow:hidden;
}
li{
    height:100px;
    width:20px;
}
</style>

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹