CSS 後台布局例項

2021-09-03 09:59:29 字數 1725 閱讀 9595

下面的例子是乙個簡單的布局

最上面是header,左邊是乙個logo(老男孩),右邊是使用者的登入資訊

中間一大塊是內容,內容左側是選單,右側是具體的內容

**如下:

body的margin為0,確保邊上全部填滿

absolute 確保位置不變; 注意如果他的父級標籤有relative,他相對於這個父級標籤的位置不變,否則相對於body的位置不變

overflow 在內容超過標籤範圍之後會自動加個滾輪

font-awesome外掛程式可以使用現成的小標籤

老男孩    

我的資料

登出    

5     

a    

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

效果如下

layui 柵格系統與後台布局

為了豐富網頁布局簡化html css 的耦合,並提公升多終端的適配能力,layui在2.0版本中引進了自己的一套具備響應式能力的柵格系統。我們將容器進行了12等分,預設了4 12種css排列類,它們在移動裝置 平板 電腦中 大尺寸四種不同的螢幕下發揮著各自的作用。一 柵格布局規則 採用 layui ...

CSS布局例項

接下來開始要真正設計布局了。和傳統的方法一樣,你首先要在腦海裡有大致的輪廓構想,然後用photoshop把它畫出來。你可能看到有關web標準的站點大都很樸素,因為web標準更關注結構和內容,實際上它與網頁的美觀沒有根本衝突,你想怎麼設計就怎麼設計,用傳統 方法實現的布局,用div也可以實現。技術有乙...

CSS例項 CSS實現的等高網頁布局

為了讓網頁更美觀 協調,有的時候需要用到左右等到布局,傳統的等高布局是用 j ascript 實現的,現在來看看 silence 發明的真正的 css 實現的等高布局。為了讓網頁更美觀 協調,有的時候需要用到左右等到布局,傳統的等高布局是用 j ascript 實現的,現在來看看 silence 發...