案例1，Fixed：固定定位

固定定位：一般用来做固定的菜单栏，右边的资讯栏，和购物车的结算信息栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    html,body{
        padding:0;
        margin:0;
    }
    .nav{
        position:fixed;
        top:0;
        left:0;
        background-color: yellow;
        height: 30px;
        width: 100%;            
    }
    .cart-info{
        position:fixed;
        bottom:0;
        left:0;
        background-color: gray;
        height: 30px;
        width: 100%;        
    }
    .ad{
        position:fixed;
        right: 0;
        top:25%;
        background-color: red;
        height: 100px;
        width: 100px;
    }

    .box{
        width: 500px;
        height: 40px;
        background-color: black;
        margin:0 auto;

    }
</style>
<body>
    <div class="nav">
        最上边的菜单
    </div>
    <div class="cart-info">
        最下面的购物车信息
    </div>

    <div class="ad">
        右边的资讯框
    </div>
    <div class="box">
        box箱子
    </div>
</body>
</html>

 

posted @ 2019-01-22 15:00  cl94  阅读(208)  评论(0)    收藏  举报