关于页面布局的方式

时间 2019-11-12

标签关于页面布局方式繁體版

原文原文链接

一、概述：javascript

　　咱们在编写网页或者某些WEB项目的时候，常常会遇到网页错乱的状况，或者某些元素应该显示在整个页面最外层可是却被遮挡的状况，下面来浅谈一下解决办法：css

二、关于页面层次的问题：java

　　一般咱们在对页面进行布局的时候，用到的position属性（固然还有margin，padding等，这里暂且不谈），这使得咱们不得不考虑用absolute、fixed仍是relative、static，前二者会使元素脱离文档流，然后二者不会是元素脱离文档流，而咱们对元素进行分层的时候，用到的是z-index属性，这一CSS属性可使元素，使本来脱离文档流元素被一层一层的区分开，z-index：x;这个X的值越大，表明的是该元素所处的层越高，越小则越低，同时X能够为负值。下面做图说明：jquery

三、关于布局的说明：布局

　　这里是我我的总结的比较好用的布局方式，使用父元素，这里实际上是用父元素构建网页的大致模块，也就是常说的网页总体布局根据我的须要将网页分解成多个或者几个大的模块，这些模块同处在一个文档流中，固然我这里多数时候都是用position：relative；来定位这个些主体元素，这样在咱们给网页每一个模块添加内容的时候，我能够确保每一个元素跟他们父元素的关系，而不会由于一个元素的改变而大改页面，，同时一个页面的布局也须要用js来计算，这也是其中一个好处，那么让咱们来看下样板效果吧：spa

下面附上代码：3d

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
 <style>
        *{
        margin:0px;
        padding:0px;
        list-style:none;
    }
    #left_f{
        float:left;
        width:calc(100% - 250px);
        height:100%;
        border:1px solid black;
    }
    #left_top,#left_bottom{
        height:calc(50% - 15px);
        width:calc(100% - 10px);
        border:1px solid red;
        margin:0 auto;
        margin-top:5px;
        text-align:center;
        line-height:200px;
    }
    #right_f{
        float:right;
        width:240px;
        height:calc(100% - 10px);
        border:1px solid blue;
    }
    #right_top,#right_bottom{
        height:calc(40% - 15px);
        width:calc(100% - 10px);
        border:1px solid pink;
        margin:0 auto;
        margin-top:5px;
        text-align:center;
        line-height:200px;
    }
    #right_top{
        height:calc(60% - 15px);
    }
 </style>
 <BODY>
    <div id="center">
        <div id="left_f">
            <div id="left_top">左侧宽高自适应上部分</div>
            <div id="left_bottom">左侧宽高自适应下部分</div>
        </div>
        <div id="right_f">
            <div id="right_top">右侧宽度240px  高自适应上部分</div>
            <div id="right_bottom">右侧宽240px  高自适应下部分</div>
        </div>
    </div>
 </BODY>
 <script type="text/javascript" src="jquery-1.11.3.js"></script>
 <script type="text/javascript">
    var common = {
        winHeight: $(window).height()-10,//这里减10是为了看着更方便一点正常不用的，这个就是取屏幕的宽高，设置百分比的时候就自适应了
        winWidth : $(window).width()
    }
    $("#center").css('height',common.winHeight);
    $("#center").css('width',common.winWidth);
</script>
</HTML>

固然咱们还会有不少的延伸，一个网页如何布局最合理，是根据不一样的需求而定的，不是千篇一概，注意代码中引入了Jquery文件，你们在复制代码的时候须要略做修改。code