HTML格式与布局

1、position:fixed

<html>
<head>                                                                
<style>
#b
{
    border:5px solid #300;
    width:100px;
    background-color:#390;
    height:100px;
    margin:10;
    left:30px;
    bottom:30px;
    position:fixed;
     }    
</style>
</head>
<body>
<div id="b">b</div>
</body>
</html>

2、position：absolute

<html>
<head>
<style>
#e
{
    border:5px solid #00F;/*边框宽度，边框样式，边框颜色*/
    width:50px;
    height:50px;
    margin:10px;
    background-color:#0F0;/*div背景颜色*/
    right:50px;
    bottom:50px;
    position:absolute;
    }
#c
{
    border:3px double #FF0000;
    width:400px;
    height:200px;}
#d
{
    border:3px double #FF0000;
    width:400px;
    height:200px;
    position:absolute;}/*外层上给固定一个position，让里面的bdiv针对ddiv进行位置判定*/
</style>
</head>
<body>
<div id="c">c<div id="e">e</div></div>
<div id="d">d<div id="e">e</div></div>
</body>
</html>

3、position:relative

<html>
<head>
<style type="text/css">
    #b
{
    border:5px solid #300;
    width:100px;
    background-color:#390;
    height:100px;
    margin:10;
    left:30px;
    top:30px;
    position:fixed;
     }    
#bb
{
    border:5px solid #300;
    width:100px;
    background-color:#390;
    height:100px;
    margin:10;
    left:100px;
    top:80px;
    position:relative;

    }    
</style>
</head>
<body>
<div id="b">b<div id="bb">bb</div></div>
</body>
</html>

 

posted @ 2015-12-02 21:54  左转右转  阅读(272)  评论(0)  编辑  收藏  举报