溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
好程序員 HTML5 培訓教程 -html 和 css 的使用方法以及樣式，很好的基礎知識系列，內容都是干貨知識點，適合收藏下來！
布局步驟
第一步：
清除默認樣式
第二步：
劃分模塊
第三步：
設置模塊的大小以及位置
第四步：
劃分下一級模塊
html
和
css
引入網頁頭像
<link rel="shortcut icon" href="img/...ico">
css
樣式表的引入方式
css
樣式表的引入方式
1
、外鏈式
<link href = "" rel = "stylesheet" >
2 、嵌入式
<style></style>
3 、行內樣式
<div style = "width:200px;height:200pxs;" ></div>
文件命名以及變量命名
命名規范
1
、嚴格區分大小寫
2
、可以采用字母數字下劃線
$,
數字不開頭
3
、命名語義化
4
、可以采用駝峰命名法
清除默認樣式
清楚邊距
*{
margin : ;
padding : ;
list-style : none;
}
a 標簽清楚下劃線和顏色
a {
color : black;
text-decoration : none;
}
css 中顏色的表示方式
css
中顏色的表示方式：
1.
預定義的顏色【關鍵字顏色】
red pink blue yellow
2.#6
位數的色值
#00-00-00
紅綠藍
3.rgb
（紅，綠，藍）
：
rgb([0-255],[0-255],[0-255])
4.rgba
（
red
，
green
，
blue
，透明度）
：
rgba([0-255],[0-255],[0-255]
，
[0-1])
0-1: 0 全透明， 1 不透明
html
中的標簽和屬性
html
：
標簽：
按照語法分類：
1. 單標簽：只有開始標簽
meta img a
2. 雙標簽：有開始標簽和結束標簽
<html> </html>
3. 屬性的語法
語法：
屬性名 = " 屬性值 "
屬性名 = " 屬性值 1 屬性值 2"
注意 :
1 、標簽名和屬性名之間要有空格
2 、多個屬性之間要有空格
3 、多個屬性值之間要有空格
4. 開始標簽 標簽名后有空格
按照標簽在頁面中的呈現效果分類：
1 、行內元素
行內元素定義 : 在一行內顯示，只能設置左右間距，不可以設置上下間距。
舉例： span del i em b strong a(title= " 鼠標移入時顯示的文字 " ;target= " " ( 新窗口打開的位置 _self: 在本窗口打開 ;_blank: 在新窗口打開 ) ...
2 、塊元素
塊元素定義：可以設置寬高，獨占一行。
舉例： div 標題標簽 列表標簽 段落標簽 ...
3 、行內塊元素
行內塊元素定義：可以設置寬高，在一行顯示。
舉例： img 【 title= " 鼠標移入時顯示的文字 " 】 表單控件
元素的轉換
塊元素： display: block;
行內塊元素： display: inline-block;
行內元素： display: inline;
元素的級別
塊元素 > 行內塊元素 > 行內元素
元素嵌套規范
1 、同一級別可以相互嵌套
2 、級別高的元素可以嵌套級別低的元素
3 、段落標簽只能嵌套行內元素
4 、 a 標簽不可以嵌套 a 標簽； p 不能嵌套 p
盒子模型及其問題
四部構成：
1 、 margin 外間距 盒子與盒子之間的距離
2 、 border 邊框
3 、 padding 內填充（內間距） 邊框與內容之間的距離。
4 、 content 內容
margin-top margin-right margin-bottom margin-left
margin: 50px; 上 右 下 左
margin: 50px 100px; 上下 左右
margin: 0 auto; auto 自動
margin: 50px 100px 150px; 上 左右 下
margin: 50px 100px 150px 200px; 上 右 下 左
border: 1px solid red;
border-top \ border-right \border-bottom \ border-left
border-top-width ：上邊框的寬度
padding:
設置方法同
margin
content: ;
width : 數值 百分比 auto
height: 數值 百分比 auto
盒子模型的問題：
1. 大部分元素的 margin 和 padding 默認為 ，但有一部分的 margin 和 padding 不為 ，例如 body 標題標簽（ h2-h7 ）（ ul ol il 等列表標簽） 段落標簽
2. 想領的兩個塊元素的 margin 會重合，值會取最大值
3.margin 可以為 [ 負數 ] ， padding 不可以設置 [ 負數 ] 。
4. 行內元素 margin 只有左右，沒有上下
5. 如果（ 1 ）發生嵌套關系的元素，（ 2 ）父元素沒有上邊框，（ 3 ）上 padding ，（ 4 ）父元素與子元素之間沒有別的內容，此時子元素 margin-top 就會作用到父元素身上
margin-top 的解決方式：
1. 用父元素的 padding-top 代替子元素的 margin-top ；
2. 給父元素添加 overflow ： hidden ；
寬高的設置和計算
height
：
auto /
百分比
/ px
；
width
：
auto /
百分比
/ px
；
height
：
auto
；
參照與父元素
width
：
auto
；參照與內容
box-sizing
：
border-box
；
將邊框算入盒子內；
一個元素實際的寬高
實際寬度
= border-left + padding-left + width +paddint-right + border-right;
實際高度
= border-top + padding-top + height + padding-bottom + border-bottom;
浮動
作用：讓塊元素橫排排列
樣式：
float
：
left
；從左往右排列
float ： right ；從右往左排列
原理：讓元素脫離文檔流，讓元素從文檔層浮動到浮動層。
引發的問題：父元素不設置高度，子元素都浮動，浮動的子元素撐不開父元素。（浮動的元素脫離文檔流）
* 解決方式一：給父元素添加 overflow ： hidden ；（超出部分隱藏）
* 解決方式二：在父元素內容最后添加擁有清除浮動屬性的元素。
clear ： right/left/both ； 別的浮動對它的影響清除掉
例：
.box ： after{
content: "";
display: block;
width: 0;
height: 0;
clear: both;
}
* 解決方式三：父元素能設置高度的盡量設置高度
浮動之后的塊元素參照內容：屬性值
auto
定位
定位的元素脫離文檔層，到達定位層
定位的元素會多出
5
個樣式：
top right bottom left z-index ： 999
上 右 下 左 層級（層級越高，離用戶越近）【只能在有定位屬性的元素上才能用】
層級：
z-index
：整數；
定位的幾種方式：
1.
相對定位：
相對于自身來定位，在文檔層中保留原來的位置
用法：
position ： relative ；
2. 絕對定位：
相對于最近的 定位的 祖先元素 來定位，完全脫離文檔流（其他頂替其位置）
用法：
position ： absolute ；
+ 方向值
3. 固定定位：
相對于瀏覽器的四條邊，完全脫離文檔流
用法：
position ： fixed ；
top 與 bottom 同時定義，那個樣式會作用到元素身上的判斷關系：
top 的權重比 bottom 的權重大
left 的權重比 right 的權重大
元素作用時：
1. 如果是
position ： relative ；
left ：；
margin ：；
先作用 margin ，在作用 relative ；
2. 如果是
position ： absolute ；
left ：；
margin ：；
先作用 absolute ，在作用 margin ；
定位元素的居中方式：
方法一：
1 . 水平居中：
position ： absolute ；
left ： 50 % ；
margin- left ： - 自身長度的一半；
2 . 垂直居中：
position ： absolute ；
top ： 50 % ；
margin-top ： - 自身長度的一半；
3 . 絕對居中：
position ： absolute ；
left ： 50 % ；
top ： 50 % ；
margin- left ： - 自身長度的一半；
margin-top ： - 自身長度的一半；
方法二：
1 . 水平居中：
position ： absolute ；
left ： ；
right ：
2D 和 3D
2D
和
3D
屬性：
1.
平移樣式
transform :translate(x, y ); 向上為負， 向下為正
transform :translateX(100px);
transform ： rotate （ 180 deg ） ； （ 1 turn ）轉一圈
平移 transform :translate （） 例子： translate （ x ， y ） translateX （）
旋轉 transform :rotate （） 例子 rotate （ 180 deg ）順時針 -180deg 逆時針
transform ： rotate （）空格 translate （）；
transform-origin :px px ; 變換的中心點；
left center ；
縮放 transform :scale （） 例子： scale （ 2 ） 放大為原來的 2 倍 scale （ 0.n ）縮小為原 來的 0.n scale （ m ， n ） x 軸 m ， y 軸 n
斜切 transform :skew （） 例子： skew （ 45 peg ） 左拉伸 45° skew （ 45 peg ， m ）
全部 時間
3. 過渡的屬性樣式： transition-property: ， ;
可以為：屬性的全部樣式
4.
過度的總時間：
transition-duration
：；
5.
過渡的時間函數：
transition-timing-function
：；
linear （勻速） ease （開頭結尾慢，中間快）
cubic-bezier （ 1 ， 0.07 ， 0.54 ， 0.21 ） 貝塞爾曲線
6.
延遲
transition-delay
：；
3d
效果：和
2d
的一樣
transition
，
transform
；
prespective ：給父元素加 prespective （滅點的值）
prespective-origin ： x y ；滅點的位置 調整觀察的角度（大多數情況不設置）
transform ： ratate3d （ 0-1 的值 , 0-1 的值 , 0-1 的值 , 45 deg ）
transform ： ratateY （ 45 deg ）
transform ： translate3d （ 0-1 ， 0-1 ， px ）
父元素：
transform-style
：
preserve-3d
；
動畫
動畫規則：
@ keyframes 動畫名（隨便給） {
（動畫規則）
from {}
to {}
}
@ keyframes 動畫名（隨便給） {
（動畫規則）
0%{}
50%{}
100%{}
}
@ keyframes animation1{
from {
background-color :red;
}
to {
background-color :blue;
}
}
掛載動畫
:
將動畫加到元素身上
. 元素 {
animation ： animation1 時間 步數 時間函數 延遲時間 次數 ；
}
掛載多個動畫：
. 元素 {
animation ： animation1 時間 ,animation2 時間 ,animation1 時間；
其他動畫的相同的可以附件通過 animation 屬性；
}
animation
的樣式
動畫名：
animation-name
時間：
animation-duration
步數：
animation-steps
：
8
；
時間函數：
animation-timing-function
延遲：
animation-delay
動畫次數：
animation-iteration-count
：
infinite
（無限次）
/2
；
指定下一次動畫是否逆向：
animation-direction
：
alternate
（逆向）
/ normal
（常規）；
最后的狀態：
animation-fill-mode
：
backwards
（默認（保持一開始的狀態））
/forwards
（保持當前的狀態）；
狀態即指定動畫是否運動：
animation-play-state: running
（運行）
/paused
（靜止）
;
元素分類
按照在頁面中的呈現效果：
1.
行內元素：在一行內顯示
，不可以設置寬高
：（存放文字）
span a b i strong del
2. 行內塊元素：在一行內顯示，可以設置寬高：（有縫隙 不常用）
img 表單控件
3. 塊元素 ：可以設置寬高，獨占一行
div 標題標簽（ h2-h7 ） 列表標簽（ ul-li ol-li dl>dt+dd 段落標簽 （ p pre ））
元素嵌套規范：
1. 同一級別可以相互嵌套
2. 級別高的可以嵌套級別低的元素
3.p 標簽只能嵌套行內元素
4.a 鏈接不能相互嵌套
元素的轉換：
1. 塊元素： display ： block ；
2. 行內塊元素： display ： inline -block ；
3. 行內元素： display ： inline ；
背景圖片以及瀏覽器內核
背景圖
先設大小，在引 background ；
background: url( ' 路徑 ' ) no-repeat left bottom/contain ；
// 圖片位置 禁止重復 位置（ top bottom left right ）
4. background- repeat ： no- repeat ， repeat ；（無重復）
5. background- repeat ： repeat -x （ x 方向重復）
background- repeat ： repeat -y （ y 方向重復）
background-position ： x y ；（數值 方位值（ top/bottom left / right center （可以省略）） ）
8. padding- box ；（默認）從 padding 位置開始渲染
9. border- box ；從邊框的位置開始渲染
content- box ；從內容的位置開始渲染
11. padding- box ；（默認）從 padding 位置結束渲染
12. border- box ；從邊框的位置結束渲染
content- box ；從內容的位置結束渲染
8. 可以簡寫：
background ：空格隔開；
// 漸變開始的方向（默認 top ） 類似 25deg （ 25 度）
10. 瀏覽器內核 // 背景色漸變
1. /* 標準語法 */
例子： background : linear-gradient ( top , #3bbcff , #47eaff );
2. /* 谷歌內核 -webkit- */
例子： background : -webkit-linear-gradient ( top , #3bbcff , #47eaff );
3. /* 火狐內核 -moz- */
例子： background : -moz-linear-gradient ( top , #3bbcff , #47eaff );
4. /* 歐鵬內核 -o- */
例子： background : -o-linear-gradient ( top , #3bbcff , #47eaff );
5. /* IE 內核 -ms- */
例子： background : -ms-linear-gradient ( top , #3bbcff , #47eaff );
文件的讀取方法路徑
絕對路徑：從盤符開始的一條完整路徑
相對路徑：兩個文件的位置關系
邊框的相關屬性【圓角，邊框形狀】
border-radius
：邊框的半徑
設置圓角
n%
或者
num
像素
border-style:dotted solid double dashed;
上邊框是點狀
右邊框是實線
下邊框是雙線
左邊框是虛線
透明度
透明性的選擇：（整個容器都變）
opacity
：；
0-1
之間的值；
字體
font-family =“
字體
” //
字體樣式可以被繼承
鼠標移入樣式
span
標簽
cursor
：
pointer
；
鼠標樣式：手型
陰影
box-shadow
：
x
軸偏移量
y
軸偏移量
陰影的模糊程度
陰影的大小（
和本身一樣大小）
陰影的顏色；
引入字符圖標
引入字符圖標：
行內元素
隨意
span class=“iconfont
圖標類名
”
可調節樣式：
同文字
文檔流
文檔流：
標準情況下 ，頁面元素從左往右 從上往下 依次排列
flex 布局 ( 規范的設計稿 )- 彈性布局
容器（父元素）的屬性：【 display:flex; 】
*flex-direction: 決定主軸方向。
row 主軸在水平方向，從左向右（默認）。
row- reverse 主軸在水平方向，從右向左
column 主軸在垂直方向，從上到下
column- reverse 主軸在垂直方向，從下到上
*flex- wrap : 決定項目換行
wrap : 項目換行
nowrap: 項目不換行（默認值）
wrap - reverse ： 項目換行且反轉
*justify-content: 決定項目在主軸的對齊方式
flex-start; 主軸的起點
flex- end ; 主軸的終點
center; 主軸的中心
space-between; 兩端對齊
space-around; 項目兩側距離相等
*align-items ：項目在交叉軸上的對齊方式（適用于一根軸線與多跟軸線）
flex-start: 交叉軸的起點
flex- end ：交叉軸的終點
Center ：交叉軸的中心
baseline ： 基線對齊（文本底部）
*align-content: 定義項目在交叉軸上的對齊方式（僅適用于多根軸線）
flex-start; 交叉軸的起點
flex- end ; 交叉軸的終點
center; 交叉軸的中心
space-between; 兩端對齊
space-around; 兩側距離相等
子元素（項目）的屬性：
*order ：定義項目的排列順序，數值越小，越靠前，默認值為 （可以取負值）。
*flex- grow: 定義項目的放大比例。默認值為 ，即使存在剩余空間，也不放大。
*flex-shrik ：定義項目的縮小比例，默認值為 1 ，空間不足，項目縮小 ; 值為 時 , 空間不足 , 項目也不縮小 .
*flex- basis: 定義項目占據的主軸空間 . 默認 auto 或者自己添加像素 ;
*align- self: 定義單個項目在交叉軸的對齊方式 .
flex- start: 交叉軸的起點
flex-end ：交叉軸的終點
Center ：交叉軸的中心
滾動條
overflow-x ： auto ；超出部分在 x 軸的表現形式。
auto ：自動；（如果超出，就自動以滾動條的形式顯示）
去滾動條： 加在具有 overflow 屬性的元素身上
::-webkit-scrollbar {
height ： ；
}
overflow-x: visible|hidden|scroll|auto|no-display|no-content;
值
描述
測試
visible
不裁剪內容，可能會顯示在內容框之外。
測試
hidden
裁剪內容
-
不提供滾動機制。
測試
scroll
裁剪內容
-
提供滾動機制。
測試
auto
如果溢出框，則應該提供滾動機制。
測試
no-display
如果內容不適合內容框，則刪除整個框。
測試
no-content
如果內容不適合內容框，則隱藏整個內容。
測試
輪播圖
swiper(.js).com
表格
[ 行 ] [ 列 ]
|
|
table
身上的屬性
table 身上的屬性：
border ：表格邊框 cellspacing ：單元格間的間距
cellpadding ：單元格的內容與其邊框的內邊距
bgcolor ：表格的背景顏色 background ：表格的背景圖片
width ：表格寬度 height ：表格高度
border-collaspe ： collaspe ：邊框合并，不疊加 cellspacing ： ：邊框合并，但合并之后的邊框寬度等于 前兩個邊框寬度之和
caption ：表格標題
background: 表格背景圖
cellspacing: 單元格之間的間隙寬度
align: 表格的水平對齊方式，通常是 left ， center ， right
表格的標題
<caption align="
水平對齊方式
" valign="
標題與表格的相對位置
"></caption>
單元格【
tr
】【
td
】
width
：單元格寬度
height
：單元格高度
align
：單元格內文本的對齊方式
,
通常是左，中，右
left
，
center
，
right
valign
：單元格內文本的對齊方式
,
通常是上，中，下
top
，
middle
，
bottom
nowrap
：在為設置單元格寬度時，當文本長度寬于單元格寬度，將要換行時，該標簽會使其不換行
<tr align = "center" valign = "bottom" >
<td align = "center" nowrap > 手機空中免費充值 </td>
<td width = "100px" > IP 卡 </td>
<td width = "100px" bgcolor = "#006400" valign = "top" > 網游 </td>
</tr>
表格的跨行與跨列【 td 】
rowspan
：跨行標簽，表示跨了多少行
colspan
：跨列標簽，表示跨了多少列
|
|
|
|
|
|
|
|||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
表格標簽拓展及其屬性
thead ：定義表格的表頭。
tbody ：定義表格主體（正文）。
tfoot ：定義表格的頁腳（腳注或表注）。
colgroup ：標簽用于對表格中的列進行組合，以便對其進行格式化。
注意：不管 thead 、 tbody 、 tfoot 的代碼先后順序如何， html 顯示時，始終是先顯示 thead ，再顯示 tbody ，最后顯示 tfoot 。
1
、
<thead>
內部必須擁有
<tr>
標簽！
2
、
<tfoot>
元素內部必須包含一個或者多個
<tr>
標簽。
3
、
<tbody>
元素內部必須包含一個或者多個
<tr>
標簽。
4
、必須在
table
元素內部使用這些標簽。
5
、當不同行間的單元格合并時各單元格所在的行不要加
tbody
標簽。
標題欄
《 tr 》 <th></th> 《 /tr 》 用法和 td 相似 知識自動將單元格內容以粗體顯示
表單控件表單標簽
<form action=" " method=" ">
action: 表單信息提交的位置；
method ：提交的方式
get ：地址欄，信息量少，安全性低
post ：信息量多，比較安全
1. 輸入文本【輸入框】：
用戶名： <input type = "text" placeholder= " 請輸入用戶名 " maxlength= "10" value= " " name= "username" class = "" >
placeholder ：默認提示文本 ;
maxlength: 規定輸入的最大字符數
name: 本文本框的名字，與后臺進行數據交互用
class : 定義本文本框的樣式，相當于盒子
placeholder 下的縮進
text-indent ： 2 em ；縮進
2. 輸入密碼【密碼框】：
密碼： <input type = "password" placeholder= " 請輸入密碼 " maxlength= "10" value= " " name= "psw" class = "" >
3. 單選按鈕 [name 的值必須相同 ] ：
請選擇你的性別：
<label for = "man" > [label 實現點什么就選中 ， for 中的值和 id 中的值相同 ]
男： <input type = "radio" name= "sex" id= "man" checked> //checked 默認選項
</label>
<label for = "woman" >
女： <input type = "radio" name= "sex" id= "woman" >
</label>
4. 多選按鈕 [name 的值必須相同 ] ：
請選擇你喜歡的音樂：
搖滾： <input type = "checkbox" checked>
搖滾： <input type = "checkbox" checked>
搖滾： <input type = "checkbox" checked>
5. 下拉列表【下拉框】：
選擇你的學歷：
<select name= "" id= "" >
<option value= "" > 學士 </option>
<option value= "" > 博士 </option>
<option value= "" > 碩士 </option>
</select>
6. 上傳文件：
選擇你的照片：
<input type = "file" >
7. 留言文本空間：
<textarea name= "" id= "" rows= "" col= "" >
</textarea>
8. 用戶是否允許重新設置 textarea 大小 css 屬性：
resize: none/both/vertical/horizontal; 不允許 / 上下允許拖動 / 只能在垂直方向拖動 / 只能在水平方向 拖動
9. 重置按鈕：
<input type = "reset" >
10. 提交按鈕：
<input type = "submit" >
11. 自定義按鈕：
<input type = "button" value= " 按鈕 " >
<button> 搜索 </button>
12. 顏色：
<input type = "color" >
13. 時間日期：
年月： <input type = "month" >
年周： <input type = "week" >
時分： <input type = "time" >
年月日： <input type = "date" >
年月時分： <input type = "datetime-local" >
14. 驗證
<input type = "email" > 郵箱驗證
<input type = "tel" autofocus> 電話
15. autofocus 自動獲取焦點
</form>
文本模型
文本換行
使非中日韓文本換行
word-break: break-all ;
文本禁止換行
white-space:nowrap;
單行文本溢出部分以省略號顯示
overflow: hidden;(
放文本的容器
)
text-overflow: ellipsis;
多行文本溢出
音頻視頻標簽
音頻標簽
<audio src="" controls loop autoplay></audio>
controls 空間向用戶顯示：
loop 循環播放
autoplay 當前頁面加載完自動播放
視頻標簽
<video src="" controls loop autoplay></video>
H5
語義化標簽
<header>
頭部
</header>
<nav>
導航
</nav>
<aside>
側導航
<aside>
<section>
頁面中的某一部分
</section>
<main>
主體
</main>
<footer>
底部
</footer>
meta
標記【簽】
name="
關鍵字
" cantent="
內容
"
<mate http-equiv="Refresh" content="10";url="
跳轉路徑
"> //
每
10s
刷新一次并且跳轉到跳轉路徑知識的文件
bgsound
標簽
<bgsound src="
路徑
" loop="
播放次數
">
body
屬性
對文字操作的標簽
列表標簽
2. <li>
<li>
</ul>
4. <li>
<li>
</ol>
a 標簽
<a href="
路徑
" title="
鼠標移入時顯示的文字
" target=" "(
新窗口打開的位置
_self:
在本窗口打開
;_blank:
在新窗口打開；
_parent:
在當前窗口的父窗口打開鏈接；
_top:
在整個瀏覽器窗口打開
) ...
[
字符實體
]
常用的轉義字符
顯示結果
描述
實體名稱
空格
< 小于號
大于號
&
和號
"
引號
'
撇號
(IE
不支持
)
￠
分（
cent
）
￡
鎊（
pound
）
￥
元（
yen
）
€
歐元（
euro
）
§
小節
?
版權（
copyright
）
?
注冊商標
?
商標
×
乘號
÷
除號
選擇器
分類
css
選擇器
1.
通用選擇器：
* ｛｝ // 選擇所有的標簽
2. 群組選擇器：
E1,E2,E3.. ｛｝ // 選擇 E1 E2 E3
3. 標簽選擇器
標簽名｛｝
4. 類名選擇器：
. 類名｛｝
5. 后代選擇器
.E1 .E2 ｛｝ // 選擇 E1 的后代 E2
6. 交叉選擇器
標簽名 . 類名｛｝
7.id
選擇器
例如
創建
id
<div id = “box” ></div>
#id 名｛｝ // 選擇頁面中 id 為 ** 的標簽
8. 偽類選擇器：
鼠標移入狀態
E ： hover { } E 元素選擇鼠標移入狀態
E ： hover . 子類 { } 選擇 e 元素下鼠標移入時子類的變化
獲取焦點，用于表單的輸入
E : focus {
outline : none;
}
9. 偽結構選擇器：
E ： first-child ｛｝ 作為子元素的第一個孩子的 E 標簽
E ： last-child ｛｝ 作為子元素的最后第一個孩子的 E 標簽
E : nth-child(n){} // 作為子元素的第 n 個孩子的 E 標簽
E : nth-last-child(n) 作為子元素的倒數第 n 個孩子的 E 標簽
E ： first- of - type ｛｝ 作為子元素的同類型的第一元素
E ： last- of - type ｛｝ 作為子元素的同類型中的最后一個元素
E : nth- of - type （ n ） 作為子元素的同類型中的第 n 個元素
E : nth-last- of - type ( n ) 作為子元素的同類型中的倒數第 n 個元素
（ n ） n 可以以為 num/even （偶數） /odd( 奇數 )/ 3 n （ 3 的倍數）
例子： 5.15 / 偽結構選擇器
10. 偽元素選擇器：
::after{} 在元素之后加入一個
::before{
content ： “ 內容之前 ” ；
color ：；
} 在元素之前
屬于行內元素
::after{} ::before{}
偽元素
content
：
""
；
樣式必須寫
11.
子類選擇器
相鄰兄弟選擇器
E1+E2 ｛｝ 選擇 E1 的下一個兄弟元素 E2 （不能選中上一個兄弟元素）
div .box>a+img a 和 img 統計
子類選擇器
E1>E2{} 選擇 E1 的子類元素 E2
例子： div .box> div .item{$}* 20
div .box>a>img
12. 屬性選擇器
[ 屬性名 ]{} 選擇所有擁有屬性為 屬性名 的元素
[ 屬性名 =“value”] ｛｝ 選擇擁有屬性名的屬性 且屬性值為 value
E [ 屬性名 =“value”]{} 選擇擁有屬性名的屬性 且屬性值為 value 的 E 元素
E [ 屬性名 ~=“value”]{} 選擇擁有屬性名的屬性 并且屬性值一個或者多個，其中一個屬性值為 value 的 E 元素
E [value^=“1”]{} 選擇擁有 value 的屬性 并且屬性值一個或者多個，其中一個屬性值以 1 開頭的 E 元素
E [value$=“1”]{} 選擇擁有 value 的屬性 并且屬性值一個或者多個，其中一個屬性值以 1 結尾的 E 元素
E [value*=“1”]{} 選擇擁有 value 的屬性 并且屬性值一個或者多個，其中一個屬性值包含 1 的 E 元素
例子：屬性選擇器
選擇器的優先級
宗旨：越具體的優先級越高
id (100 ) > class( 10 )>
標簽名
( 1)
. box .son{ } 10 + 10 = 20
abcde 優先級（ e 為個位）：
a: 行內樣式
b: id 選擇器
c: 類名選擇器 偽類選擇器（： hover ） 屬性選擇器
d: 標簽選擇器 偽元素選擇器 （：： after ）
e: 通用選擇器有一個
選擇有中有一個
abcde
在其位置
+1
移動端布局步驟
視口：視覺視口，布局視口，理想視口
em:
當前字體的倍率
100px=10em
rem
：
html
字體的倍率
移動端窗口 375 * 667
html{
font-size ： 0.5 rem ；
}
. box {
width ： 750 rem ； //375px=750rem*0.5px ； 100px=1rem
height ： 1334 rem ；
}
未完待續，感謝關注 好程序員 前端教程分享！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
