页面布局实例

实例1
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
    position: absolute;
    border: 1px solid blue;
    left: 10px;
    top: 10px;
    right: 10px;
    bottom: 10px;
}
#left {
    position: absolute;
    border: 1px solid red;
    width: 100px;
    left: 0px;
    top: 0px;
    bottom: 0px;
}
#right {
    position: absolute;
    border: 1px solid green;
    right: 0px;
    left: 100px;
    top: 0px;
    bottom: 0px;
}
#hide1 {
    position: absolute;
    border: 1px solid orange;
    width: 10px;
    left: 0px;
    top: 0px;
    bottom: 0px;
}
#main {
    position: absolute;
    border: 1px solid cyan;
    right: 0px;
    left: 10px;
    top: 0px;
    bottom: 0px;
}
#main-bottom {
    position: absolute;
    border: 1px solid purple;
    height: 200px;
    right: 0px;
    left: 0px;
    bottom: 0px;
}
#main-top {
    position: absolute;
    border: 1px solid pink;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 200px;
}
#hide2 {
    position: absolute;
    border: 1px solid orange;
    height: 10px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
</style>
</head>
<body>
<div id="container">
    <div id="left">
    </div>
    <div id="right">
        <div id="hide1">
        </div>
        <div id="main">
            <div id="main-top">
                <div id="hide2">
                </div>
            </div>
            <div id="main-bottom">
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
var hide1 = document.getElementById('hide1');
var left = document.getElementById('left');
var right = document.getElementById('right');
hide1.onclick = function() {
    var interval = setInterval(function() {
            console.log(left.offsetWidth);
            left.style.width = left.offsetWidth - 10 + 'px';
            right.style.left = left.offsetWidth + 'px';
            if (left.offsetWidth < 10) clearInterval(interval);
        }, 100);
}
</script>
View Code