網頁布局//上左不動,其他滑動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
/*上左不動,其他的可以滑動*/
*{
margin: 0px;
padding:0px;
}
#one{
background:#1DC9D8;
z-index:1;
width:100%;
height: 100px;
position: fixed;
margin-top: -100px;
}
#content{
margin-top: 100px;
position:relative;
width:100%;
height:2000px;
}
#right{
background:yellow;
width:20%;
height:400px;
position: fixed;
z-index: 1;
}
#left{
background:pink;
width:80%;
float:right;
height:1800px;
}
#foot{
background:#37E519;
width:100%;
height:150px;
position:relative;
}
</style>
<body>
<div>
<div id="one">首頁</div>
<div id="content">
<div id="right">列表</div>
<div id="left">內容</div>
</div>
<div id="foot">底部</div>
</div>
</body>
</html>
網頁布局//上左不動,其他滑動