前端pink老師網課

0p前言

先聽與看，動手練習，分享交流

1p品優購靜态網站基礎班

精通網頁布局

html5基礎，沒有相容性的标簽

css3基礎，傳統企業網頁制作

h5c3，有一定相容性，與未來更好地接軌

品優購電商網站

2p

web标準

3p

概念

網站 網頁集合

網頁 html格式，浏覽器閱讀

圖檔元素，連結，文字，聲音，視訊

html檔案 超文本标記語言 标記語言 标簽

超文本

網頁是由網頁元素組成的

圖檔，連結，文字，聲音，視訊，html字尾

書寫，浏覽器打開

4p

常用的浏覽器

網頁顯示，運作的平台

chrome

浏覽器核心 渲染引擎

讀取網頁内容，整理訊息，計算網頁的顯示方式并顯示頁面

5p

web标準的構成

結構html，表現css，行為JavaScript互動

結構樣式行為相分離

結構最重要

6p

html标簽（上）

目标

1.書寫注意規範

文法規範

尖括号包圍的關鍵詞

成對出現

7p

2.标簽關系

包含關系和并列關系

8p

第一個html網頁

網頁标題

字尾名必須是.html

最大HTML标簽

head裡有titie

body和head并列

9p

安裝插件

10p

<!DOCTYPR html>聲明文檔類型版本

lang語言種類

en英語

zh-CN中文，提倡

警示

必須要寫

11p常用标簽

标簽語義

讓頁面結構更清晰

标題标簽

段落标簽

12p标題标簽

雙标簽

-

文字加粗一行顯

從重到輕

不加标簽不變粗

13段落和換行标簽

檢視 切換自動換行 文本在一個段落中會根據浏覽器視窗的大小自動換行 段落和段落之間有空隙 換行标簽

強制換行，單标簽

14p

體育新聞

crtl+

15p文本格式化标簽

加粗

​推薦

​

傾斜

​推薦

​

删除線

​推薦

​

下劃線

推薦

​

重點加粗和傾斜

16p常用标簽

無語義，盒子，裝内容 特點 div一個人獨占一行，大盒子 span跨距，用來布局，一行可以放很多個，小盒子

17p圖像标簽和路徑（重點）

src指定圖像檔案的路徑和檔案名

單标簽

alt替換文本，圖像顯示不出來的時候用文字替換

圖檔無法顯示出來

title提示文本，滑鼠放到圖像上，提示的文字

插入圖像，alt，title

18p圖像标簽下

width給圖像設定寬度

height給圖像設定高度

隻修改一個，等比例縮放

border給圖像設定邊框，css後續改進

19p圖像标簽和路徑（重點）

注意點：

1.圖像标簽可以擁有多個屬性，必須寫在标簽名的後面

2.屬性之間不分先後順序，标簽名與屬性、屬性與屬性之間均以空格分開

3.屬性=“屬性值”

20p路徑

1、目錄檔案夾和根目錄：

目錄檔案夾：放置相關素材

根目錄：最外面那一層

21p路徑

建立檔案夾，把圖檔都放到檔案夾裡

相對路徑：圖檔相對于html頁面的位置

22p相對路徑

下一級路徑

上一級路徑

…/上一級符号

…/…/上上一級符号

23p絕對路徑，很少使用，隻用于自己的電腦

目錄下的絕對位置，盤或完整的網絡位址

了解即可

24p超連結标簽（重點）

​​文本或圖像​​ href用于指定連結目标的url位址，（必須屬性）當為标簽應用href屬性時，它就具有了超連結的功能

target用于指定連結頁面的打開方式，其中—self為預設值，目前視窗打開頁面，-blank為在新視窗中打開方式

25p連結标簽（下）

外部連結：例如​​​百度​​​ 内部連結：網站内部頁面之間的互相連結，例如​​首頁​​ 空連結：如果沒有确定連結目标時，首頁

下載下傳連結：如果href裡面位址是一個檔案或者壓縮包，會下載下傳這個檔案，位址連結的是檔案.exe或者是壓縮包，會下載下傳這個檔案，例如​​下載下傳檔案​​ 網頁元素連結：在網頁中的各種網頁元素，如文本，圖像，表格，音頻，視訊都可以添加超連結

26p錨點連結：點我們點選連結，可以快速定位到頁面中的某個位置

1.​​個人生活​​,在連結文本的href屬性中，設定屬性值為#名字的形式

2.找到目标位置标簽，裡面添加一個id屬性=剛才的名字，例如

第二集介紹

27p注釋

便于閱讀了解，但不顯示在頁面内

結束

快捷鍵 Ctrl+ /

顯示給程式員用

更好的解釋代碼的功能

特殊字元

&nbsp 空格，以；分開

&lt，&gt；，小于号，大于号 例如&lt； p &gt； 是一個段落标簽

28p綜合案例

複習

檢視-自動換行

target="_blank" 在新的頁面打開

29p綜合案例下

錨點連結

Crtl+x 剪切

超連結，建立一個HTML檔案

02p表格标簽基本使用

1.表格标簽

1.1表格的主要作用

用于顯示，展示資料

1.2表格的基本文法

... ...

單元格内的文字

1.

定義表格 2.定義表格中的行，必須嵌套在

标簽中 3.定義單元格，嵌套在标簽中 4.td表格資料，資料單元格的内容 1.3表頭單元格标簽 一般位于第一行或第一列，文本内容加粗顯示，突出重要性

4p表格相關屬性

1.4表格屬性

css

相關屬性（這些屬性要寫到table裡面去）

align 對齊，居中

left，center，right

border=“1”表格邊框，預設為“”

cellpadding 像素值 規定單元邊沿與其内容之間的空白，預設1像素

cellspacing 像素值 規定單元格之間的空白，預設2像素，一般改為0

width，height，設定表格寬和高

5p小說排行榜案例

先書寫制作表格的結構

1.th

2.td

3.單元格裡面可以放任何元素，文字連結圖檔等

後書寫表格屬性

1.用到寬度高度邊框

2.表格浏覽器中對齊

6p表格結構标簽

表格頭部和表格主體，更好的表達語義

頭部 主體 可收縮 都放在

中

7p合并單元格

1.6合并單元格

合并單元格方式

跨行合并：rowspan=“合并單元格的個數”

跨列合并：colspan=“合并單元格的個數”

目标單元格（寫合并代碼）

跨行：最上側單元格為目标單元格，寫合并代碼

跨列：最左側單元格為目标單元格，寫合并代碼

三步曲

1.确定跨行還是跨列合并

2.找到目标單元格，寫上合并方式=合并的單元格數量，比如：

3.删除多餘的單元格

8p表格總結

1.表格相關标簽

table

tr行

td單元格

th表頭單元格标簽

thead頭部區域标簽

tbody主體區域标簽

2.相關屬性

align

border

cellpadding

cellspacing

width

3.合并單元格

colspan

rowspan

9p無序清單

清單就是用來布局的

無序清單，有序清單，自定義清單

2.1無序清單（重點）

• 清單項

• 内隻能放
• 相當于一個容器，可以容納所有元素 無序清單會帶有自己的樣式屬性，但在實際使用時，我們會使用css來設定 ul作為父親，li作為兒子，可以多個，li内可以放置任何标簽

10p有序清單

有排列順序的清單

1. 裡放
2. 注意事項與無序清單基本一緻

11p自定義清單

對術語或名詞進行解釋和描述

一起來使用

圍繞

來使用 1.

裡面隻能包含

和

2.

和

個數沒有限制，經常是一個

對應多個

12p清單總結

無序标簽

• 沒有順序，使用較多

1. 有序标簽
2. 有順序，使用較少 自定義清單 裡面隻能包含dt和dd

注意：

1.學會什麼時候用無序清單，什麼時候用自定義清單

2.無序清單和自定義清單怎麼寫

13p表單使用場景以及分類

3.1為什麼需要表單

收集使用者資訊

我們需要跟使用者互動

3.2表單的組成

表單域，表單控件（表單元素），提示資訊

最常見于注冊頁面

14p表單域

包含表單元素的區域

用于定義表單域，以實作使用者資訊的收集和傳遞 會把它範圍内的表單元素資訊送出給伺服器

3.3 表單域

1.在寫表單元素之前，應該有個表單域把他們進行包含

2.表單域是form标簽

三個屬性在伺服器程式設計學習

15p表單控件（表單元素）

1.input輸入表單元素

用于收集使用者資訊

<input type="屬性值” />

input為單标簽

type屬性設定不同的屬性值用來指定不同的控件類型

test ：定義單行的輸入字段，使用者可在其中輸入文本，預設寬度為20個字元

password：定義密碼字段，該字段中的字元被掩碼，使用者看不見的輸入密碼

16p單選按鈕和複選框

單選按鈕，可以實作多選一

CheckBox：定義複選框

用

換行

17p name和value屬性

name 由使用者自定義 定義input元素的名稱 每個表單元素獨一無二的

name是表單元素名字，這裡性别單選按鈕必須有相同的名字name才可以實作多選一 name=“sex”

value 由使用者自定義 規定input元素的值 隻在文本框中可以看到效果，單選按鈕和複選框看不到

注意：

1.name和value是每個表單元素都有的屬性值，主要給背景人員使用

2.name表單元素的名字，要求單選按鈕和複選框要有相同的name值

18p

checked 單選按鈕和複選框可以設定checked屬性，當頁面打開的時候可以預設選中這個按鈕，單選框隻可以選擇一個加上checked=“checked” 主要針對單選按鈕和複選框

maxlength 正整數 規定輸入字段中的字元的最大長度，一般較少使用

19p四個屬性

20p

type屬性

submit 定義送出按鈕，送出按鈕會把表單資料發送到伺服器

文法格式

reset 定義重置按鈕，重置按鈕會清除表單中的所有資料

<input type=“reset” value="重新填寫”>

21p

button 定義可點選按鈕（多數情況下，用于通過JavaScript啟動腳本）

例如擷取驗證碼，不送出資料

普通按鈕

<input type=“button” value="擷取短信驗證碼”>

file 檔案域 使用場景，上傳檔案使用的

例如 上傳頭像：

22p

标簽為input元素定義标注（标簽）

用于綁定一個表單元素，當點選标簽内的文本時，浏覽器就會自動将焦點（光标）轉到或者選擇對應的表單元素上，用來增加使用者體驗

男

核心：标簽的for屬性應當與相關元素的id屬性相同

23p

select下拉表單元素

多個選項讓使用者選擇，并且想要節約頁面空間

山東人 ...... ...

1.select中至少包含一對option

2.在option中定義selected=“selected”時，目前項即為預設選中項

24p textarea文本域元素

在使用者輸入内容較多的情況下，就不能使用文本框表單了

用于定義多行文本輸入的控件

可以輸入更多的文字，常見于留言闆，評論

今日回報： pink老師，我知道這個回報留言是textarea來做的 實際開發用css來改變大小

26p綜合案例

30p查閱文檔

百度

w3c

mdn

01p css層疊樣式表導讀

2p css簡介

主要使用場景是美化網頁，布局頁面

1.HTML的局限性

隻關注内容的語義

1.2 css 層疊樣式表的簡稱

css樣式表

也是一種标記語言

主要用來設定HTML頁面中的文本内容，圖檔的外形，版面的布局和外觀顯示樣式

總結

1.HTML主要做結構，顯示元素内容

2.css美化HTML，布局網頁

3.樣式與結構相分離

3p css文法規範

兩部分

1,選擇器

2，一條或多條聲明

體驗

寫在head标簽裡

在style标簽裡

選擇器樣式，給誰改樣式

p {

color：pink；

font-size：12px；修改了文字大小為12像素

}

4p css代碼風格

不是強制規範，而是符合實際開發方式

1.樣式格式書寫

展開格式

h3 {

color：pink；

font-size：12px；修改了文字大小為12像素

}

2.樣式大小寫，通常使用小寫格式

3.空格規範

h3 {

color： pink；

}

3.1.屬性值前面，冒号後面，保留一個空格

3.2，選擇器（标簽）和大括号中間保留白格

5p 選擇器的作用

根據不同需求把不同的标簽選出來，選擇标簽用的

1.選對人

2.做對事

6p 标簽選擇器

基礎選擇器由單個選擇器組成

1.标簽選擇器

用HTML名稱作為選擇器，按标簽名稱分類，為頁面中某一标簽指定統一的css樣式

作用：

把某一類标簽全部選擇出來，比如所有的div标簽

優點：

能快速為頁面中同類型的标簽統一設定樣式

缺點：

不能設計差異化樣式，隻能選擇全部的目前标簽

7p 類選擇器

單獨選一個或者某幾個标簽

.類名 {

屬性1： 屬性值1；

,

}

文法

結構需要用class屬性來調用class類的意思

變紅色

口訣：樣式點定義 結構類（class ）調用 一個或多個 開發最常用

注意：

1.類選擇器使用“.”進行辨別，後面緊跟類名（自定義，我們自己命名的），不能使用标簽名

2.可以了解為給這個标簽起了個名字

3.長名稱或詞組可以使用中橫線為選擇器命名

4.不要使用純數字，中文等命名，盡量使用英文字母來表示

5.命名要有意義，盡量使别人一眼就知道這個類名的目的

6.命名規範

頭：header

内容：container

尾：footer

導航：nav

側欄：sidebar

8p 使用類選擇器畫盒子

1.類選擇器的使用

2.div就是一個盒子，用來裝網頁内容

9p 類選擇器-多類名

可以給一個标簽指定多個類名

一個标簽有多個名字

1.多類名使用方式

亞瑟

(1)在标簽class屬性中寫多個類名 (2)多個類名中間必須用空格分開

2.使用場景

（1）可以把一些标簽元素相同的樣式（共同的部分）放到一個類的裡面

（2）這些标簽都可以調用這個公共的類，然後再調用自己獨有的類

（3）進而節省css代碼，統一修改也非常友善

10p id選擇器

HTML元素以id屬性來設定id選擇器，css中id選擇器以“#”來定義

例

#nav {

color：red；

}

注意：口訣：樣式通過#定義，結構id調用，隻能調用一次，别人切勿使用

id選擇器和類選擇器的差別

（1）類選擇器好比人的名字，一個人可以有多個名字，同時一個名字也可以被多個人使用

（2）id選擇器好比人的身份證号碼，全中國是惟一的，不得重複

（3）id選擇器和類選擇器最大的不同在于使用次數上

（4）類選擇器在修改樣式中用的最多，id選擇器一般用于頁面唯一性的元素上，經常和JavaScript搭配使用

11p 通配符選擇器

使用“*”來定義，選取頁面中所有元素

把html body div span li 統一修改樣式

特殊情況下才使用，後面講解使用場景

*{color：red}

如果是修改樣式，類選擇器是使用最多的

12p font-family設定字型

3.1字型系列

p {

font-family：‘微軟雅黑’；

}

Microsoft YaHei

可以寫多種字型，之間用，分隔

一般情況下，如果有空格隔開的多個單詞組成的字型，加引号

盡量使用系統預設自帶字型

最常見的幾個字型：tahoma，arial

按照順序找電腦是否裝這種字型

谷歌浏覽器預設為微軟雅黑

通常給body定義

13p文字大小

font-size

px是我們網頁的最常用的機關，預設16像素，我們盡量給一個明确值大小，可以給body設定整個字型的大小

body {

font-size： 16px；

}

标題标簽比較特殊，需要單獨指定文字大小

body {

font-size： 12px；

}

14p 字型粗細

font-weight

normal：最正常，相當于numbee為400

bold：粗體

title标簽裡

.bold {

font-weight: bold;

}

body标簽裡

最提倡用數字

font-weight： 700；

這個700的後面不要跟機關，等價于bold都是加粗的效果

實際開發中更提倡用數字，表示加粗或變細

100-900

學會讓加粗标簽(h和strong）不加粗，或者其他标簽加粗

15p 文字樣式

font-style

p {

font-style：italic；

}

em，i 标簽斜體

經常讓一個傾斜的字型不傾斜

em {

font-style：normal；

}

16p font之混合屬性

body {

font：font-style font-weight font-size/line-height font-family;

font：italic 700 16px ‘Microsoft yahei’;

}

複合屬性font開頭

不能颠倒順序！

各個屬性用空格隔開

不需要設定的屬性可以省略（取預設值），但必須保留font-size和font-family屬性，否則font屬性将不起作用

font： 20px ‘黑體’；

17p 字型屬性總結

18p 文本顔色 color

color屬性用于定義文本的顔色

div {

color: pink；

}

或color： #ff0000；紅色

16進制的顔色

RGB代碼：

color： rgb（255,0,255）；粉紅色

實際開發時，16進制用的最多

19p 文本對齊text-align

div {

text-align：center；

}

left 左對齊（預設值）

right 右對齊

center 居中對齊

本質是讓h1盒子裡面的文字居中對齊

20p 裝飾文本

text-decoration，可以添加下劃線，删除線，上劃線

none 預設，沒有裝飾線（最常用）

underline 下劃線，連結a自帶下劃線（常用）

overline 上劃線（幾乎不用）

line-through 删除線（不常用）

取消a預設的下劃線，用none

重點記住如何添加下劃線 underline，如何删除下劃線

21p 文本縮進

text-indent屬性是用來指定文本的第一行的縮進，通常是将段落的首行縮進

p {

text-indent： 20px；

}

文本的第一行首行縮進多少距離

em是一個相對機關，目前元素（font-size）1個文字的大小

22p 行間距

line-height用于設定行間的距離（行高），由上間距和下間距組成，改變的是上間距和下間距

預設文本高度16px

測量工具:FastStone Capture

螢幕标尺 測量上一行的最下沿到下一行的最上沿

23p 文本屬性總結

24p 内部樣式表

css的引入方式，分為三大類

1.行内樣式表

2.内部樣式表

3.外部樣式表

5.2内部樣式表

寫到html頁面内部，但是單獨寫到style标簽内部，通俗放在head内部

部分分離，但是沒有實作結構與樣式完全分離

可以友善控制目前整個頁面中的元素樣式設定

使用内部樣式表設定css，通常也稱為嵌入式引入

25p 行内樣式表

在元素标簽内部的style屬性中設定css樣式，适合于修改簡單樣式

青春不常在，抓緊談戀愛

style其實就是标簽的屬性 可以控制目前的标簽設定樣式 不推薦大量使用，隻有簡單修改

26p 外部樣式表

适合于樣式比較多的情況

核心：樣式單獨寫到css檔案中，之後把css檔案引入到HTML頁面中使用

引入外部樣式表分為兩步：

1.建立一個字尾名為.css的樣式檔案，把所有css代碼都放入此檔案中

這個css檔案裡面隻有樣式沒有标簽

div{

color： pink；

}

2.在HTML頁面中，用标簽引入這個檔案

style.css

27p css引入方式總結

外部樣式表 使用最多 完全實作結構和樣式相分離

28p 新聞頁面綜合案例

分隔頁面

1.搭建html頁面

29p 修改css樣式 新聞頁面

font-weight：400；不加粗

font：16px/28px ‘Microsoft YaHei’; 必須有字号大小，字型間距

text-align:center;

30p 修改樣式二

螢幕拾色器确定顔色

#666666 #666

#ff00ff #f0f

31p 修改樣式3

首行縮進兩個字的距離

p {

text-indent： 2em；

}

想要圖檔居中對齊，則是讓他的父親p添加标簽

32p chrome調試工具

01p css第二天導讀

02 emmet文法生成html标簽

使用縮寫，提高編寫速度

1.快速生成html結構文法

1. 生成标簽，按tab鍵
2. 生成多個，加上*即可
3. 父子級，可以用>
4. 兄弟級，可以用+
5. 帶有類名或者id名字的，直接寫.demo或者#two tab鍵

6. 如果生成的div類名是有順序的，可以用自增符号$

   .demo$*5

7. div{我不喜歡男人} 按tab鍵 div{$}*5

03-emmet文法快速生成css樣式

采取簡寫的形式，第一個字母，就可以自動生成

04-快速格式化代碼

右鍵 格式化文檔

05-複合選擇器簡介

建立在基礎選擇器之上

由兩個或多個組成

06-後代選擇器

包含選擇器，可以選擇父元素裡面所有子元素

例如 把ol裡面的小li選出來改為pink

ol li {

color：pink；

}

元素一 元素二 { 樣式聲明 }

選擇元素1裡面的所有元素2（後代元素）

重點

元素一和元素二中間用空格隔開

最終選擇的是元素2

元素2可以是兒子，也可以是孫子的等，隻要是元素1的後代即可

例如

ol li a {

color：red；

}

元素一和元素二可以是任意基礎選擇器

若區分相同的段落，可以用class

.nav li a{

color:yellow;

}

07-子元素選擇器

隻能選擇作為某元素的最近一級子元素，簡單了解就是選親兒子

文法

元素1>元素2{ 樣式聲明 }

例如

div > p { 樣式聲明 }

09-并集選擇器

可以選擇多組标簽，用時為他們定義相同的格式，通常用于集體聲明

并集選擇器是各選擇器通過，連接配接而成，任何形式的選擇器都可以作為并集選擇器的一部分

文法

元素1，元素2 {樣式聲明}

上述文法表示選擇元素1和元素2

約定的文法規範，并集選擇器喜歡豎着寫

一定要注意，最後一個選擇器，不需要加逗号

10-連結僞類選擇器上

僞類選擇器用于向某些選擇器添加特殊的效果，比如給連結添加特殊效果，或選擇第一個，第n個元素

書寫最大的特點是用冒号表示

a:link 選擇所有未被通路的連結

a:visited 選擇所有已被通路的連結

a:hover 選擇滑鼠指針位于其上的标簽

a:active 選擇活動連結（滑鼠按下未彈起的标簽）

<style>

          a:link {
              color:#333;
              text-decoration: none;
          }
          a:visited {
              color:hotpink;
          }
          a:hover {
              color:skyblue;
          }
          a:active {
              color:green;`在這裡插入代碼片`
          }
    </style>
</head>
<body>
    <a href="#" >小豬佩奇</a>
</body>
</html>      

hover使用最多

11-下

1.按照link ,visited,hover,active的順序

love hate

LVHA

2.因為a連結在浏覽器中具有預設樣式，是以我們實際工作中都需要給連結單獨指定樣式

實際開發時寫法，先寫a，然後給a單獨指定樣式

12-focus僞類選擇器

：focus僞類選擇器用于選取獲得焦點的表單元素

把獲得光标的input表單元素選取出來

input：focus{

background-color：pink；

color:red;

}

14-元素顯示模式

網頁标簽，了解他們的特點可以更好的布局我們的網頁

就是元素（标簽)以什麼方式進行顯示，

HTML元素一般分為塊元素和行内元素，例如div和span

15-塊元素

div屬于最典型的塊元素

四個特點

1.比較霸道，自己獨占一行

2.高度，寬度，外邊距以及内邊距都可以控制

3.寬度預設是容器body的100%

4.是一個容器及盒子，裡面可以放行内或者塊級元素

注意：

文字類的元素不能使用塊級元素

p标簽主要用于存放文字，是以p裡面不能放塊級元素，特别是不能放div

同理，h1~h6等都是文字類塊級标簽，裡面也不能放其他塊級元素

16-行内元素

span是最典型的行内元素，有的地方也将行内元素稱為内聯元素

四大特點

1.相鄰行内元素在一行上，一行可以顯示多個

2.高，寬直接設定是無效的

3.預設寬度就是它本身内容的寬度

4，行内元素隻能容納文本或其他行内元素

注意：

連結裡面不能再放連結

特殊情況連結裡面可以放塊級元素，但是給a轉換一下塊級元素最安全

17-行内塊元素

img，input，td，它們同時具有塊元素和行内元素的特點

特點：

1.和相鄰行内元素（行内塊）在一行上，但是他們之間會有空白縫隙，一行可以顯示多個（行内元素特點）

2.預設寬度就是它本身内容的寬度（行内元素特點）

3.高度，行高，外邊距，以及内邊距都可以控制（塊級元素特點）

19-顯示模式的轉換

一個模式的元素需要另外一種模式的轉換

比如想要增加連結a的觸發範圍

行内元素a轉換為塊元素：display：block；（重點）

塊級元素div轉換為行内元素：display：inline；

其他元素轉換為行内塊元素：display：inline-block；（重點）

20-snipaste

截圖

21-簡潔版小米側邊欄

1.把連結a轉換為塊級元素，這樣連結就可以單獨占一行，并且有寬度和高度 display：block；

2,滑鼠經過a給連結設定背景顔色

font-size：字型的尺寸

text-indent：2em；首行縮進

滑鼠按住alt鍵，然後c，取色

22-單行文字垂直居中的原理

一個小技巧

css沒有提供

讓文字的行高等于盒子的高度

line-height=height

行高由文字本身高度和上空隙和下空隙

簡單了解：行高的上空隙和下空隙把空氣擠到中間了

如果行高小于盒子高度，文字會偏上，如果行高大于盒子高度，則文字偏下

23-背景顔色

預設透明

24-背景圖檔

優點是便于控制位置

background-image：none| url（url）；

使用絕對或相對位址指定背景圖像

25-背景平鋪

background-repeat：no-repeat；背景不平鋪

repeat 背景平鋪

repeat-x 背景沿着x軸平鋪

repeat-y 沿着y軸平鋪

頁面元素即可以添加背景顔色也可以添加背景圖檔，隻不過背景圖檔會壓住背景顔色

26-背景位置-方位名詞

background-position：x y；

可以使用方位名詞或者精确機關

1，方位名詞

background-position：center top；

right center

兩個詞的順序無關

隻指定一個方位名詞，另外一個詞是預設的，水準靠右側對齊，第二個參數省略y軸是垂直居中顯示的

第一個參數是top y軸頂部對齊，第二個參數省略x軸是水準居中顯示的

預設居中對齊，一個水準，一個垂直

27-背景位置案例1

font-weight：400px； 文字不加粗

檢查，標明圖檔，右鍵，open in new tab

插入圖檔非常難改位置，一般用背景圖檔插入

重複的話，用no-repeat

text-indent：1.5em；

28-案例2超大背景圖檔

background-position：top center；

一般都是用這個

29-精确位置

參數是精确機關，第一個肯定是x軸機關，第二個肯定是y軸機關，可以精準調整位置

如果隻指定一個數值，那麼那個數值一定是x軸，另一個預設垂直居中

30-背景位置-混合機關

1.參數是混合機關

兩個值是方位名詞和精确機關混合使用，那麼第一個一定是x坐标，第二個是y坐标

31-背景固定

是否固定還是随着頁面的其餘部分滾動 background-attachment： scroll | fixed

預設随着對象内容滾動，scroll

把背景圖像固定住，fixed

視差滾動的原理

32-背景屬性混合寫法

合并縮寫在同一個屬性中，沒有特定的書寫習慣

背景顔色，背景圖檔位址，背景平鋪，背景圖像滾動，背景圖檔位置

用空格隔開

33-背景顔色半透明

css3

background：rgba（0,0,0,0.3);

最後一個參數是alpha透明度，取值範圍在0-1之間

我們習慣上把0.3的0去掉

背景半透明是指盒子背景半透明，盒子裡面的内容不受影響

35-五彩導航

1.連結屬于行内元素，但是此時需要寬度高度，是以需要模式轉換

2.裡面文字需要水準居中和垂直居中，是以需要單行文字垂直居中的代碼

3.連結裡面需要設定背景圖檔，需要背景相關的屬性

4.連結僞類選擇器

<style>
        .nav a{
            display: inline-block;
            width: 120px;
            height: 58px;
            background-color: pink;
            text-align: center;
            line-height: 58px;
            color: #fff;
            text-decoration: none;
        }
        .nav .bg1 {
           background: url(images/bg1.png) no-repeat;
        }
        .nav .bg1:hover{
            background-image: url(images/bg11.png);
        }
        .nav .bg2 {
            background: url(images/bg2.png) no-repeat;
        }
    </style>

<div >
        <a href="#" class="bg1">五彩導航</a>
        <a href="#">五彩導航</a>
        <a href="#">五彩導航</a>
        <a href="#">五彩導航</a>
        <a href="#">五彩導航</a>      

01-css三大特性之層疊性

給相同選擇器設定相同的樣式，出現沖突，實行就近原則

樣式不沖突，不會層疊

02-繼承性

子标簽繼承父标簽的某些樣式，适當的使用繼承可以簡化代碼

比如text-，font-，line-，color屬性，跟文字相關的

03-行高的繼承

行高可以跟機關也可以不跟機關

12px/1.5

所有的子元素是行高的1.5倍，子元素繼承了父元素body的行高

如果子元素沒有指定行高，則會繼承父元素的行高為1.5，此時為文字大小*1.5

body行高1.5，這樣寫法最大的優勢是裡面子元素可以根據自己文字大小自動調整行高

04-優先級

當同一個元素指定多個選擇器，就會有優先級的産生

選擇器相同，執行層疊性

選擇器不同，根據選擇器權重産生

從小到大·

繼承或者*

元素選擇器

類選擇器，僞類選擇器

ID選擇器

行内樣式style=“”

！important重要的

05-優先級注意的問題

1.權重是有四組數字組成，但是不會有進位

2.可以了解為類選擇器永遠大于元素選擇器，id選擇器永遠大于類選擇器，以此類推

3.等級判斷從左向右，如果某一位數值相同，則判斷下一位數值

4.通配符和繼承權重是0，标簽選擇器為1，類（僞類）選擇器為10，id選擇器為100，行内樣式表為1000，！important無窮大

5.繼承的權重是0，如果該元素沒有直接選中，不管父元素權重多高，子元素得到的權重都是0

6.a連結浏覽器預設制定了一個樣式： 藍色的，有下劃線的，給body設定樣式沒有用

選擇器類型

1、ID　　#id

2、class　　.class

3、标簽　　p

4、通用　　*

5、屬性　　[type=“text”]

6、僞類　　：hover

7、僞元素　　::first-line

8、子選擇器、相鄰選擇器

三、權重計算規則

1. 第一等：代表内聯樣式，如: style=””，權值為1000。
2. 第二等：代表ID選擇器，如：#content，權值為0100。
3. 第三等：代表類，僞類和屬性選擇器，如.content，權值為0010。
4. 第四等：代表類型選擇器和僞元素選擇器，如div p，權值為0001。
5. 通配符、子選擇器、相鄰選擇器等的。如*、>、+,權值為0000。
6. 繼承的樣式沒有權值。

06-權重疊加

複合選擇器會有權重疊加的問題，需要計算權重

ul li>li

.nav li>ul li>li

權重雖然會疊加，但是永遠不會有進位

div ul li 0,0,0,3

08-盒子模型

09-看透網頁布局本質

頁面布局三大核心，盒子模型，浮動，定位

網頁布局過程

1.先準備好相關的網頁元素，基本都是盒子

2.利用css設定盒子樣式，然後擺放到相關位置

3.往盒子裡面裝内容

核心本質：利用css擺盒子

10-盒子模型組成部分

盒子裡面的内容

border

content

padding

margin

11-盒子模型邊框border

border-width：邊框的粗細

border-style：solid（實線邊框）

dashed（虛線）

dooted（點線）

border-color

12-邊框的複合寫法

邊框簡寫：

border：1px solid red；沒有順序

邊框分開寫法：

border-top：1px solid red；（隻設定上邊框）

border-bottom 下邊框

層疊性，四條邊是藍色，上邊框是紅色，節省代碼，其他三條邊必須寫在上面，否則會被覆寫

13-表格細線邊框

border-collapse：collapse；

合并相鄰邊框

table，

td，th {

}

14-邊框會影響盒子實際大小

1.測量盒子時不測量邊框

2.包含邊框，需要width/height減去邊框寬度

15-盒子模型内邊距padding

邊框與内容的距離

padding-left 左内邊距

padding-right 右内邊距

top bottom

16-padding複合屬性

padding：5px；

上下左右都有5像素内邊距

padding：5px 10px；

上下内邊距是5像素，左右内邊距是10像素

padding：5px 10px 20px；

上内邊距5像素，左右内邊距10像素，下内邊距20像素

padding：5px 10px 20px 30px；

上右下左 順時針

17-padding會影響盒子實際大小

width和height減去padding的内邊距大小即可

18-新浪導航欄

a屬于行内元素，此時必須換成行内塊元素

20-小米側邊欄修改

21-padding不會撐開盒子

不定義height和width屬性，此時padding不會撐開盒子大小

22-盒子模型外邊距margin

上下左右

23-塊級盒子水準居中

1.盒子必須指定寬度

2.左右的外邊距設定為auto

margin：0 auto；

24-行内元素和行内塊元素水準居中

讓塊級元素水準居中，給其父元素添加text-align：center；

26-外邊距合并-嵌套塊元素塌陷

對于兩個嵌套關系（父子關系）的塊元素，父元素有上外邊距同時子元素也有上外邊框，此時父元素會塌陷較大的外邊距值

解決方案:

1.為父元素定義上邊框 transparent border

2.為父元素定義上内邊框 padding

3.可以為父元素添加overflow：hidden

27-清除内外邊距

*{

margin：0；

padding：0；

}

注意：行内元素為了照顧相容性，盡量隻設定左右内外邊距，不要設定上下内外邊距，但是轉換為塊級和行内塊元素即可

28-ps的基本操作

檔案-打開

視圖-标尺

右擊标尺，機關改為像素

Ctrl+加号放大視圖

按住空格鍵，滑鼠可以變成小手，拖動ps視圖

用選區拖動，可以測量大小

在旁邊空白處點選一下可以退出測量

29-綜合案例

修改圖檔大小

.box img {

width:100%;

}

| font-style:normal;

由加粗變為淺灰色

text-decoration：none；連結沒有下劃線

34-解答

1.布局為什麼用不同盒子

合理的地方用合理的标簽，起類名是一個很好的習慣

可以更好的找到這個盒子

2.margin和padding

根據實際情況

01-綜合案例-快報子產品布局分析

去掉li前面的項目符号

list-style：none；

04-圓角邊框原理（重點）

border-radius：length；

10px

radius：圓的半徑

05-圓角邊框的使用

參數可以用數值也可以用百分比

border-radius：50%；

寬度和高度的一半

圓角矩形設定為高度的一半

簡寫屬性，可以跟四個值，順時針，左上角，右上角，右下角，左下角

06-盒子陰影（重點）

box-shadow

h-shadow 必需的。水準陰影的位置。允許負值

v-shadow 必需的。垂直陰影的位置。允許負值

blur 可選。模糊距離

spread 可選。陰影的大小 -4px

color 可選。陰影的顔色。在CSS顔色值尋找顔色值的完整清單 rgba（0,0,0,0.3）

inset 可選。從外層的陰影（開始時）改變陰影内側陰影

注意：

1.預設的是外陰影（outset），但是不可以寫這個單詞，否則導緻陰影無效

2.盒子陰影不占用空間，不會影響其他盒子排列

div：hover {

添加屬性

}

07-文字陰影（了解）

text-shadow

h-shadow 必需的。水準陰影的位置。允許負值

v-shadow 必需的。垂直陰影的位置。允許負值

blur 可選。模糊距離，虛的還是實的

color 可選。陰影的顔色。在CSS顔色值尋找顔色值的完整清單 rgba（0,0,0,0.3）

08-浮動

09-傳統網頁布局三種方式

網頁布局的本質，用css來擺放盒子

盒子如何進行排列順序

普通流（标準流）

浮動

定位

标準流：标簽按照規定好預設方式排列

1.塊級元素會獨占一行，從上向下順序排列

常用：div，hr，p，h1-h6，ul，ol，dl（定義清單），form，table

2.行内元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行

span,a,i,em（傾斜）

标準流是最基本的布局方式

一個頁面基本都包含了三種布局方式

10-為什麼需要浮動

浮動可以改變元素預設的排列方式

浮動最典型的應用：可以讓多個塊級元素一行内排列顯示

網頁布局第一準則：多個塊級元素縱向排列找标準流，多個塊級元素橫向排列找浮動

11-什麼是浮動

float屬性用于建立浮動框，将其移動到一邊，直到左邊緣或右邊緣觸及包含塊或另一個浮動框的邊緣

選擇器{ float：屬性值；}

none 元素不浮動（預設值）

left 元素向左浮動

right 元素向右浮動

12-浮動特性-脫标（重點）

1.浮動元素會脫離标準流

1.脫離标準流的控制，移動到指定位置

2.浮動的盒子不再保留原先位置

13-浮動元素一行顯示

如果多個盒子都設定了浮動，則它們會按照屬性值一行内顯示并且頂端對齊排列

在一行顯示，三個div都要設定浮動屬性

注意：浮動的元素是互相貼靠在一起的（不會有縫隙），如果父級寬度裝不下這些浮動的盒子，多出的盒子會另起一行對齊

14-浮動元素具有行内塊元素

任何元素都可以浮動，不管原先是什麼模式的元素，添加浮動之後具有行内塊元素相似的特性

如果塊級盒子沒有設定寬度，預設寬度和父級一樣寬，但是添加浮動後，它的大小根據内容來決定

浮動的盒子中間是沒有縫隙的，是緊挨着一起的

行内元素同理

15-浮動元素經常搭配标準流的父元素

為了限制浮動元素，我們網頁布局一般采取的政策是

先用标準流的父元素排列上下位置，之後内部子元素采取浮動排列左右位置，符合網頁布局第一準則

準備标準流父盒子，限制浮動的盒子

16-練習1

網頁布局第二準則

先設定盒子大小，再設定盒子内容

.right>div {

}

隻設定親兒子，第一個

20-常見的頁面布局

隻要是通欄的盒子（和浏覽器一樣寬）不需要指定寬度

21-浮動的兩個注意點

1.浮動和标準流的父盒子搭配

2.一個元素浮動了，其他的兄弟元素也會浮動

<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            * {
                  margin: 0;
                  padding: 0;
            }

            li {
                  list-style: none;
            }

            .top {
                  height: 50px;
                  background-color: gray;
            }

            .banner {
                  width: 980px;
                  height: 150px;
                  background-color: gray;
                  margin: 10px auto;
            }

            .box {

                  width: 980px;
                  margin: 0 auto;
                  height: 300px;
                  background-color: pink;
            }

            .box li {
                  float: left;
                  width: 237px;
                  height: 300px;
                  background-color: gray;
                  margin-right: 10px;
            }

            .box .last {
                  margin-right: 0;
            }

            .footer {
                  height: 200px;
                  background-color: gray;
            }
      </style>
</head>

<body>
      <div class="top">top</div>
      <div class="banner">banner</div>
      <div class="box">box
            <ul>
                  <li>1</li>
                  <li>2</li>
                  <li>3</li>
                  <li class="last">4</li>
            </ul>
      </div>
      <div class="footer">footer</div>
</body>

</html>      

21-浮動的注意點

一個元素浮動了，理論上其餘的兄弟元素也要浮動

浮動的盒子隻會影響浮動盒子後面的标準流，不會影響前面的标準流

22-為什麼清除浮動

浮動元素有一個标準流的父元素，他們有一個共同的特點，都是有高度的

由于父盒子很多情況下，不友善給高度，但是子盒子又不占用位置，最後父級盒子高度為0時，就會影響下面的标準流盒子

由于浮動元素不再占用原文檔流的位置，是以它會對後面的元素排版産生影響

23-清除浮動本質以及額外标簽法

本質是清除浮動元素造成的影響

如果父盒子本身有高度，則不需要清除浮動

清除浮動之後，父級就會根據浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的标準流了

文法：

選擇器{clear：屬性值；}

left 清除左側浮動的影響

right 清除右側

both 同時清除

實際工作中，幾乎隻用clear：both；

政策是：閉合浮動

隻讓浮動在父盒子内部影響，不影響父盒子外面的其他盒子

方法

1.額外标簽法

w3c推薦的

在浮動元素末尾添加一個空的标簽

如

添加許多無意義的标簽，結構化較差

.clear {

 clear:both;

 }      

注意：添加的元素标簽必須是塊級元素不能是行内元素

總結：

1.清除浮動的本質是清除浮動元素脫離标準流造成的影響

2.額外标簽，就是在最後一個浮動的子元素後面添加一個額外标簽，添加清除浮動樣式

24-父級添加overflow屬性

屬性值設定為hidden，auto，scroll

給父元素添加代碼

代碼簡潔，無法顯示溢出的部分

25-after僞元素

.clearfix:before, .clearfix:after {   
    content:"";   
    display:table;   
}   
.clearfix:after{   
    clear:both;   
    overflow:hidden;   
}   
.clearfix{   
    *zoom:1;   
} 
 <div class="box clearfix">      

26-雙僞元素

.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* ie6 7 專門清除浮動的樣式*/
.clearfix {
*zoom:1;
}      

27-總結

影響下面布局，清除浮動

父級沒高度

子盒子浮動了

01-常見的圖檔格式

1.jpg格式：産品類的圖檔經常用jpg格式

2.gif：可以儲存透明背景和動畫效果

3.png：切成背景透明的圖檔，選擇png

4.psd：設計稿，ps的專用格式，可以直接從上面複制文字，獲得圖檔，還可以測量大小和距離

02-ps切圖

圖層切圖

右擊圖層-快速導出為png

03-合并圖層

選中需要的圖層：圖層菜單–合并圖層（crtl+e）

右擊圖層-快速導出為png

04-切片工具

1.利用切片工具手動劃出

2.導出選中的圖檔

檔案菜單–導出–存儲為web裝置所用格式–選擇我們要的圖檔格式–存儲

05-cutterman使用器

08-css屬性書寫順序（重點）

1.布局定位順序

display（第一個）block

float

clear

visibility

overflow

position

2.自身屬性

width

height

margin

padding

border

background

3.文本屬性

color

font

text-decoration

text-align

4.其他屬性（css3）

background rgba（0，0，0，.3）

border-radius

09-頁面布局整體思路

1.确定頁面的版心（可視區），測量可知

2.分析頁面中的行子產品，以及每個行子產品中的列子產品，其實頁面布局第一準則

3.一行中的列子產品經常浮動布局，先确定每個列的大小，确定列的位置頁面布局第二準則

4.先有結構，後有樣式

5.先理清布局結構

12-導航欄nav區域制作

實際開發中，我們不會直接用連結a而是用li包含連結（li+a）

的做法

1. li+a語義更清晰
2. 直接用a，容易辨識為由堆砌關鍵字嫌疑

注意：

1.讓導航欄一行顯示，給li加浮動，因為li是塊級元素，需要一行顯示

2.a是行内元素，沒有高度，加display：block；

3.這個nav導航欄可以不給寬度，将來可以繼續添加其餘文字

4.因為導航欄裡面文字不一樣多，是以最好給連結a左右padding撐開盒子，而不是指定寬度

15-搜尋子產品input制作

一個search大盒子裡面包含2個表單

input文本框 button按鈕

學成線上

<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>學成線上首頁</title>
      <link rel="stylesheet" href="style.css">
</head>

<body>
      <!-- 頭部區域開始啦 -->
      <div class="header w">
            <div class="logo">
                  <img src="logo.png" alt="">
            </div>
            <!-- 導航欄部分 -->
            <div class="nav">
                  <ul>
                        <li><a href="#">首頁</a></li>
                        <li><a href="#">課程</a></li>
                        <li><a href="#">職業規劃</a></li>
                  </ul>
            </div>
            <!-- 搜尋子產品 -->
            <div class="search">
                  <form action="">
                        <input type="text" value="輸入關鍵詞">
                        <button>搜尋</button>
                  </form>
            </div>
            <!-- 使用者子產品 -->
            <div class="user">
                  <img src="user.png" alt="">
                  qq-lilei
            </div>
      </div>
      <!-- 頭部區域結束啦 -->
      <!-- banner部分開始 -->
      <div class="banner">
            <!-- 版心 -->
            <div class="w">
                  <div class="subnav">
                        <ul>
                              <li><a href="#">前端開發<span> > </span></a></li>
                              <li><a href="#">前端開發<span> > </span></a></li>
                              <li><a href="#">前端開發<span> > </span></a></li>
                              <li><a href="#">前端開發<span> > </span></a></li>
                              <li><a href="#">前端開發<span> > </span></a></li>
                              <li><a href="#">前端開發<span> > </span></a></li>
                              <li><a href="#">前端開發<span> > </span></a></li>
                              <li><a href="#">前端開發<span> > </span></a></li>
                              <li><a href="#">前端開發<span> > </span></a></li>
                        </ul>
                  </div>
                  <!-- 課程表子產品 -->
                  <div class="course">
                        <h2>我的課程表</h2>
                        <div class="bd">
                              <ul>
                                    <li>
                                          <h4>繼續學習 程式語言設計</h4>
                                          <p>正在學習-使用對象</p>

                                    </li>
                              </ul>
                              <ul>
                                    <li>
                                          <h4>繼續學習 程式語言設計</h4>
                                          <p>正在學習-使用對象</p>

                                    </li>
                              </ul>
                              <ul>
                                    <li>
                                          <h4>繼續學習 程式語言設計</h4>
                                          <p>正在學習-使用對象</p>

                                    </li>
                              </ul>
                              <a href="#" class="more">全部課程</a>
                        </div>
                  </div>
            </div>
      </div>
      <!-- banner部分結束 -->
      <!-- 精品推薦子產品開始 -->
      <div class="goods w">
            <h3>精品推薦</h3>
            <ul>
                  <li><a href="#">jQuery</a></li>
                  <li><a href="#">jQuery</a></li>
                  <li><a href="#">jQuery</a></li>
                  <li><a href="#">jQuery</a></li>
                  <li><a href="#">jQuery</a></li>
            </ul>
            <a href="#" class="mod">修改興趣</a>
      </div>
      <!-- 精品推薦子產品結束 -->
      <!-- box核心内容區域開始 -->
      <div class="box w">
            <div class="box-hd">
                  <h3>精品推薦</h3>
                  <a href="#">檢視全部</a>
            </div>
            <div class="box-bd">
                  <ul class="clearfix111">
                        <li>
                              <img src="pic 1.png" alt="">
                              <h4>
                                    部落格系統實戰項目演練
                              </h4>
                              <div class="info">
                                    <span>進階</span> . 1125人在學習
                              </div>
                        </li>

                  </ul>
                  <ul>
                        <li>
                              <img src="pic 1.png" alt="">
                              <h4>
                                    部落格系統實戰項目演練
                              </h4>
                              <div class="info">
                                    <span>進階</span> . 1125人在學習
                              </div>
                        </li>

                  </ul>
                  <ul>
                        <li>
                              <img src="pic 1.png" alt="">
                              <h4>
                                    部落格系統實戰項目演練
                              </h4>
                              <div class="info">
                                    <span>進階</span> . 1125人在學習
                              </div>
                        </li>

                  </ul>
                  <ul>
                        <li>
                              <img src="pic 1.png" alt="">
                              <h4>
                                    部落格系統實戰項目演練
                              </h4>
                              <div class="info">
                                    <span>進階</span> . 1125人在學習
                              </div>
                        </li>

                  </ul>
                  <ul>
                        <li>
                              <img src="pic 1.png" alt="">
                              <h4>
                                    部落格系統實戰項目演練
                              </h4>
                              <div class="info">
                                    <span>進階</span> . 1125人在學習
                              </div>
                        </li>

                  </ul>
                  <ul>
                        <li>
                              <img src="pic 1.png" alt="">
                              <h4>
                                    部落格系統實戰項目演練
                              </h4>
                              <div class="info">
                                    <span>進階</span> . 1125人在學習
                              </div>
                        </li>

                  </ul>
                  <ul>
                        <li>
                              <img src="pic 1.png" alt="">
                              <h4>
                                    部落格系統實戰項目演練
                              </h4>
                              <div class="info">
                                    <span>進階</span> . 1125人在學習
                              </div>
                        </li>

                  </ul>
                  <ul>
                        <li>
                              <img src="pic 1.png" alt="">
                              <h4>
                                    部落格系統實戰項目演練
                              </h4>
                              <div class="info">
                                    <span>進階</span> . 1125人在學習
                              </div>
                        </li>

                  </ul>
                  <ul>
                        <li>
                              <img src="pic 1.png" alt="">
                              <h4>
                                    部落格系統實戰項目演練
                              </h4>
                              <div class="info">
                                    <span>進階</span> . 1125人在學習
                              </div>
                        </li>

                  </ul>
                  <ul>
                        <li>
                              <img src="pic 1.png" alt="">
                              <h4>
                                    部落格系統實戰項目演練
                              </h4>
                              <div class="info">
                                    <span>進階</span> . 1125人在學習
                              </div>
                        </li>

                  </ul>
            </div>
      </div>
      <!-- box核心内容區域結束 -->
      <!-- footer子產品制作 -->
      <div class="footer">
            <div class="w">
                  <div class="copyright">
                        <img src="logo.png" alt="">
                        <p>緻力于普及中國最好的教育</p>
                        <a href="#" class="app">下載下傳app</a>
                  </div>
                  <div class="links">
                        <dl>
                              <dt>關于學成網</dt>
                              <dd>關于</dd>
                              <dd>管理團隊</dd>
                              <dd>工作機會</dd>
                              <dd>客戶服務</dd>
                              <dd>幫助</dd>
                        </dl>
                  </div>
            </div>
      </div>
</body>

</html>      

* {
      margin: 0;
      padding: 0;
}
.w{
      width: 1200px;
      margin: auto;
}
body {
      background-color: #f3f5f7;
}
li {
      list-style: none;
}
a{
      text-decoration: none;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* ie6 7 專門清除浮動的樣式*/
.clearfix {
*zoom:1;
}
.header {
      height: 42px;
      
      /* 注意此地會重疊w裡面的margin */
      margin: 30px auto;
}
.logo {
      float:left;
      width: 198px;
      height: 42px;
      
}
.nav {
      float:left;
      margin-left: 60px;
}
.nav ul li {
      float:left;
      margin: 0 15px;
}
.nav ul li a {
      display:block;
      height: 42px;
      padding: 0 10px;
      line-height: 42px;
      font-size: 18px;
      color:#050505;
      text-decoration: none;
}
.nav ul li a:hover {
      border-bottom: 2px solid #00a4ff;
      color:#00a4ff;
}
.search {
      float:left;
      width: 412px;
      height: 42px;
      background-color:skyblue;
      margin-left: 70px;
}
.search input{
      float: left;
      width: 345px;
      height: 40px;
      border:1px solid #00a4ff;
      border-right: 0;
      color:#bfbfbf;
      font-style: 14px;
      padding-left: 15px;
}
.search button {
      float: left;
      width: 50px;
      height: 42px;
      background-color: skyblue;
      /* 按鈕button預設有個邊框需要我們手動去掉 */
      border: 0;
}
.user {
      float: right;
      line-height: 42px;
      line-height: 30px;
      font-style: 14px;
      color: #666;
}
/* banner區域 */
.banner {
     height: 421px;
     background-color: #1c036c;
}
.banner .w{
      height: 421px;
      background: url(shipin.png) no-repeat top center;
}
.subnav {
      float: left;
      width: 190px;
      height: 421px;
      background:rgba(0,0,0,0.3);
}
.subnav ul li {
      height: 45px;
      line-height: 45px;
      padding: 0 20px;
}
.subnav ul li a {
      font-style: 14px;
      color:#fff;
}
.subnav ul li a span {
      float: right;
}
.subnav ul li a:hover{
      color:#00a4ff;
}
.course {
      float:right;
      width: 230px;
      /* height: 300px; */
      background-color: #fff;
      /* 浮動的盒子不會有外邊框合并的問題 */
      margin-top: 50px;
}
.course h2 {
      height: 48px;
      background-color: #9bceea;
      text-align: center;
      line-height: 48px;
      font-style: 18px;
      color: #fff;
}
.bd {
      padding: 0 20px;
}
.bd ul li {
      padding: 14px 0;
      border-bottom: 1px solid #ccc;
}
.bd ul li h4 {
      font-style: 16px;
      color:#4e4e4e;
}
.bd ul li p {
      font-style: 12px;
      color:#a5a5a5;
}
.bd .more {
     display: block;
     height: 38px;
     border: 1px solid #00a4ff;
     margin-top: 5px;
     text-align: center;
     line-height: 38px;
     color:#00a4ff;
     font-size: 16px;
     font-weight: 700;
     margin-bottom: 5px;
}
/* 精品推薦子產品 */
.goods {
      height: 60px;
      background-color: #fff;
      margin-top: 10px;
      box-shadow: 0 2px 3px 3px rgba(0,0,0,0.1);
      /* 行高會繼承，會繼承給3個孩子 */
      line-height: 60px;
}
.goods h3 {
      float: left;
      margin-left: 30px;
      font-size: 16px;
      color:#00a4ff;
}
.goods ul {
      float: left;
      margin-left: 30px;
}
.goods ul li {
      float:left;
}
.goods ul li a {
      padding: 0 30px;
      font-size: 16px;
      color:#050505;
      border-left: 1px solid #ccc;
}
.mod {
      float:right;
      margin-left: 30px;
      font-size: 14px;
      color:#00a4ff;
}
.box {
      margin-top: 30px;
}
.box-hd {
      height: 45px;
}
.box-hd h3 {
      float: left;
      font-size: 20px;
      color:#494949;
}
.box-hd a {
      float: right;
      font-size:12px;
      color:#a5a5a5;
      margin-top: 10px;
      margin-right: 30px;
}
/* 把li的父親ul修改的足夠寬一行能撐開5個盒子就不會換行了 */
.box-bd ul {
      width: 1225px;
}
.box-bd ul li {
      float: left;
      width: 228px;
      height: 270px;
      background-color: #fff;
      margin-right: 15px;
      margin-bottom: 15px;
}
.box-bd ul li img {
      width: 100%;
}
.box-bd ul li h4 {
      margin: 20px 20px 20px 25px;
      font-style: 14px;
      color:#050505;
      font-weight: 400;
}
.box-bd .info {
      margin: 0 20px 0 25px;
      font-size: 12px;
      color: #999999;
}
.box-bd .info span{
      color: #ff7c2d;
}
/* footer子產品 */
.footer {
      height: 415px;
}
.footer .w {
      padding-top: 35px;
}

.copyright {
    float: left;
}
.copyright p {
     font-size: 12px;
     color:#666;
     margin: 20px 0 15px 0;
}
.copyright .app {
      width: 118px;
      height: 33px;
      border: 1px solid #00a4ff;
      text-align: center;
      line-height: 33px;
      color:#00a4ff;
      font-size: 16px;

}
.links {
      float:right;
}      

02-為什麼需要定位

定位是可以讓盒子自由的在某個盒子内移動位置或者固定螢幕中某個位置，并且可以壓住其他盒子

03-定位組成

定位=定位模式+邊偏移

定位模式用于指定一個元素在文檔中的定位方式，邊偏移決定了該元素的最終位置

1.定位模式

position

static 靜态定位

relative 相對定位

absolute 絕對定位

fixed 固定定位

2.邊偏移

top，bottom，left，right

偏移量

04-相對定位

靜态定位

無定位

{ position：static；}

按照标準流特性

很少用

相對定位relative

相對原來位置

{position：relative；}

特點：

1.參照自己原來位置移動

2.原來在标準流的位置繼續占有，後面的盒子仍然以标準流的方式對待它

05-絕對定位absolute（重要）

相對于祖先元素

{position：absolute；}

特點：

1.如果沒有父元素，或者父元素沒有定位，根據浏覽器決定

2.如果父元素有定位，以最近一級的有定位祖先元素為參考點移動位置

3.絕對定位不再占有原先的位置（脫标）

08-由來

子級是絕對定位的話，父級要用相對定位

1.子級絕對定位，不會占有位置，可以放到父盒子裡面的任何一個地方，不會影響其他的兄弟盒子

2.父盒子需要加定位限制子盒子在父盒子内顯示

3.父盒子布局時，需要占有位置，是以父親隻能是相對定位

相對定位經常作為絕對定位的父級

因為父級需要占有位置，是以是相對定位，子盒子不需要占有位置，則是絕對定位

不是永遠不變的，如果父元素不需要占有位置，子絕父絕也會遇到

09-hot子產品

10-固定定位fixed（重要）

是元素固定于浏覽器可視區的位置，主要使用場景：可以在浏覽器頁面滾動時元素的位置不會改變

{position：fixed；}

特點

1.以浏覽器的可視視窗為參照物

跟父元素沒有任何關系

不随滾動條滾動

2.固定定位不在占有原先的位置

固定定位也是脫标的，其實固定定位也可以看做是一種特殊的絕對定位

11-固定到版心右側

小算法：

1.讓固定定位的盒子left：50%。走到浏覽器可視區（版心）的一半位置

2.讓固定定位的盒子margin-left：版心寬度的一半距離，多走版心寬度的一半位置

12-粘性定位

sticky

{position：sticky；top：10px；}

特點

1.以浏覽器的可視視窗為參照物

2.占有原先的位置

3.必須添加，top，left，right，bottom其中一個

相容性差，ie不支援

14-定位的疊放順序

盒子重疊，用z-index來控制盒子的前後次序（z軸）

{ z-index：1；}

數值可以是正整數，負整數或0，預設是auto，數值越大，盒子越靠上

如果屬性值相同，則按照書寫順序，後來居上

數字後面不能加機關

隻有定位的盒子才有z-index屬性

15-絕對定位的盒子居中算法

1.絕對定位的盒子居中

加了絕對定位的盒子不能通過margin：0 auto水準居中

1.left：50%；：讓盒子的左側移動到父級元素的水準中心位置

2.margin-left：-100px；讓盒子向右移動自身寬度的一半

16-定位的特殊特性

1.行内元素添加絕對或者固定定位，可以直接設定高度和寬度

2.塊級元素添加絕對或者固定定位，如果不給寬度或者高度，預設大小是内容的大小

3.脫标的盒子不會觸發外邊距塌陷

浮動元素，絕對定位元素的都不會觸發外邊距合并的問題

17-絕對定位會完全壓住盒子

浮動元素不同，隻會壓住它下面标準流的盒子，但是不會壓住下面标準流盒子裡面的文字（圖檔）

浮動之是以不會壓住文字，因為浮動産生的目的最初是為了做文字環繞效果的，文字會圍繞浮動元素

float：left；

18-淘寶圖焦點圖布局分析

如果一個盒子既有left屬性也有right屬性，預設執行left屬性，同理，top，bottom會執行top

白色半透明 rgba（255，255,255，.3）

24-網頁布局總結

25-display顯示隐藏元素

元素的顯示與隐藏

讓一個元素在頁面顯示或隐藏出來

1.display 顯示隐藏

2.visibility 顯示隐藏

3.overflow 溢出顯示隐藏

display:none ;隐藏對象

display:block; 顯示元素

display隐藏元素後，不再占有原來的位置

26-visibility

visibility：hidden；元素隐藏

visibility：visible；元素可視

隐藏元素後，繼續占有原來的位置

27-overflow

溢出部分顯示或隐藏

overflow四個屬性：

1）visible 可見，超過部分顯示出來，無滾動條

2）hidden 超過部分不可見，無滾動條

3）scroll 有滾動條

4）auto 超過部分才顯示滾動條，不超過不顯示

如果有定位的盒子，慎用overflow：hidden，因為它會隐藏多餘的部分

28-洋芋案例

原先黑色半透明的盒子看不見，滑鼠經過會看見

需要用display和絕對定位

<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            .tudou {
                  position: relative;
                  width: 444px;
                  height: 320px;
                  background-color: pink;
                  margin: 30px auto;
            }

            .tudou img {
                  width: 100%;
                  height: 100%;
            }

            .mask {
                  display: none;
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  background: rgba(0, 0, 0, .4) url(arr.jpg) no-repeat center;
            }

           

            .tudou:hover .mask {
                  display: block;
            }
      </style>
</head>

<body>
      <div class="tudou">
            <div class="mask">
                  
            </div>
            <img src="tudou.jpg" alt="">
</body>

</html>      

01-css進階技巧

02-精靈圖

為了有效的減少伺服器接收和發送請求的次數，提高頁面的加載速度，出現了css精靈技術

核心原理：将網頁中的一些小背景圖像整合到一張大圖中，這樣伺服器隻需要一次請求就可以了

03-精靈圖的使用

使用精靈圖的核心

1.精靈技術主要針對背景圖檔使用，就是把多個小背景圖檔整合到一張大圖檔上

2.移動背景圖檔位置，background-position

3.主要通過移動x軸和y軸，注意網頁坐标和普通坐标不同

4.一般情況下往上往左移動，是以數值是負值，往右走是正值

5.需要準确測量，每個小背景圖檔的大小和位置

04-使用 拼出自己的名字

設定寬高

background：url（images/abcd.jpg） no-repeat -215px -141px;

06-字型圖示

iconfont

展示的是圖示，顯示的是字型

優點：輕量級，靈活性，相容性

字型圖示不能替代精靈技術

總結

1.結構和樣式比較簡單的，用字型圖示

2.複雜的用精靈圖

07-字型圖示下載下傳

1.下載下傳

2.引入到HTML

3.追加（以後添加新的）

08-應用

<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            /* 字型聲明 */
            @font-face {
                  font-family: 'icomoon';
                  src: url('fonts/icomoon.eot?atws6j');
                  src: url('fonts/icomoon.eot?atws6j#iefix') format('embedded-opentype'),
                        url('fonts/icomoon.ttf?atws6j') format('truetype'),
                        url('fonts/icomoon.woff?atws6j') format('woff'),
                        url('fonts/icomoon.svg?atws6j#icomoon') format('svg');
                  font-weight: normal;
                  font-style: normal;
                  font-display: block;
            }

            span {
                  font-family: 'icomoon';
                  font-size: 300px;
                  color: pink;
            }
      </style>
</head>

<body>
      <span></span>
      <span></span>
</body>

</html>      

10-css三角的做法

<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            .box1 {
                  width: 0;
                  height: 0;
                  border-top: 10px solid pink;
                  border-right: 10px solid hotpink;
                  border-bottom: 10px solid plum;
                  border-left: 10px solid greenyellow;
            }

            .box2 {
                  width: 0;
                  height: 0;
                  border: 10px solid transparent;
                  border-left-color: pink;
                  margin: 100px auto;
            }
      </style>
</head>

<body>
      <div class="box1"></div>
      <div class="box2"></div>
</body>

</html>      

11-京東三角

<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            .box1 {
                  width: 0;
                  height: 0;
                  border-top: 10px solid pink;
                  border-right: 10px solid hotpink;
                  border-bottom: 10px solid plum;
                  border-left: 10px solid greenyellow;
            }

            .box2 {
                  width: 0;
                  height: 0;
                  border: 10px solid transparent;
                  border-left-color: pink;
                  margin: 100px auto;
            }

            .jd {
                  position: relative;
                  width: 120px;
                  height: 249px;
                  background-color: pink;
            }

            .jd span {
                  position: absolute;
                  right: 15px;
                  top: -10px;
                  width: 0;
                  height: 0;
                  line-height: 0;
                  font-size: 0;
                  border: 5px solid transparent;
                  border-bottom-color: aqua;
            }
      </style>
</head>

<body>
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="jd">
            <span></span>
      </div>
</body>

</html>      

12-使用者界面-滑鼠樣式

li {cursor: pointer; }

<div class="person">
        <ul>
            <li style="cursor: pointer;">小手</li>
            <li style="cursor: move;">移動</li>
            <li style="cursor: not-allowed;">禁止</li>
            <li></li>
        </ul>
    </div>      

default 預設

13-表單輪廓和防止拖拽文本域

輪廓線outline就是表單外邊的一道輪廓線，預設是有的，我們一般是把它直接去掉，且每個浏覽器對outline的顯示也不同，例如：

/實際中用border比較多/

防止拖拽主要就是針對文本域textarea，它預設在右下角為之，使用者是可以進行拖拽的，這樣容易造成頁面布局混亂，是以，我們經常這樣做：

/直接用resize改為none就能解決拖拽問題/

14-vertical-align屬性應用

用于設定圖檔或者表單（行内塊元素）和文字垂直對齊

設定一個元素的垂直對齊方式，隻針對于行内元素或者行内塊元素有效

定義和用法

vertical-align 屬性設定元素的垂直對齊方式。

baseline 預設。元素放置在父元素的基線上。

top 把元素的頂端與行中最高元素的頂端對齊

middle 把此元素放置在父元素的中部。

bottom 把元素的頂端與行中最低的元素的頂端對齊。

<html>

<head>
<style type="text/css">
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
</style>
</head>

<body>

<p>
這是一幅<img class="top" border="0" src="/i/eg_cute.gif" />位于段落中的圖像。
</p> 

<p>
這是一幅<img class="bottom" border="0" src="/i/eg_cute.gif" />位于段落中的圖像。
</p>

</body>      

15-圖檔底側空白縫隙解決方案

效果：（有留白）原因：行内塊元素會和文字的基線對齊

1.  image{
    vertical-align: middle;//任意一個屬性都可以(提倡使用)
  }      

2.  image{
    display: block;//圖檔改成塊級元素
  }      

16-溢出的文字用省略号顯示

單行文本溢出

display:block;
先強制一行内顯示
white-space:nowrap;（normal自動換行）如果顯示不開也強制一行内顯示
超出的部分隐藏
overflow:hidden;
text-overflow:ellipsis; // 省略号顯示      

17-多行文本溢出

overflow:hidden;
text-overflow:ellipsis;
彈性伸縮盒子模型顯示
display:-webkit-box;
限制在一個塊元素顯示的文本的行數
-webkit-box-orient:vertical;
設定或檢索伸縮對象的子元素的排列方式
-webkit-line-clamp:2; // 設定要顯示的行數      

隻有超出才顯示省略号

隻适合于webkit浏覽器或移動端

18-布局技巧

1.margin負值的應用

<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            ul li {
                  position: relative;
                  float: left;
                  list-style: none;
                  width: 150px;
                  height: 200px;
                  border: 1px solid red;
                  margin-left: -1px;
            }

            ul li:hover {
                  z-index: 1;
                  /* position: relative; */
                  /* 相對定位會壓住标準流，隻能用相對定位  */
                  border: 1px solid blue;
            }
      </style>
</head>

<body>
      <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
      </ul>
</body>

</html>      

20-文字圍繞浮動元素小妙招

文字和父盒子一樣寬，設定圖檔浮動

21-行内塊的巧妙使用

<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            * {
                  margin: 0;
                  padding: 0;
            }

            .box {
                  text-align: center;
            }

            .box a {
                  display: inline-block;
                  width: 36px;
                  height: 36px;
                  background-color: #f7f7f7;
                  border: 1px solid #ccc;
                  text-align: center;
                  line-height: 36px;
                  text-decoration: none;
                  color: #333;
                  font-size: 14px;
            }

            .box .prev,
            .next {
                  width: 85px;
            }

            .box .current,
            .box .elp {
                  background-color: #fff;
                  border: none;
            }

            .box input {
                  height: 36px;
                  width: 45px;
                  border: 1px solid #ccc;
                  outline: none;
            }

            .box button {
                  width: 60px;
                  height: 36px;
                  background-color: #f7f7f7;
                  border: 1px solid #ccc;
            }
      </style>
</head>

<body>
      <div class="box">
            <a href="#" class="prev"><<上一頁</a>
            <a href="#" class="current">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#">6</a>
            <a href="#" class="elp">...</a>
            <a href="#" class="next">">>">>下一頁</a>
            到第
            <input type="text" value="确定">
      </div>
</body>

</html>      

22-css三角巧妙應用

把上邊框寬度調大

　　左邊下邊的邊框寬度設定0

.box1 {
         
        width: 0;
        height: 0;
        /*把上邊寬度調大一些 實線 顔色改成透明色*/
        /*border-top: 100px solid transparent;*/
        /*左邊下邊邊框寬度設定成0 實線 顔色改成透明*/
        /*border-bottom: 0 solid transparent;*/
        /*border-left: 0 solid transparent;*/
        /*右邊邊框寬度設定小點 實線 顔色改成可以看見的*/
        /*border-right: 50px solid red;*/
         
        /*符合寫法*/
        border-color: transparent red transparent transparent;
        border-width: 100px 50px 0 0;
        border-style: solid;
       }      

23-三角巧妙應用

```html
<head>
    <style>
        .box1 {
            width: 0;
            height: 0;
            width: 0;
            height: 0;
            /*3.把頂部的顔色設為透明,再把上邊框寬度調大*/
            /* border-top: 100px solid transparent;
            border-right: 50px solid green; */
            /*1.首先把border-bottom的邊框設為0*/
            /* border-bottom: 0px solid blue; */
            /*2.再把左側的設為0*/
            /* border-left: 0px solid pink; */
            
            /*簡寫方式*/
            /*1.隻保留右邊的邊框有顔色*/
            border-color: transparent green transparent transparent;
            /*2.樣式都是 solid*/
            border-style: solid;
            /*3.上邊框寬度要大，右邊框寬度要小，其餘的邊框該為0*/
            border-width: 100px 50px 0 0;
        }
        .price {
            width: 160px;
            height: 24px;
            line-height: 24px;
            border: 1px solid red;
            margin: 0 auto;
          

         }
         .miaosha {
             position: relative;
             float: left;
             width: 90px;
             height: 100%;
             background-color: red;
             text-align: center;
             color: #fff;
             font-weight: 700;
             margin-right: 8px;

         }
         .miaosha i {
             position:absolute;
             right: 0;
             top: 0;
             width: 0;
             height: 0;
             border-color: transparent #fff transparent transparent;
             border-style: solid;
             border-width: 24px 10px 0 0;
            
         }
         .origin {
             font-size: 12px;
             color:gray;
             text-decoration: line-through;
         }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="price">
        <span class="miaosha">￥427 
            <i></i>
        </span>
        <span class="origin">￥1420</span>
    </div>
</body>      

24-css初始化

重設浏覽器的樣式

每個網頁都要css初始化

例如京東

/* 把我們所有标簽的内外邊距清零 */
* {
    margin: 0;
    padding: 0
}
/* em 和 i 斜體的文字不傾斜 */
em,
i {
    font-style: normal
}
/* 去掉li 的小圓點 */
li {
    list-style: none
}

img {
    /* border 0 照顧低版本浏覽器 如果 圖檔外面包含了連結會有邊框的問題 */
    border: 0;
    /* 取消圖檔底側有空白縫隙的問題 */
    vertical-align: middle
}

button {
    /* 當我們滑鼠經過button 按鈕的時候，滑鼠變成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋體的意思 這樣浏覽器相容性比較好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* CSS3 抗鋸齒形 讓文字顯示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}
/* 清除浮動 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}      

宋體                   SimSun     \5B8B\4F53
黑體                   SimHei     \9ED1\4F53
微軟雅黑            Microsoft YaHei     \5FAE\8F6F\96C5\9ED1

01-導讀

02-HTML5新特性
1.<header>頭部标簽

2.<nav>導航标簽

3.<content>内容标簽

4.<section>定義文檔某個區域

5.<aside>側邊欄标簽

6.<footer>尾部标簽

```html
<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            header,
            nav {
                  height: 120px;
                  background-color: pink;
                  border-radius: 15px;
                  width: 800px;
                  margin: 15px auto;
            }

            section {
                  width: 500px;
                  height: 300px;
                  background-color: skyblue;
            }
      </style>
</head>

<body>
      <header>頭部标簽</header>
      <nav>導航欄标簽</nav>
      <section>某個區域</section>
</body>

</html>      

03-新增視訊标簽

1.

定義視訊，屬性src引入資源，controls視訊的控制控件

你的浏覽器不支援video标簽

以防使用者浏覽的視訊不支援某些格式的視訊，可以為使用者多準備些格式的視訊,目前支援的視訊格式video/ogg，video/mp4，video/webm其他格式需要轉換

你的浏覽器不支援video标簽 盡量使用mp4标簽

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
</head>
<body>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏覽器不支援 HTML5 video 标簽。
</video>

</body>
</html>      

屬性

new : HTML5 中的新屬性。

屬性 值 描述

autoplay autoplay 如果出現該屬性，則視訊在就緒後馬上播放。（谷歌浏覽器添加muted可以播放）

controls controls 如果出現該屬性，則向使用者顯示控件，比如播放按鈕。

height pixels 設定視訊播放器的高度。

loop loop 如果出現該屬性，則當媒介檔案完成播放後再次開始播放。

muted muted 規定視訊的音頻輸出應該被靜音。

poster URL 規定視訊下載下傳時顯示的圖像，或者在使用者點選播放按鈕前顯示的圖像。

preload preload

如果出現該屬性，則視訊在頁面加載時進行加載，并預備播放。

如果使用 “autoplay”，則忽略該屬性。

src url 要播放的視訊的 URL。

width pixels 設定視訊播放器的寬度。

04-音頻格式

2.

該标簽可定義聲音，及其他的音頻檔案，不加controls不顯示音頻的控制界面

你的浏覽器不支援audio标簽

你的浏覽器不支援audio标簽

目前音頻可用類型audio/ogg，audio/mpeg

屬性

new : HTML5 中的新屬性。

屬性 值 描述

autoplay autoplay 如果出現該屬性，則音頻在就緒後馬上播放。

controls controls 如果出現該屬性，則向使用者顯示控件，比如播放按鈕。

loop loop 如果出現該屬性，則每當音頻結束時重新開始播放。

muted muted 規定視訊輸出應該被靜音。

preload preload

如果出現該屬性，則音頻在頁面加載時進行加載，并預備播放。

如果使用 “autoplay”，則忽略該屬性。

src url 要播放的音頻的 URL。

05-新增input表單

HTML5中新增的input類型及其屬性

HTML4.01中，input的類型隻有text、button、password、submit、radio、checkbox和hidden（隐藏域）。H5中新增了一些類型，使用起來更加友善，包括：

color

點選時彈出顔色選擇器，可以選擇任意顔色

number

輸入範圍内的數字，可以手動輸入超出範圍的數字，但不能送出

tel

輸入電話号碼，隻有safari支援

email

自帶檢測功能，送出時會檢測是否包含@符，并且@符前後是否有字元

range

url

輸入的網址必須是http://開頭，并且後面必須有字元，否則不能送出

date

可以手動選擇日期

time

可以手動選擇時間

datetime

選擇帶有時區的日期和時間，ie，firfox和chrome都不支援

datetime-local

選擇日期和時間，沒有時區

month

和date類型一樣，隻不過隻能選擇到月份

week

隻能選擇到第幾周，這種日期方式國内基本很少用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>

<body>
<form   action="test1.html"  method="post">
     <input type="email"   name="email" value="[email protected]">
       <input type="submit"  value="送出">
</form>
</body>
</html>      

06-新增表單屬性

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
Name: <input type="text" name="usr_name" required="required" />
<input type="submit" value="送出" />
</form>

</body>
</html>      

required 屬性規定必需在送出之前填寫輸入字段。

如果使用該屬性，則字段是必填（或必選）的。

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
<input type="search" name="user_search" placeholder="Search W3School" />
<input type="submit" />
</form>

</body>
</html>      

placeholder 屬性提供可描述輸入字段預期值的提示資訊（hint）。

該提示會在輸入字段為空時顯示，并會在字段獲得焦點時消失

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp">
  First name: <input type="text" name="fname" autofocus><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit">
</form>

<p><b>注釋：</b>Internet Explorer 9 以及更早的版本不支援 input 标簽的 autofocus 屬性。</p>

</body>
</html>      

autofocus 屬性規定當頁面加載時 input 元素應該自動獲得焦點。

如果使用該屬性，則 input 元素會獲得焦點。

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

<p>填寫并送出表單，然後重新加載該頁面，看看自動完成功能是如何工作的。</p>
<p>注意，表單的自動完成功能是打開的，但是 e-mail 字段的自動完成功能是關閉的。</p>

</body>
</html>      

autocomplete 屬性規定輸入字段是否應該啟用自動完成功能。但是必須填入name屬性，屬性改為off更安全

自動完成允許浏覽器預測對字段的輸入。當使用者在字段開始鍵入時，浏覽器基于之前鍵入過的值，應該顯示出在字段中填寫的選項。

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
選擇圖檔：<input type="file" name="img" multiple="multiple" />
<input type="submit" />
</form>
<p>請嘗試在浏覽檔案時選取一個以上的檔案。</p>

</body>
</html>      

multiple 屬性規定輸入字段可選擇多個值。

如果使用該屬性，則字段可接受多個值

07-css3新增選擇器

1.屬性選擇器

根據特定的屬性來選擇元素

img[alt] 選擇帶有alt屬性的img标簽

img[alt=“湖南”] 選擇alt屬性是“湖南”的img标簽

img[alt^=“湖南”] 選擇alt屬性以“湖南”開頭的img标簽

img[alt$=“湖南”] 選擇alt屬性以“湖南”結尾的img标簽

img[alt*=“美”] 選擇alt屬性含有“美”字的img标簽

img[alt~=“湖南”] 選擇alt屬性中有空格隔開的“湖南”一詞的img标簽

img[alt|=“湖南”] 選擇alt屬性以“湖南-”開頭的img标簽

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>

            /* input[value] {
                  color:pink;
            } */
            input[type=text] {
                  color:pink;
            }
            /* 選擇首先是div 然後具有css屬性 并且屬性值一定是icon開頭的這些元素 */
            div[class^=icon] {
                  color:pink;
            }
            section[class$=data] {
                  color:blue;
            }
      </style>
</head>
<body>
      <!--1. 利用屬性選擇器就可以不用借助于類或者id選擇器
      <input type="text">
      <input type="text" value="請輸入使用者名"> -->
      <!-- 2.屬性選擇器可以選擇屬性=值的某些元素 -->
      <input type="text" name="" id="">
      <input type="password" name="" id="">
      <!-- 3.可以選擇屬性值開頭的某些元素 -->
      <div class="icon1">小圖示1</div>
      <div class="icon2">小圖示2</div>
      <div class="icon3">小圖示3</div>
      <div class="icon4">小圖示4</div>
      <div>我是打醬油的</div>
      <!-- 4.可以選擇屬性值結尾的某些元素 -->
      <section class="icon1-data">我是安其拉</section>
      <section class="icon2-data">我是哥斯拉</section>
      <section class="icon3-ico">那我是誰</section>
</body>
</html>      

注意：

類選擇器和屬性選擇器 僞類選擇器 權重都是10

09-新增結構僞類選擇器-選擇第n個元素

主要根據文檔結構來選擇元素，常用于根據父級選擇器裡面的子元素

父元素 E:first-child 父元素中的第一個子元素 E

父元素 E:last-child 父元素中的最後一個子元素 E

父元素 E:nth-child( n ) 父元素中的第 N 個子元素 E

10-child選擇器

nth-child( n ) 注意點：（n 可以是數字，關鍵字和公式）

數字：選擇第 n 個子元素，裡面數字從 1 開始

關鍵字： even 偶數，odd 奇數

ul li:nth-child( even ) // 選擇 ul 中所有 偶數行的 li 子元素

公式：常見公式如下（如果 n 是公式，則從 0 開始計算，但是第 0 個元素 或者超出了元素的個數會被忽略）

ul li:nth-child( n ) // 從 0 開始 每次加1 往後計算，相當于選擇了所有的孩子 這裡面必須是 n 不能是其他字母

偶數：2n 奇數：2n+1 5的倍數：5n 從第5個開始（包含第5個）到最後：n+5 前5 個（包含第5 個）：-n + 5

E:first-of-type：指定類型 E 的第一個

E:last-of-type：指定類型 E 的最後一個

E:nth-of-type( n )：指定類型 E 的第 n 個

差別：（兩種相反的查找模式）

1. nth-child 對父元素裡面所有孩子排序選擇（序号是固定的）先找到第 n 個孩子，然後看看是否和 E 比對

2. nth-of-type 對父元素裡面指定子元素進行排序選擇。先去比對 E ，然後再根據 E 找第 n 個孩子

12----僞元素選擇器（重點）      

僞元素選擇器 可以幫助我們 利用 css 建立新标簽元素，而不需要 HTML 标簽，進而簡化 HTML 結構

:: before 在元素内部的前面插入内容

:: after 在元素内部的後面 插入内容

注意：

before 和 after 建立一個元素，但是屬于行内元素

新建立的這個元素在文檔樹種是找不到的，是以我們稱為僞元素

文法：element::before{ }

before 和 after 必須有 content 屬性

before 在父元素内容的前面建立元素，after 在父元素内容的後面插入元素

僞元素選擇器 和 标簽選擇器一樣，權重為 1

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            div {
                  width: 200px;
                  height: 200px;
                  background-color: pink;
            }
            div::before {
                  /* 這個content是必須要寫的 */
                  content: '我';
            }
            div::after {
                  content:'小豬佩奇';
            }
      </style>
</head>
<body>
      <div>
            是
      </div>
</body>
</html>      

14-僞元素字型圖示

<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            @font-face {
                  font-family: 'icomoon';
                  src: url('fonts/icomoon.eot?atws6j');
                  src: url('fonts/icomoon.eot?atws6j#iefix') format('embedded-opentype'),
                        url('fonts/icomoon.ttf?atws6j') format('truetype'),
                        url('fonts/icomoon.woff?atws6j') format('woff'),
                        url('fonts/icomoon.svg?atws6j#icomoon') format('svg');
                  font-weight: normal;
                  font-style: normal;
                  font-display: block;
            }

            div {
                  position: relative;
                  width: 200px;
                  height: 35px;
                  border: 1px solid pink;
            }

            div::after {
                  position: absolute;
                  top: 10px;
                  right: 10px;
                  font-family: 'icomoon';
                  /* content: ''; */
                  content: '/e907'
                        color: thistle;
                  font-size: 18px;
            }
      </style>
</head>

<body>
      <div></div>
</body>

</html>      

16-僞元素清除浮動

<!--将clearfix類名加到浮動元素父級盒子上-->
.clearfix:after{
    content:"";             /*設定内容為空*/
    height:0;               /*高度為0*/
    line-height:0;          /*行高為0*/
    display:block;          /*将文本轉為塊級元素*/
    visibility:hidden;      /*将元素隐藏*/
    clear:both;             /*清除浮動*/
}      

17-盒子模型

box-sizing

content-box: 以前預設的

border-box 盒子大小為width

改為這種，padding和border就不會撐大盒子了

18-圖檔模糊化處理

濾鏡filter

filter：函數（）；

filter：blur（5px）； blur模糊處理 數值越大越模糊

19-calc函數

計算屬性值

width: calc(100%-80px);

20-過渡上

經常和：hover配合使用

transition：要過渡的屬性 花費時間 運動曲線 何時開始

誰做過渡給誰加

21-下

如果想要寫多個屬性，利用逗号分隔，或者直接寫all

前兩個值必須寫，後兩個值可寫可不寫

22-複習過渡 進度條

<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            .bar {
                  width: 150px;
                  height: 15px;
                  border: 1px solid red;
                  border-radius: 7px;
                  padding: 1px;
            }

            .bar_in {
                  width: 50%;
                  height: 100%;
                  background-color: red;
                  transition: all .7s;
            }

            .bar:hover .bar_in {
                  width: 100%;
            }
      </style>
</head>

<body>
      <div class="bar">
            <div class="bar_in">

            </div>

      </div>
</body>

</html>      

2D轉換之translate

2D移動是2D轉換裡面的一種功能,可以改變元素在頁面中的位置,類似定位

1.文法

transform: translate(x,y);

transform: translateX(n);

transform: translateY(n);

2.重點

定義2D轉換中的移動,沿着X和Y軸移動元素

translate最大的優點:不會影響其他元素的位置

translate中的百分比機關是相對于自身元素的translate:(50%,50%);

對行内标簽沒有效果

4.3 2D轉換之元素轉換中心點rotate

旋轉360°

transform: rotate(360deg);

2D旋轉中心點transform-origin

可以設定元素轉換的中心點

1. 文法

   transform-origin: x y;

2. 重點

   注意後面的參數x和y用空格隔開

   x y預設轉換的中心點是元素的中心點（50% 50%）等價于 center

   還可以給x y設定 像素 或者 方位名詞 （top bottom left right center）

3. 案例