2. 程式人生 > >聖盃佈局-完整程式碼

聖盃佈局-完整程式碼

阿新 • • 發佈：2019-01-03

padding margin 實現聖盃佈局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            1.兩邊固定  當中自適應
            2.當中列要完整顯示
            3.當中列要優先載入
        -->

        <!--
            聖盃佈局的技術點：
            浮動: 搭建完整的佈局框架
            margin 為賦值:調整旁邊兩列的位置(使三列布局到一行上)
            使用相對定位:調整旁邊兩列的位置（使兩列位置調整到兩頭）

            margin為負值（margin不影響元素的位置）
                負值:將元素的邊界往裡收
                正值:將元素的邊界往外擴
        -->
 


        <!--
            下面的100% 都是相對於包含塊，也就是父級元素的寬度
        -->

        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            body{
                min-width: 600px;
            }
            #content{
                padding
 
: 0 200px;
                overflow: hidden;
            }
            #header,#footer{
                height: 20px;
                text-align: center;
                border: 1px solid  deeppink;
                background: gray;
            }
            #content .middl,#content .left,#content .right
 
{
                padding-bottom: 10000px;
                margin-bottom: -10000px;
            }
            #content .middle{
                float: left;
                width: 100%;
                background: pink;
                /*padding: 0 200px;*/
            }
            #content .left{
                position: relative;
                left: -200px;
                margin-left: -100%;
                float: left;
                width: 200px;
                background: yellow;
            }
            #content .right{
                position: relative;
                right: -200px;
                margin-left: -200px;
                float: left;
                width: 200px;
                background: yellow;
            }



            .clearfix{
                *zoom: 1;
            }
            .clearfix:after{
                content: "";
                display: block;
                clear: both;
            }
        </style>
    </head>
    <body>
        <div id="header">header</div>
        <div id="content" class="clearfix">
            <div class="middle">
                <h4>middle</h4>
                <h4>middle</h4>
                <h4>middle</h4>
                <h4>middle</h4>
                <h4>middle</h4>
            </div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
        <div id="footer">footer</div>
    </body>
</html>

特效
這裡寫圖片描述

相關推薦

聖盃佈局-完整程式碼

padding margin 實現聖盃佈局 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit

雙飛翼佈局和聖盃佈局程式碼

聖盃佈局<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content=

經典聖盃佈局

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>xia</title> <link rel="stylesheet" href="http://cdn.st

聖盃佈局的理解學習筆記

聖盃佈局 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>聖盃佈局</title> 6

佈局：聖盃佈局和雙飛翼佈局

聖盃佈局和雙飛翼佈局都是為了實現兩邊固定，中間自適應的三列的佈局，他的中間欄優先渲染。 聖盃佈局與雙飛翼佈局前面幾步相同 1.寫三個div，中間的那個div放在第一個//優先渲染 2.給左中右設定浮動，分別設定高度，寬度，顏色 3.左邊模組讓它margin-left:-100%,右邊模組ma

三欄佈局之聖盃佈局

聖盃佈局是左、中、右三欄被囊括在container中。 固定左右兩欄的寬度，讓main欄，即中間欄自適應大小。基礎程式碼如下： <div class="container"> <div class="main"></div>

圖解聖盃佈局與雙飛翼佈局--CSS佈局實戰一

本質：均是兩側頂寬（寬度固定），中間自適應 適用：電商網頁pc移動端展示，比如淘寶、京東等電商網頁都有應用。 區別：只是中間自適應的處理方式不同。 聖盃佈局： 中間主要是直接撐滿，然後讓左右通過相對絕對定位（position）來浮動。 雙飛翼佈局：中間同樣充滿，在中間再放一層內部

聖盃佈局和雙飛翼佈局的理解和區別

連結 聖盃佈局和雙飛翼佈局基本上是一致的，都是兩邊固定寬度，中間自適應的三欄佈局，其中，中間欄放到文件流前面，保證先行渲染。解決方案大體相同，都是三欄全部float:left浮動，區別在於解決中間欄div的內容不被遮擋上，聖盃佈局是中間欄在新增相對定位，並配合left和right屬性，效

flex與佈局（基本網格佈局、百分比佈局、一側固定一側自適應、聖盃佈局）

1、基本網格佈局 分情況討論： （1）如果所有的專案有相同的結構 <!DOCTYPE html> <html> <head> <meta charset

「面試題」如何實現一個聖盃佈局？

前言 最近，有個朋友向我訴苦說，面試的時候突然被問到了如何實現佈局和原理，有點懵。之前JavaScript的部分回答得挺好的，偏偏在這裡翻船了，完全沒有思路，後面的面試狀態一落千丈。結局也如他所料，沒有被錄取。 我給這個朋友做了解答之後，回家整理出此文。希望其他小夥伴面試中，再被問及

聖盃佈局、雙飛翼佈局、Flex佈局和絕對定位佈局的幾種經典佈局的具體實現示例

題目要求：針對如下DOM結構，編寫CSS，實現三欄水平佈局，其中left、right分別位於左右兩側，left寬度為200px，right寬度為300px，main處在中間，寬度自適應。 要求：允許增加額外的DOM節點，但不能修改現有節點順序。 <

CSS佈局 -- 聖盃佈局 & 雙飛翼佈局

按照我的理解，其實聖盃佈局跟雙飛翼佈局的實現，目的都是左右兩欄固定寬度，中間部分自適應。 但在這裡實現起來還是有一些區別的 【聖盃佈局】 在這裡，實現了左(200px) 右(220px) 寬度固定，中間自適應，container部分高度保持一致。 DEMO 稍微說明一下： html程式碼中

經典佈局之聖盃佈局&雙飛翼佈局

前言 所謂經典，說白了就是古老的東西，但是又是很有用的東西。大多數前端頁面仔包括本菜（不！我可是勵志成為前端工程師的男人，頁面仔太刺耳）都或多或少了解的聖盃佈局和雙飛翼佈局。 本文只對這兩種佈局進行簡單的探討(畢竟本菜真的好菜啊) 不管怎樣，寫作的好處自然

聖盃佈局

佈局一，兩欄佈局，側欄固定在右邊，左邊主欄寬度自適應，效果如下： code:  <div class="layout"> <div class="layout_main"></div> <aside class="layou

CSS佈局(五) 聖盃佈局

本文翻譯修改自https://alistapart.com/article/holygrail 聖盃佈局 在頁面上的顯示效果就是左右兩邊是個固定的寬度，中間的容器自適應；即根據頁面大小的變化而變化。 如何實現 戰略很簡單。容器div的側面有自適應中心和固定寬度的襯墊。然後訣竅是讓左列與左側填充對齊，右

聖盃佈局------4種css左中右佈局方式

1. float+margin <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

關於聖盃佈局和雙飛翼佈局

聖盃佈局和雙飛翼佈局講的都是三欄佈局，其中兩欄固定，中間自適應，兩者顯示的效果是一致的；另外由於沒有使用絕對定位position:absolute，所以可以避免發生當頁面內容比較多的時候用絕對定位導致

CSS3實現“聖盃佈局”--（固比固佈局）

使用CSS3中的屬性order可以輕易實現“聖盃佈局”，實現伸縮專案的順序重組，還有！！！使用flex屬性實現了中間列的等高效果，以及頁尾的黏附效果。 HTML: <header>h

css佈局：雙飛翼佈局與聖盃佈局

今天開班級會議，主要是講講畢業的事宜，其中一位同學說到他現在在專研一些新技術，但是我不建議他這麼做，畢竟基礎很重要程式設計主要學習的是思想 正題吧，前陣子朋友面試，有這麼一個要求： 就是兩邊定寬，中間自適應的三欄佈局 是不是感覺很簡單，但是我事後試了試，發現不是那麼簡單，

經典的三欄佈局：聖盃佈局，雙飛翼佈局，flex佈局

需求： 兩邊欄固定寬度，中間寬度自適應，一般左邊欄為導航，右邊欄為廣告，中間欄為主要內容的展示，div塊上中間欄放在第一位，重要的東西放在文件流前面可以優先渲染。 聖盃佈局和雙飛翼佈局的共同特點都是利用float+margin的負值來實現並列的結