html + jquery + js + css 实现网站基础结构 + 介绍 + 自适应

html + jquery + js + css 实现网站基础结构 + 介绍 + 自适应

1.介绍

为了网站开发便捷特此编写html中需要修改的网站主体内部（单独模块的增加减少）模块中的div或其他的内容通过 margin-top float 等方式做定位实现js中代码如果网站需要首页内容完全性高，可以设置网站主体的高度

2.html代码

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。