布局(2)：css固定侧边栏的写法 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .layui-side{
            position:fixed;
            width:200px;
            top:0;
            bottom:0;
            background-color: #393D49;
        }
    </style>
</head>
<body>
<div class="layui-side layui-bg-black">

</div>

</body>

这样写还有一个好处就是，侧边栏的高度是不固定的，它可以随不同大小的浏览器窗口而变化，兼容性也非常好ＩＥ８也行

 

（2）css固定顶部导航简单的写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            margin:0;
            padding:0
        }
        .header{
            height:80px;
            width:100%;
            background-color:#ccc;
        }
        .fix-header{
           position:fixed;
            top:0
        }
        .content{
            height:1000px;
            padding-top:80px;
            background-color: #5fb878;
        }
    </style>
</head>
<body>
<div class="header fix-header">固定的顶部导航条</div>
<div class="content">23333</div>
</body>
</html>

 

posted @ 2017-11-30 09:41  千寻的天空之城  阅读(6734)  评论(0)  编辑  收藏  举报