布局(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>
css布局左边固定右边自适应</body>
这样写还有⼀个好处就是,侧边栏的⾼度是不固定的,它可以随不同⼤⼩的浏览器窗⼝⽽变化,兼容性也⾮常好IE8也⾏
(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>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论