1.介绍
- 为了网站开发便捷特此编写
- html中需要修改的网站主体内部（单独模块的增加减少）
- 模块中的div或其他的内容通过 margin-top float 等方式做定位实现
- js中代码如果网站需要首页内容完全性高，可以设置网站主体的高度
2.html代码
<!-- 网站主体 -->
<div class="webSubject">
<!-- 网站头部底色 -->
<div class="subjectOnlytop">
<span class="logo">logo</span>
<span class="loginzc">注册</span>
<span class="login">登录</span>
</div>
<!-- 模拟模块 -->
<div class="subjectOnlytopsimulation"></div>
<!-- 模块一 -->
<div class="webSubjectx" id="suba">
<!-- 模块内部内容可以通过 div float 左右 margin-top 等设置位置 来实现位置的确定 -->
<!-- 自定义模块一 -->
<div class="modleOne"></div>
<!-- 自定义模块二 -->
<div class="modleTwo"></div>
</div>
<div class="webSubjectx" id="subb"></div>
<div class="webSubjectx" id="subc"></div>
</div>
3.css代码
body{
background-color:rgb(45, 49, 45);
text-align:center;
}
/** 网站头部样式 */
.subjectOnlytop{
position: fixed;
width:1366px;
height:50px;
line-height:50px;
left:0px;
top:0px;
background-color:#000;
color:#fff;
}
/** logo */
.logo{
float: left;
margin-left:20px;
}
/** login */
.login{
float:right;
margin-right:20px;
cursor:pointer;
border:1px solid #fff;
height:20px;
line-height:20px;
margin-top:15px;
border-radius:5px;
}
.loginzc{
float:right;
margin-right:40px;
cursor:pointer;
border:1px solid #fff;
height:20px;
line-height:20px;
margin-top:15px;
border-radius:5px;
}
/** 主体样式 */
.webSubject{
position:fixed;
width:1366px;
height:768px;
left:0px;
top:0px;
overflow: auto;
}
/** 每个模块站位置大小 */
.webSubjectx{
height:600px;
}
/** 模拟模块 仿照上边内容 重点是高度*/
.subjectOnlytopsimulation{
height:50px;
}
/** 模块一内容 **/
#suba{
background-color:rgb(153, 238, 227);
}
/** 模块二内容 **/
#subb{
background-color:rgb(153, 255, 175);
}
/** 模块三内容 **/
#subc{
background-color:rgb(153, 243, 255);
}
/** 自定义模块一 */
.modleOne{
width:100%;
height:50px;
background-color:rgb(50, 54, 54);
z-index: 101;
}
/** 自定义模块二 */
.modleTwo{
width:100%;
height:300px;
background-color:rgb(57, 70, 70);
z-index: 101;
}
4.js代码
//项目入口
var porject = {
//初始化
init: function () {
porject.addInitStyle();
},
//初始化样式
addInitStyle: function () {
if (porject.bodyHeight < porject.bodyWidth) {//电脑端网站
//网站头部
$(".subjectOnlytop").css({ "width": porject.bodyWidth + "px"});
$(".webSubject").css({ "width": porject.bodyWidth + "px","height":(porject.bodyHeight)+"px"});
} else {//手机端网站
}
},
bodyHeight: document.documentElement.clientHeight,
bodyWidth: document.documentElement.clientWidth,
};
//启动加载
$(document).ready(function () {
porject.init();
});
5.演示图片
这篇代码的主要目的是为了实现网站的头部不动下边内容滚动的效果，和一些基础的功能方便以后开发使用有兴趣的key收藏，持续更新
ok