網頁設計中分欄布局的幾種實現方案

2021-09-16 13:44:52 字數 925 閱讀 4808

在網頁設計中,分欄布局是常用的布局手法,一般有兩欄布局,三欄布局。這其中又以部分欄固定,部分欄自適應的方式最為常見。下面我們先以常見的三欄布局開始,描述一下常用的幾種實現方案。

三欄布局最常見的就是左右定寬,中間自適應的方式,我們就先以這種方案開始講述。

首先我們先假設頁面的高度固定為100畫素,下面先快速地看一遍,五種布局方案的實現方法。

浮動布局

絕對定位的布局

**布局

flex布局

網格布局

這幾種布局方案,表面上看起來沒有什麼問題,但是這是在我們假設固定了高度的情況下,如果高度是不固定的,這幾種布局方案就會帶來一系列的問題:

浮動布局

這個時候,我們可以看到,頁面的布局已經亂了,至於為什麼會亂,做過「首字下沉」效果,或者「**混排」效果的同學,應該知道這其中的原因,是因為在css的浮動機制中,當容器中存在乙個浮動的元素時,緊隨其後的元素的內容,會緊貼該元素的右邊框進行排列,如果超出該元素的高度後,則會緊貼父元素的最左邊框進行排列(右浮動則相反)。

要解決這個問題,有很多種方案:

給中間的元素增加左右各100畫素的padding值,如果使用這種方法,需要自己想辦法處理背景的問題:

建立bfc,為中間元素創造塊格式上下文,最常見的做法就是設定 overflow 為 hidden(也有人用 auto ):

接下來我們看一下絕對定位布局。

網頁設計中分欄布局的幾種實現方案

在網頁設計中,分欄布局是常用的布局手法,一般有兩欄布局,三欄布局。這其中又以部分欄固定,部分欄自適應的方式最為常見。下面我們先以常見的三欄布局開始,描述一下常用的幾種實現方案。三欄布局最常見的就是左右定寬,中間自適應的方式,我們就先以這種方案開始講述。首先我們先假設頁面的高度固定為100畫素,下面先...

網頁設計的布局有哪幾種

網頁可以說是 構成的基本元素。當我們輕點滑鼠,在網海中遨遊,一副副精彩的網頁會呈現在我們面前,那麼,網頁的精彩與否的因素是什麼呢?色彩的搭配 文字的變化 的處理等,這些當然是不可忽略的因素,除了這些,還有乙個非常重要的因素 網頁布局。下面 萬戶網路談下有關網頁布局型別.網頁布局型別 網頁布局大致可分...

標準的網頁布局設計流程

其實標準的網製作完成的工作實際是 psd to html,一般情況下,我們會拿到美工的psd,這時候不同的人會有不同的做法 1.開啟fireworks將切割匯出為html。3.先在ps中完成切圖後,在文字編輯器中看著效果圖一步步的製作。以上是大多被採用的方法,但都不好 第一種方法最為不好,這樣的 根...