關於頁面佈局的方式

時間 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>