0
点赞
收藏
分享

微信扫一扫

html web 网站布局示例

梦想家们 2022-08-02 阅读 69


介绍

  • 1.加position:relative; 样式
  • 多个div
  • 一直往下挤下去
  • 需要设置每个不同的页div 高度

 

样式

html web 网站布局示例_html

代码

<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

 

 

持续更新

 

 

 

举报

相关推荐

CSS布局示例 3 - 页面布局

HTML布局之flex布局

CSS Flex布局示例

html圣杯布局

HTML div布局

html 卡片布局

0 条评论