20180615 CSS 網頁布局

2021-08-20 19:03:05 字數 1582 閱讀 8080

寫了半天竟然沒了!!!!好氣好氣!

認識布局:

-以最適合瀏覽的方式將和文字排放在頁面的不同位置

-布局模式有多種,不同的製作者會有不同的布局設計

為什麼要學習網頁布局:

-製作乙個網頁的基礎

課程包含內容:

-行布局

-多列布局

-聖杯布局

-雙飛翼布局

學習本門課程需要掌握的知識:

-html和css基礎

-會使用div+css進行排版

-熟悉float屬性,position屬性

-基礎的行布局

-行布局自適應

-行布局自適應限制最大寬   max-width:xx px;

-行布局垂直居中

html

>

lang=

"en"

>

class=

"container"

>這是頁面內容

-行布局固定寬

-行布局部位自適應

-行布局導航隨螢幕滾動

html

>

lang=

"en"

>

這是頁面的頭部

這是頁面的banner圖

這是頁面的內容

這是頁面的底部

經典的列布局:

-兩列布局固定;

-兩列布局自適應;

-三列布局固定;

-三列布局自適應;

兩列:

html

>

lang=

"en"

>

這是頁面的左側

這是頁面的右側

三列:

中間那一列,可以放在right後,也可以放在左面,

float值為left。

>這是頁面的左側

class=

"middle"

>這是頁面的中間

class=

"right"

>這是頁面的右側

混合布局:

-混合布局固定;

-混合布局自適應;

html

>

lang=

"en"

>

class=

"header"

>這是頁面的頭部

class=

"container"

>

class=

" left"

>這是頁面的左側

class=

"right"

>這是頁面的右側

class=

"footer"

>這是頁面的底部

CSS 網頁布局

一些布局 行布局 多列布局 聖杯布局 雙飛翼布局 會使用到 html和css基礎 會使用div css進行排版 熟悉 float屬性 position屬性。1 經典的行布局 基礎的行布局 行布局自適應 行布局自適應限制最大寬 行布局垂直水平居中 container 水平與垂直居中 container...

CSS 網頁布局

頭部區域位於整個網頁的頂部,一般用於設定網頁的標題或者網頁的 logo 鏈結鏈結 鏈結 重置瀏覽器大小檢視效果。鏈結鏈結 鏈結學的不僅是技術,更學的不僅是技術,更是夢想!學的不僅是技術,更是夢想!學的不僅是技術,更是夢想!學的不僅是技術,更是學的不僅是技術,更是夢想 學的不僅是技術,更是夢想!學的不...

CSS網頁布局

本文作為個人筆記,內容大多從網上查閱 提到布局就不得不提一提標準文件流了 文件流指的是元素排版布局過程中,元素會自動從左往右,從上往下的流式排列。並最終窗體自上而下分成一行行,並在每行中從左至右的順序排放元素。標準流的微觀現像 1.空白摺疊現象 多個空格會被合併成乙個空格顯示到瀏覽器頁面中。img標...