介绍
- 1.加position:relative; 样式
- 多个div
- 一直往下挤下去
- 需要设置每个不同的页div 高度
样式
代码
<html>
<head>
<title>网站布局</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>
body{
margin:0px;
padding:0px;
}
::-webkit-scrollbar {
width: 10px; /*对垂直流动条有效*/
height: 10px; /*对水平流动条有效*/
}
/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: rosybrown;
border-radius: 3px;
}
/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb{
border-radius: 7px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #E8E8E8;
}
/*定义两端按钮的样式*/
::-webkit-scrollbar-button { background-color:#E8E8E8;}
/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner { background:khaki;}
.s1{
position:relative;
width:100%;
height:60px;
line-height:60px;
background:#000;
color:rgb(218, 97, 97);
}
.s1 h3{margin-left:20px;}
.s2{
position:relative;
width:100%;
background-color:aquamarine;
height:500px;
}
.s3{
position:relative;
width:100%;
background-color:rgb(47, 151, 117);
height:500px;
}
.s4{
position:relative;
width:100%;
background-color:rgb(59, 165, 130);
height:500px;
}
.s5{
position:relative;
width:100%;
background-color:rgb(35, 94, 74);
height:500px;
}
</style>
<body>
<div class="s1">
<h3>logo</h3>
</div>
<div class="s2" ></div>
<div class="s3" ></div>
<div class="s4" ></div>
<div class="s5" ></div>
</body>
<script>
var glb = {
init:function(){
}
}
glb.init();
</script>
</html>
ok
持续更新
