1.浮動(dòng)

1.1傳統(tǒng)網(wǎng)頁布局的三種方式

普通流（標(biāo)準(zhǔn)流）
- 概念：標(biāo)簽按照規(guī)定的默認(rèn)方式排列
1. 塊級(jí)元素會(huì)獨(dú)占一行，從上到下順序排列
- 常用元素：div、hr、p、h1~h6、ul
2.行內(nèi)元素會(huì)按順序從左到右，碰到父元素邊緣自動(dòng)換行
- 常用元素：span、a、em
浮動(dòng)
定位

1.2 為什么需要浮動(dòng)

原因：很多布局效果，標(biāo)準(zhǔn)流無法實(shí)現(xiàn)，此時(shí)可以利用浮動(dòng)完成布局，浮動(dòng)可以改變?cè)貥?biāo)簽的默認(rèn)排列方式。
浮動(dòng)的典型應(yīng)用：可以讓多個(gè)塊級(jí)元素一行內(nèi)排列顯示
網(wǎng)頁布局第一準(zhǔn)則：多個(gè)塊級(jí)元素縱向排列用標(biāo)準(zhǔn)流，多個(gè)塊級(jí)元素橫向排列用浮動(dòng)。

1.3 浮動(dòng)概念

概念：float屬性用于創(chuàng)造浮動(dòng)框，將其移動(dòng)到一邊，直到左邊緣或右邊緣觸及包含塊或另一個(gè)浮動(dòng)框的邊緣。
語法：選擇器 { float: 屬性值;}
- none：元素不浮動(dòng)（默認(rèn)值）
- left：元素向左浮動(dòng)
- right：元素向右浮動(dòng)

1.4 浮動(dòng)特性

主要特性：
1.浮動(dòng)元素會(huì)脫離標(biāo)準(zhǔn)流（脫標(biāo)）
2.浮動(dòng)的元素會(huì)一行內(nèi)顯示并元素頂部對(duì)齊
3.浮動(dòng)的元素具有行內(nèi)塊元素的特性

注意： 浮動(dòng)的元素不占有位置??！

1.4.1 脫標(biāo)

脫標(biāo)元素的特性：
1. 脫離標(biāo)準(zhǔn)流的控制（浮）移動(dòng)到指定位置（動(dòng)），即脫標(biāo)。
2. 浮動(dòng)的盒子不再保留原先的位置。

1.4.2 浮動(dòng)元素一行顯示

要想在一行顯示，每個(gè)標(biāo)簽都要設(shè)置浮動(dòng)屬性。
浮動(dòng)元素是互相貼靠在一起的，沒有縫隙。
如果父級(jí)寬度裝不下這些浮動(dòng)的盒子，多出的盒子會(huì)另起一行對(duì)齊。

1.4.3 浮動(dòng)元素行內(nèi)塊特性

任何元素都可以浮動(dòng)，無論之前是什么模式的元素，添加浮動(dòng)后具有行內(nèi)塊元素的相似特性。
- 行內(nèi)元素可以直接給高度/寬度。
- 如果塊級(jí)元素沒有設(shè)置寬度，默認(rèn)寬度和父級(jí)一樣寬，但是添加浮動(dòng)后，它的大小根據(jù)內(nèi)容來決定。

1.5 浮動(dòng)元素和標(biāo)準(zhǔn)流父級(jí) 搭配

作用：為了約束浮動(dòng)元素位置，常常，先用標(biāo)準(zhǔn)流的父級(jí)元素排列上下位置，之后在內(nèi)部子元素使用浮動(dòng)排列左右位置。符合網(wǎng)頁布局第一準(zhǔn)則。

注意： 有很多案列，比如小米的展示部分的布局，商品展示欄的布局，以及常用的網(wǎng)頁結(jié)構(gòu)的布局。

1.6 浮動(dòng)注意點(diǎn)

1. 浮動(dòng)和標(biāo)準(zhǔn)流的父盒子搭配

先用標(biāo)準(zhǔn)流的父元素排列上下位置
再用內(nèi)部子元素浮動(dòng)排列左右位置

2. 一個(gè)元素浮動(dòng)了，理論上其余的兄弟元素也要浮動(dòng)

一個(gè)盒子里有多個(gè)盒子，如果其中一個(gè)盒子動(dòng)了，那么其他兄弟盒子也應(yīng)該浮動(dòng)，以免出現(xiàn)問題
浮動(dòng)的盒子只會(huì)影響浮動(dòng)盒子后面的標(biāo)準(zhǔn)流，不會(huì)影響前面的標(biāo)準(zhǔn)流。

2.清除浮動(dòng)

2.1 為什么要清除浮動(dòng)

原因：父級(jí)盒子在很多情況下，不方便給高度，但是子盒子浮動(dòng)不占位置，最后父級(jí)盒子高度為0，就會(huì)影響下面的標(biāo)準(zhǔn)流盒子。
父級(jí)盒子不方便設(shè)高度場(chǎng)景：
- 商品頁面商品會(huì)隨時(shí)添加，更新
- 新聞頁面的文章長短不一樣
關(guān)鍵： 由于浮動(dòng)元素不再占有原標(biāo)準(zhǔn)流的位置，所以會(huì)對(duì)后面的元素排版產(chǎn)生影響。

2.2 清除浮動(dòng)元素的本質(zhì)

清除浮動(dòng)的本質(zhì)是清除浮動(dòng)元素造成的影響
如果父盒子本身有高度，則不需要清除浮動(dòng)
清除浮動(dòng)后，父級(jí)就會(huì)根據(jù)浮動(dòng)的子盒子自動(dòng)檢測(cè)高度，父級(jí)有了高度，就不會(huì)影響下面的標(biāo)準(zhǔn)流了。

2.3 清除浮動(dòng)

語法：選擇器{ clear: 屬性值;}
- left：不允許左側(cè)有浮動(dòng)元素（清除左側(cè)浮動(dòng)的影響）
- right：不允許右側(cè)有浮動(dòng)元素（清除右側(cè)浮動(dòng)的影響）
- both：同時(shí)清除左右兩側(cè)浮動(dòng)的影響

注意： 在實(shí)際工作中，幾乎只使用clear:both;

清除浮動(dòng)的策略是：閉合浮動(dòng)。

2.4 清除浮動(dòng)方法

額外標(biāo)簽法也稱隔墻法，W3C推薦
父級(jí)添加 overflow 屬性
父級(jí)添加 after 偽元素
父級(jí)添加雙偽元素

2.4.1 額外標(biāo)簽法

語法：在最后一個(gè)浮動(dòng)的子元素后面，添加一個(gè)額外的標(biāo)簽，添加清除浮動(dòng)樣式。例如 <div style= "clear:both"></div>，或者其他標(biāo)簽（如< br />等）
- 優(yōu)點(diǎn)：書寫方便，容易理解
- 缺點(diǎn)：添加許多無意義的標(biāo)簽，結(jié)構(gòu)化較差。工作中不常用。

注意： 添加的空標(biāo)簽，必須是一個(gè)塊級(jí)元素才可以。

2.4.2 父級(jí)添加 overflow 屬性

語法：給父級(jí)添加overflow屬性，屬性值為hidden、auto、scroll。
使用overflow:hidden;來清除浮動(dòng)。
- 優(yōu)點(diǎn)：代碼簡潔
- 缺點(diǎn)：無法顯示溢出的部分

2.4.3 父級(jí)添加 after 偽元素

語法：:after方式是額外標(biāo)簽法的升級(jí)版，是給父元素添加的
- 優(yōu)點(diǎn)：沒有添加標(biāo)簽，結(jié)構(gòu)簡單
- 缺點(diǎn)：照顧低版本瀏覽器
- 代表網(wǎng)站：百度、淘寶網(wǎng)、網(wǎng)易等
```
.clearfix:after{
  content:"";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
  }
.clearfix{   /* IE6、7專有（兼容性） */
*zoom:1;
}
...
<父元素 class="clearfix">
```

2.4.4 父級(jí)添加雙偽元素

語法：也是給父元素添加，只是這次是在前后添加了偽元素。
- 優(yōu)點(diǎn)：代碼更簡潔
- 缺點(diǎn)：照顧低版本瀏覽器
- 代表網(wǎng)站：小米、騰訊等
```
.clearfix:before,.clearfix:after{
  content:"";
  display:block;
  }
.clearfix:after{
  clear:both;
  }
.clearfix{
  *zoom:1;
  }
...
<父元素 class="clearfix">
```

2.5 清除浮動(dòng)總結(jié)

為什么清除浮動(dòng)：
- 父級(jí)沒高度
- 子盒子浮動(dòng)了
- 影響下面布局

清除浮動(dòng)方式：

方式	優(yōu)點(diǎn)	缺點(diǎn)
額外標(biāo)簽法（隔墻法）	易懂、書寫方便	添加無意義標(biāo)簽，結(jié)構(gòu)化差
父級(jí)`overflow:hidden;`	書寫簡單	溢出隱藏
父級(jí)`:after偽元素`	結(jié)構(gòu)語義化正確	IE6-7不支持`:after`，兼容性問題
父級(jí)雙偽元素	結(jié)構(gòu)語義化正確	IE6-7不支持`:after`，兼容性問題

3.PS切圖

3.1 常見的圖片格式

jpg圖像格式：JPEG(.JPG)對(duì)色彩保留較好，高清，顏色多，產(chǎn)品類圖片常使用。圖片較大
gif圖像格式：GIF格式最多只能存儲(chǔ)256色，常顯示簡單圖形及字體，可以保存透明背景和動(dòng)畫效果。
png圖像格式：結(jié)合了GIF和JPEG的優(yōu)點(diǎn)，顏色好且保持透明背景。背景類圖片常用。
PSD圖像格式：是PS的專用格式，是設(shè)計(jì)稿常用的格式。

3.2 PS切圖

常見的切圖方式：圖層切圖、切片切圖、PS插件切圖等

3.2.1 圖層切圖

方法1（簡單）：右擊圖層-快速導(dǎo)出為PNG
方法2 （合并圖層）：先合并需要的圖層（ctrl+e），再導(dǎo)出PNG

3.2.2 切片切圖

方法：
1.先利用切片選中圖片
2.文件菜單-導(dǎo)出-存儲(chǔ)為web設(shè)備所用格式-選擇需要的圖片格式-存儲(chǔ)

3.2.3 PS插件切圖

方法：利用Cutterman插件來簡化切圖過程

4.學(xué)成案例

4.1 CSS屬性書寫順序

建議按照以下順序：
1.布局定位屬性：display/position/float/clear/visibility/overflow
2.自身屬性：width/height/margin/padding/border/background
3.文本屬性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
4.其他屬性(CSS3)： content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient...

4.2 頁面布局整體思路

為了提高網(wǎng)頁制作效率，整體思路如下：
1.必須確定頁面的版心（可視區(qū)），通過測(cè)量
2.分析頁面中的行模塊，以及每個(gè)行模塊的列模塊，為頁面布局的第一準(zhǔn)則。
1. 一行中的列模塊經(jīng)常浮動(dòng)布局，先確定每個(gè)列的大小，再確定列的位置，為頁面布局的第二準(zhǔn)則。
  4.制作HTML結(jié)構(gòu)，還是遵循先有結(jié)構(gòu)，后有樣式的原則。
  5.先理清布局結(jié)構(gòu)，再寫代碼。需要多寫多積累。

4.3 頁面具體布局

4.3.1 頭部布局

主盒子類名為header
- 包括有：logo、nav導(dǎo)航、search搜索、ueser個(gè)人等盒子
- 這幾個(gè)盒子都要設(shè)置浮動(dòng)
導(dǎo)航欄： 在實(shí)際開發(fā)中，不會(huì)直接用a標(biāo)簽，而是用li標(biāo)簽包含a的做法。
- li+a語義更清晰，這是有條理的列表型內(nèi)容。
- 如果直接用a，搜索引擎容易辨別為有堆砌關(guān)鍵字的嫌疑（故意堆砌關(guān)鍵字容易被搜索引擎降權(quán)），影響網(wǎng)站的排名。
注意：
1. 讓導(dǎo)航欄一行顯示，給li添加浮動(dòng)，因?yàn)?code>li是塊級(jí)元素，需要一行顯示。
2. 這個(gè)nav導(dǎo)航欄可以不給寬度，方便將來添加其余文字。
3. 導(dǎo)航欄里的文字不一樣多，最好給鏈接a 左右padding撐開盒子，而不是指定寬度。
搜索框： 一個(gè)大盒子里包含2個(gè)表單，input文本框和button按鈕。
- 按鈕使用的是背景圖的設(shè)置
- 文本框和按鈕之間會(huì)有默認(rèn)的間距，要手動(dòng)清除。

4.2 banner布局

通欄的大盒子banner，不給寬度，給高度，給一個(gè)背景。
版心盒子，水平居中對(duì)齊，其他元素在這個(gè)盒子里布局
版心內(nèi)左側(cè)subnav導(dǎo)航欄
版心右側(cè)course課程欄

4.3 精品推薦模塊

大盒子goods 水平居中，且有盒子陰影
左側(cè)盒子是標(biāo)題H3左浮動(dòng)
中間盒子是鏈接左浮動(dòng)，good-item 距離可以控制鏈接的左右外邊距（注意：行內(nèi)元素只給左右外邊距）
右側(cè)盒子是 mod（修改的意思）右浮動(dòng)

4.4 精品展示大模塊

最大的盒子box版心水平對(duì)齊
上面的盒子box-hd，里面左側(cè)標(biāo)題H3左浮動(dòng)，右側(cè)鏈接a右浮動(dòng)
下面的盒子box-bd，里面是無序列表
小li外邊距的問題，小技巧：給box-hd寬度為1215 就可以一行裝5個(gè)li。
即最后一個(gè)盒子沒有外邊距時(shí)，可以直接給父級(jí)盒子一個(gè)大的寬度，就可以假裝沒有外邊距。

4.5 底部模塊

大盒子是通欄盒子footer，底色是白色
大盒子版心水平居中
盒子版權(quán)copyright左對(duì)齊
盒子鏈接links 右對(duì)齊

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

小白前端08-浮動(dòng)/PS切圖/學(xué)成案例

小白前端08-浮動(dòng)/PS切圖/學(xué)成案例

1.浮動(dòng)

1.1傳統(tǒng)網(wǎng)頁布局的三種方式

1.2 為什么需要浮動(dòng)

1.3 浮動(dòng)概念

1.4 浮動(dòng)特性

1.4.1 脫標(biāo)

1.4.2 浮動(dòng)元素一行顯示

1.4.3 浮動(dòng)元素行內(nèi)塊特性

1.5 浮動(dòng)元素和標(biāo)準(zhǔn)流父級(jí) 搭配

1.6 浮動(dòng)注意點(diǎn)

2.清除浮動(dòng)

2.1 為什么要清除浮動(dòng)

2.2 清除浮動(dòng)元素的本質(zhì)

2.3 清除浮動(dòng)

2.4 清除浮動(dòng)方法

2.4.1 額外標(biāo)簽法

2.4.2 父級(jí)添加 overflow 屬性

2.4.3 父級(jí)添加 after 偽元素

2.4.4 父級(jí)添加雙偽元素

2.5 清除浮動(dòng)總結(jié)

3.PS切圖

3.1 常見的圖片格式

3.2 PS切圖

3.2.1 圖層切圖

3.2.2 切片切圖

3.2.3 PS插件切圖

4.學(xué)成案例

4.1 CSS屬性書寫順序

4.2 頁面布局整體思路

4.3 頁面具體布局

4.3.1 頭部布局

4.2 banner布局

4.3 精品推薦模塊

4.4 精品展示大模塊

4.5 底部模塊

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

小白前端08-浮動(dòng)/PS切圖/學(xué)成案例

1.浮動(dòng)

1.1傳統(tǒng)網(wǎng)頁布局的三種方式

1.2 為什么需要浮動(dòng)

1.3 浮動(dòng)概念

1.4 浮動(dòng)特性

1.4.1 脫標(biāo)

1.4.2 浮動(dòng)元素一行顯示

1.4.3 浮動(dòng)元素行內(nèi)塊特性

1.5 浮動(dòng)元素和 標(biāo)準(zhǔn)流父級(jí) 搭配

1.6 浮動(dòng)注意點(diǎn)

2.清除浮動(dòng)

2.1 為什么要清除浮動(dòng)

2.2 清除浮動(dòng)元素的本質(zhì)

2.3 清除浮動(dòng)

2.4 清除浮動(dòng)方法

2.4.1 額外標(biāo)簽法

2.4.2 父級(jí)添加 overflow 屬性

2.4.3 父級(jí)添加 after 偽元素

2.4.4 父級(jí)添加雙偽元素

2.5 清除浮動(dòng)總結(jié)

3.PS切圖

3.1 常見的圖片格式

3.2 PS切圖

3.2.1 圖層切圖

3.2.2 切片切圖

3.2.3 PS插件切圖

4.學(xué)成案例

4.1 CSS屬性書寫順序

4.2 頁面布局整體思路

4.3 頁面具體布局

4.3.1 頭部布局

4.2 banner布局

4.3 精品推薦模塊

4.4 精品展示大模塊

4.5 底部模塊

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

1.5 浮動(dòng)元素和標(biāo)準(zhǔn)流父級(jí) 搭配