CSS 聖盃佈局 雙飛翼佈局
目的:載入文件時先載入中間區域,再載入左右兩邊。
特點:中間的內容可以根據螢幕的大小的改變而改變,左右兩邊的內容保持不變。
實現:
1.0在一個大的div中放入三個小的div,並且排序一定要是中間的div放在文件的最前面。
2.0給大的div設定左右padding,給中間的div設定寬度為100%;
3.0設定左右兩邊div的大小,注意為了讓所有的div顯示在同一行中,三個div都必須浮動(float:left).
4.0給左邊的div設定margin-left:-100%;給右邊的div設定margin-left:值。這個值為這個盒子寬高。
5.0如果按照述的方式來移動盒子,中間的內容會被左右的盒子覆蓋住。我們還需要使用定位來將盒子定位左右兩。給第左邊的盒子設定postion:relative,再設定left:-盒子的寬度。給右邊的盒子也設定postion:relative,再設定這個盒子right:-盒子的寬度。
用到了哪些技術
浮動
margin-left
定位
相關推薦
Css有關於聖盃及雙飛翼佈局
css中的負邊距(negative margin)是佈局中的一個常用技巧,只要運用得合理常常會有意想不到的效果。 說道margin負值問題就不得不說一下前端頁面常見的佈局:聖盃和雙飛翼佈局。其實這兩種佈局在實際應用上是一樣的東西,不同的是概念不一樣。使用的就是
佈局——聖盃和雙飛翼佈局
css可以繼承的屬性有哪些? Font 系列 text系列 color line-height border-radius的值的問題 四個值的順序是 左上 右上 右下 左下。 white-space 規定段落中的文字換不換行 往往值是nowrap 不換行 Word-wrap 屬性允許長的內容可以自
css3聖盃和雙飛翼佈局
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text
CSS佈局 -- 聖盃佈局 & 雙飛翼佈局
按照我的理解,其實聖盃佈局跟雙飛翼佈局的實現,目的都是左右兩欄固定寬度,中間部分自適應。 但在這裡實現起來還是有一些區別的 【聖盃佈局】 在這裡,實現了左(200px) 右(220px) 寬度固定,中間自適應,container部分高度保持一致。 DEMO 稍微說明一下: html程式碼中
CSS 聖盃佈局 雙飛翼佈局
目的:載入文件時先載入中間區域,再載入左右兩邊。 特點:中間的內容可以根據螢幕的大小的改變而改變,左右兩邊的內容保持不變。 實現: 1.0在一個大的div中放入三個小的div,並且排序一定要是中間的div放在文件的最前面。 2.0給大的div設定左右padding,給中間的div設定寬度為100%; 3.0
css佈局——雙飛翼佈局和聖盃佈局
雙飛翼佈局和聖盃佈局都將介面分為左中右三部分,中間部分是主體部分。 聖盃佈局實現程式碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
經典佈局之聖盃佈局&雙飛翼佈局
前言 所謂經典,說白了就是古老的東西,但是又是很有用的東西。大多數前端頁面仔包括本菜(不!我可是勵志成為前端工程師的男人,頁面仔太刺耳)都或多或少了解的聖盃佈局和雙飛翼佈局。 本文只對這兩種佈局進行簡單的探討(畢竟本菜真的好菜啊) 不管怎樣,寫作的好處自然
聖盃佈局&&雙飛翼佈局
聖盃佈局:(Holy Grail Layout)指的是一種最常見的網站佈局,起源於距離現在十年的2006年,雙飛翼佈局:是由淘寶UED部門提出的,與聖盃佈局的原理相類似,那就是讓左右邊欄寬度固定,中間主要內容容器寬度自適應的佈局方式,與聖盃佈局的區別在於實現方式
經典聖盃佈局 雙飛翼佈局
解決問題:兩邊定寬,中間自適應的三欄佈局,中間欄要放在文件流前面以優先渲染,左右中三列代表:子列,主列,附加列,優先載入主列,後續子列,附加列 1.聖盃佈局 實現過程-1.HTML標籤 <header class="header">#hea
經典三欄佈局之聖盃、雙飛翼、彈性佈局
經典三欄佈局之聖盃、雙飛翼、彈性佈局 聖盃佈局和雙飛翼佈局是前端工程師需要掌握的佈局方式,兩者功能相同,都是為了實現兩側寬度固定,中間寬度自適應的佈局方式,此外,使用新增的flex佈局,可以使佈局更加簡單。 雙飛翼佈局和聖盃佈局雖然實現方式有所差異,但是基本上都遵循了以下幾點: 兩側寬度固定,中間寬度自適
CSS中經典的雙飛翼佈局(
筆者在一些部落格和論壇中經常看到經典的雙飛翼佈局,淘寶的首頁也運用了這種相容性很好的雙飛翼佈局 1.何謂雙飛翼佈局? 簡單來說,雙飛翼佈局是將一個網頁分為左列,中列和右列三部分,並且我們要得到的效果是: 左列和右列寬度恆定,中間列的
阿里團隊常用的佈局——雙飛翼佈局
雙飛翼佈局新手來說不太好理解,光靠死記不行,理解了以後就能輕易寫出來。獻上程式碼: <head> <meta charset="UTF-8"> <title>雙飛翼</title> <style> .w
圖解聖盃佈局與雙飛翼佈局--CSS佈局實戰一
本質:均是兩側頂寬(寬度固定),中間自適應 適用:電商網頁pc移動端展示,比如淘寶、京東等電商網頁都有應用。 區別:只是中間自適應的處理方式不同。 聖盃佈局: 中間主要是直接撐滿,然後讓左右通過相對絕對定位(position)來浮動。 雙飛翼佈局:中間同樣充滿,在中間再放一層內部
css佈局:雙飛翼佈局與聖盃佈局
今天開班級會議,主要是講講畢業的事宜,其中一位同學說到他現在在專研一些新技術,但是我不建議他這麼做,畢竟基礎很重要程式設計主要學習的是思想 正題吧,前陣子朋友面試,有這麼一個要求: 就是兩邊定寬,中間自適應的三欄佈局 是不是感覺很簡單,但是我事後試了試,發現不是那麼簡單,
CSS雙飛翼佈局和聖盃佈局margin-left:-100%;等內容理解
網上搜索雙飛翼佈局和聖盃佈局都會有許多不錯的文章,在這裡給大家推薦一篇部落格 看完之後,我來補充一點細節的東西!!! 如何理解margin-left:-100%及margin-left:300px; 看完這個圖解,上面的問題就應該沒問題了!!具體的雙飛翼佈局方法請參
css 雙飛翼佈局(flex 、float)和 聖盃佈局
雙飛翼佈局 雙飛翼佈局,是一種頁面佈局的形象的表達。具體表現形式為 兩邊頂寬,中間自適應寬度的三欄佈局,中間欄要放在HTML文件流的最前,優先渲染 實現方式 float 浮動流 頁面基本佈局很簡單,總共有三欄,中間欄位於文件流的最前面,優先渲染 `
div css 聖盃佈局與雙飛翼佈局
div css 聖盃佈局 <html> <head> <style> body{ min-width:600
css-聖盃佈局和雙飛翼佈局
1.聖盃佈局:(1)父元素中包含左中右三個盒子,並且讓他們分別左浮動。(2)將中間的盒子寬度設為100%,並且它在html中程式碼位置放在左右程式碼位置的上面(就是所說的第一個渲染)。(3)左右兩邊使用margin-left的負值,使他們與中間的盒子同行,(左邊:-100%,
css 三欄佈局 聖盃佈局 雙飛翼 flex
前言 三欄佈局是常見的佈局方式,應用場景:左、右兩側是定寬的導航欄,中間內容自適應。在參考了詳解 CSS 七種三欄佈局技巧 後,我對三欄佈局有了更深刻的認識,本文是我對上文的解讀,是自己消化理解的過程,此文是為了加深理解知識而寫,希望可以幫到你。 示意圖
Css之聖盃佈局和雙飛翼佈局
聖盃佈局和雙飛翼佈局是我再一次京東面試中聽到的詞彙,簡單來說,這種佈局其實都是我們CSS+div佈局的入門級,但是大家肯恩都不知道這個名詞,高大上的名詞一般都會顯示你的知識面及專業度 閒話不多說,原理講起來: 事實上,聖盃佈局其實和雙飛翼佈局是一回事。它們實現的都是三欄佈局