首页 > Web开发 > 详细

HTML格式与布局

时间:2015-12-02 22:16:33      阅读:285      评论:0      收藏:0      [点我收藏+]

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>

 

HTML格式与布局

原文:http://www.cnblogs.com/liujianshe1990-/p/5014410.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!