CSS (Cascading Style Sheets，層疊樣式表）
是一種用來為結構化文檔（如 HTML 文檔或 XML 應用）添加樣式（字體、間距和顏色等）的計算機語言，CSS 文件擴展名為 .css
選擇器通常是您需要改變樣式的 HTML 元素
每條聲明由一個屬性和一個值組成
CSS聲明總是以分號 ; 結束，聲明總以大括號 {} 括起來:
p {color:red;text-align:center;}
CSS注釋以 /* 開始, 以 */ 結束
/*這是個注釋*/
1. 選擇器
1. id 選擇器
以 "#" 來定義,配合JavaScript使用。同一個id在一個頁面只能用一次。
以下應用于元素屬性 id="para":
#para
{
text-align:center;
color:red;
}
2. 類選擇器：標簽添加class="類名" 定義.class，方便查找標簽且差異化顯示。
一個標簽可以使用多個類名，用空格隔開
.red {color:red;}
.center {text-align:center;}
<div class="red center"></div>
3. 標簽選擇器：p,h1,div,a,img
所有的 p 元素使用 class="center" 讓該元素的文本居中:
p.center {text-align:center;}
4. 通配符選擇器
* 不需要調用，自動設置所有標簽
* {color:red;}
5. 復合選擇器
| 選擇器 | 方法 | 備注 |
|---|---|---|
| 后代選擇器 | div span | 選擇所有后代元素 |
| 子代選擇器 | div > span | 只選擇下一級元素 |
| 并集選擇器 | p,span,div | 逗號隔開 |
| 交集選擇器 | p.class |
6. 偽類選擇器
| 屬性值 | 說明 |
|---|---|
| a：link | 訪問前 |
| a：visited | 訪問后 |
| a：hover | 鼠標懸停狀態 |
| a：active | 點擊時 |
必須按lvha順序寫,一般常用hover鼠標懸停時狀態
2.CSS創建
1. 外部樣式表(External style sheet)
在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標簽鏈接到樣式表。 <link> 標簽在（文檔的）頭部,rel：關系樣式表：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
2. 內部樣式表(Internal style sheet)
當單個文檔需要特殊的樣式時，就應該使用內部樣式表。在title下面，你可以使用 style 標簽在文檔頭部定義內部樣式表:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
3.內聯樣式(Inline style)
當樣式僅需要在一個元素上應用一次時。要使用內聯樣式，你需要在相關的標簽內使用樣式（style）屬性。結合JavaScript使用
<p style="color:sienna;margin-left:20px">這是一個段落。</p>
4. 多重樣式優先級
（內聯樣式）Inline style > （內部樣式）Internal style sheet >（外部樣式）External style sheet > 瀏覽器默認樣式
3.CSS背景
| 描述 | 屬性 | 備注 |
|---|---|---|
| 背景色 | background-color | bgc |
| 背景圖 | background-image：url | bgi |
| 背景圖平鋪方式 | background-repeat | no-repeat不平鋪，repeat默認平鋪，repeat-x水平平鋪，repeat-y垂直平鋪 |
| 背景圖位置 | background-position：水平 垂直 | left，right，center，top，bottom，+-50px |
| 背景圖大小 | background-size：cover/contain/100%寬度/50px | |
| 背景圖固定 | background-attachment：fixed | |
| 背景圖復合屬性 | background：color url no-repeat right center/cover fixed |
瀏覽器圖片默認平鋪（復制）
（0,0）為左上角（left，top）
只寫一個關鍵字，另一個方向默認居中
只寫一個值表示水平方向，垂直默認居中
4.文本格式
| 描述 | 屬性 | 備注 |
|---|---|---|
| 大小 | font-size：32px/2em/200%; | 谷歌默認16px |
| 粗細 | font-weight：700/bold; | 400-normal,700-bold |
| 傾斜 | font-style：normal/italic/oblique; | 清除文字傾斜效果 |
| 行間距 | line-height：2; | 數字為倍數，20px |
| 字體族 | font-family：宋體，楷體； | 從左向右查找，最后設置一個字體族名 |
| 字體復合屬性 | font：normal 400 30px/2 宋體 | 簡化代碼，字號和字體必寫 |
| 文本縮進 | text-indent:50px/2em; | 1em縮進一個字 |
| 文本對齊 | text-align：left/center/right | 內容水平對齊方式 |
| 修飾線 | text-decoration：none/underline/line-through/overline | 下劃線，刪除線，上劃線 |
| 顏色 | color：＃FF0000/RGB(255,0,0)/rgba(r,g,b,a)/red | 紅綠藍透明度 |
| 文本轉換 | text-transform:uppercase/lowercase/capitalize; | 大寫/小寫/首字母大寫 |
- 行間距=文本高度+上下間距，設置單行文字垂直居中：行高=高度
- 文本對齊方式 h1 {text-align:center/right/justify;}
當text-align設置為"justify"，每一行被展開為寬度相等，左，右外邊距是對齊 - 文本修飾 a {text-decoration:none;} 用于刪除鏈接的下劃線
5. 結構偽類選擇器
| 選擇器 | 說明 | 備注 |
|---|---|---|
| li:first-child | 第一個li元素 | |
| li:last-child | 最后一個li元素 | |
| li:nth-child（n） | 第n個li元素 | 2n+1倍數選擇，n+5表示5以后，-n+5為5以前 |
6. 偽元素選擇器
虛擬元素用于擺放裝飾性內容
必須設置content""內容，沒有留空，默認行內顯示，權重等于標簽選擇器。
| 選擇器 | 說明 |
|---|---|
| E::before | 在E元素最前面添加一個偽元素 |
| E::after | 在E元素最后面添加一個偽元素 |
7. 盒子模型
內容區域-width、height
內邊距padding 內容與盒子邊緣
邊框線border 外邊距margin在盒子外面
7.1 border邊框線（bd）
邊框線粗細 線條樣式，顏色，不區分順序
- 簡寫屬性 border:width style color
| border屬性值 | 說明 | 備注 |
|---|---|---|
| width | ||
| color | ||
| style | none默認無邊框，dotted點線邊框，dashed虛線邊框，solid實線邊框，double兩個邊框，groove 3D溝槽邊框，ridge 3D脊邊框，inset 3D嵌入邊框，outset 3D突出邊框，hidden隱藏 | |
| border-top/right/bottom/left | :width style color | 單獨設置各邊 |
| border-radius：50px/50% | 設置外邊框為圓角 | 四值從左上角開始賦值 |
正圓設置：正方形盒子設置圓角為寬高的一半
膠囊形狀：長方形盒子設置圓角為高的一半
7.2 內邊距padding
設置內容與盒子邊緣之間距離，屬性名：padding、padding-top
div {
padding:30px;
padding-top/right/bottom/left:50px;
padding:10px 20px 30px 40px;/*四值 上右下左*/
padding:10px 20px 40px;/*三值 上 左右 下*/
padding:10px 20px;/*兩值 上下 左右 順時針沒有取對面*/
}
7.3 尺寸計算
盒子尺寸=內容尺寸+border尺寸+padding尺寸
內減模式,padding和border不會增大盒子：box-sizing:border-box
7.4 margin外邊距
拉開兩個盒子的距離，與padding屬性值相同，不會撐大盒子。
margin 沒有背景顏色，是完全透明的。
margin：0 auto；自動居中
* {
margin: 0;
padding: 0;
box-sizing:border-box;
} /*移除默認內外邊距設置*/
li {
list-style:none;
} /*去掉列表符號*/
- 外邊距合并現象：垂直排列的兄弟元素，上下margin合并（取大的）
- 塌陷問題：父子級的標簽，子級的添加上外邊距塌陷，導致父級一起向下移動
三種解決辦法：取消子級margin設置父級padding、box-sizing，border-top,overflow:hidden,
7.5 溢出內容
overflow：hidden隱藏、scroll滾動條、auto溢出顯示滾動條
7.6 行內元素內外邊距問題
行內元素添加margin和padding，無法改變元素垂直位置，可以添加line-height改變
7.7 陰影效果
默認外陰影，內陰影inset
box-shadow：x 軸偏移量 Y 軸偏量 模糊半徑 擴散半徑 顏色 內外陰影
box-shadow：2px 5px 10px 1px rgba(0,0,0,5) inset;
8. flex
8.1 浮動
| 1 | 說明 | 特效 |
|---|---|---|
| 標準流 | 標簽在頁面默認排布規則，塊元素獨占一行，行內元素一行顯示多個 | |
| 浮動,讓塊元素水平排列 | float：left/right | 頂對齊且具備行內塊模式特點，浮動的盒子會脫離標準,父級寬度不夠會換行 |
| 清除浮動 | 1.在父元素內容最后添加一個塊級元素設置屬性clear:both | 父級沒有高度子級無法撐開父級高度 |
浮動本質效果是實現圖文混排效果
.clearfix::after { /*清除浮動方法2：單偽元素法*/
content:"";
display:block;
clear:both;
}
.clearfix::before,
.clearfix::after {
content:"";
display:table;
}
.clear::after {
clear:both;
} /*方法3：雙偽元素法*/
方法四：父元素添加 overflow：hidden
8.2 flex布局
不會產生浮動布局中脫標現象，布局網頁更簡單，更靈活。
設置方式：給父元素設置flex，子元素可以自動擠壓或拉伸
組成部分：彈性容器，彈性盒子，主軸默認在水平方向，側軸在垂直方向
| 描述 | 屬性 | 備注 |
|---|---|---|
| 創建flex容器 | display：flex； | |
| 主軸對齊 | justify-content：space-between； | |
| 側軸對齊 | align-items | 控制容器內所有盒子 |
| 側軸對齊 | align-self：stretch拉伸至鋪滿容器、center，first-start，first-end | 單獨控制某個盒子 |
| 修改主軸方向 | flex-direction：row/column/row-reverse/cloumn-reverse | 水平、垂直、反方向 |
| 彈性伸縮比 | flex：2 | 控制主軸，占用父級剩余尺寸的份數 |
| 彈性盒子換行 | flex-wrap：wrap換行、默認nowrap | |
| 行對齊 | align-content | 屬性值同主軸對齊,單行盒子不生效 |
主軸默認靠內容撐開，側軸默認拉伸，默認所有盒子在一行
| justify-content屬性值 | 效果 |
|---|---|
| flex-start | 默認值，左對齊 |
| flex-end | 右對齊 |
| center | 居中 |
| space-between | 間距均分在盒子之間 |
| space-around | 間距均分在盒子兩側 |
| space-evenly | 盒子與容器間距相等 |
9. CSS高級技巧
9.1 定位
| position屬性值 | 說明 | 使用方法 |
|---|---|---|
| relative | 相對定位 | 不脫標,加上方向屬性top等 |
| absolute | 絕對定位 | 脫標,行內塊,子集絕對定位,父級相對定位 |
| fixed | 固定定位 | 脫標,行內塊,加方位屬性 |
div {
position:relative/absolute /*相對定位-絕對定位*/
top:100px /*參照原來位置移動,不脫標,顯示模式特點不變*/
/*實現定位居中: 水平垂直邊偏移50%,子集向左上移動自身尺寸一半*/
position:absolute;
left:50%;
top:50%;
margin-left:-275px;
margin-top:-127px;
transform:translate(-50%,-50%); /*或者transform實現*/
}
堆疊層級z-index:1;
絕對定位后,默認按書寫順序后者居上,取整數,默認為0,越大越靠上.
-
CSS精靈
也叫CSS Sprites,把背景圖片整合到一張圖片中,再通過background-position精確定位，用于復雜多色圖片
創建盒子尺寸與小圖尺寸相同,設置背景圖為精靈圖,添加background-position屬性改變位置,屬性值取負的左上角坐標 -
字體圖標
展示的是圖標，本質是字體，常用于單色圖片，靈活修改尺寸、顏色，體積小渲染快，降低服務器請求次數，兼容性高，先下載再使用
字體圖標庫
加入購物車--添加至項目--下載至本地--引入iconfont.css文件，打開html文件使用fontclass圖案下的類名
標簽使用字體圖標類名 iconfont基本樣式，icon-xxx圖標對應的類名
上傳.svg矢量圖生成字體
| 特效 | 方法 | 備注 |
|---|---|---|
| 垂直對齊 | vertical-align：baseline/top/middle/bottom | 圖片img的底下有空白，轉塊可消除 |
| 過渡效果 | transition：all 1s； | 可以寫具體的屬性也可以為all，設置給元素本身 |
| 透明度 | 設置整個元素的透明度，包含背景和內容 | opacity：0完全透明-1不透明； |
| 光標類型 | cursor：default/pointer手型/text/move | |
| 輪播圖 | 定位+字體圖標+felx布局 |
9.表格Table
table, th, td {border: 1px solid black;}
有雙邊框是因為表和th/ td元素有獨立的邊界，border-collapse屬性顯示一個表的單個邊框
table {border-collapse:collapse;}
table,th, td {border: 1px solid black;}
垂直對齊 vertical-align:bottom/top/middle
實例
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
background-color: red;
}
300px (寬)+ 50px (左 + 右填充)+ 50px (左 + 右邊框)+ 50px (左 + 右邊距)= 450px
10.outline輪廓屬性
是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。
- outline：color style width 值同border-style
p
參數：auto設置邊距，length，%百分比
p.margin{ margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px;}
11. 分組 和 嵌套 選擇器
1.使用分組選擇器，每個選擇器用逗號分隔。
h1,h2,p {color:green;}
2.嵌套選擇器
- p{ }: 為所有 p 元素指定一個樣式。
- .marked{ }: 為所有 class="marked" 的元素指定一個樣式。
- .marked p{ }: 為所有 class="marked" 元素內的 p 元素指定一個樣式。
- p.marked{ }: 為所有 class="marked" 的 p 元素指定一個樣式。
12.Display(顯示) 與 Visibility（可見性）
1. 隱藏元素 - display:none不占空間 或visibility:hidden 占空間
h1.hidden {visibility:hidden;}
h1.hidden {display:none;}
2.Display - 塊和內聯元素
塊元素是一個元素，占用了全部寬度，在前后都是換行符。
塊元素 <h1> <p> <div>
<span> <a> 內聯元素只需要必要的寬度，不強制換行。
li {display:inline;} 列表項顯示為內聯元素
span {display:block;} 把span元素作為塊元素
13. position定位
div.static {position: static;} /*static默認值，即沒有定位，遵循正常的文檔流對象。*/
p.fixed {position:fixed;} /*元素的位置相對于瀏覽器窗口是固定位置。即使窗口滾動也不移動：*/
h2.left {position:relative;left:-20px;} /*相對定位元素的定位是相對其正常位置。左移20px*/
h2.pos_top {position:relative;top:-50px;}
h2 {position:absolute;left:100px;top:150px;} /*absolute 絕對定位默認相對于最近的已定位父元素，沒有則相對html*/
div {position：sticky} /*sticky 粘性定位依賴于用戶的滾動，在relative與fixed定位之間切換*/
img {z-index:-1} /*重疊的元素 顯示在后面*/
clip:rect(0px,60px,200px,0px); /*剪輯一個絕對定位的元素*/
div.ex {overflow:scroll/hidden/auto/默認visible;} overflow： 如果元素中的內容超出了給定的寬度和高度屬性，overflow 屬性可以確定是否顯示滾動條等行為。
14. Float(浮動)
會使元素向左或向右移動，其周圍的元素也會重新排列。
img {float:right;} 右浮動
如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。
.text {clear:both;} 清除浮動
- img {display: block;margin: auto;width: 40%;} 圖片居中
.right {position: absolute;right: 0px;} 1.左右對齊-定位方式
.right {float: right;} 2.左右對齊 - 使用 float 方式
.center {padding: 70px 0;border: 3px solid green;} 3.垂直居中對齊 - 使用 padding
.center {padding: 70px 0;border: 3px solid green;text-align: center;} 4.水平垂直居中
.center {line-height: 200px;height: 200px;} 5.垂直居中 line-height設置行間距
6.垂直居中
15.組合選擇符
div~p {background-color:yellow;} 選取所有指定元素之后的相鄰兄弟元素（以波浪號 ～ 分隔）
16. 結構偽類選擇器
p:first-child {color:blue;} /*使用 :first-child 偽類來選擇父元素的第一個子元素。*/
p > i:first-child { color:blue;} /*匹配所有<p> 元素中的第一個 <i> 元素*/
p:first-child i {color:blue;} /*匹配所有作為第一個子元素的 <p> 元素中的所有 <i> 元素*/
q:lang(no) {quotes: "~" "~";} /*:lang 偽類為不同的語言定義特殊的規則*/
| 選擇器 | 說明 |
|---|---|
| input：checked | 選擇所有選中的表單元素 |
| input：disabled | 所有禁用的表單元素 |
| p：empty | 所有沒有子元素的p元素 |
| input:enabled | 所有啟用的表單元素 |
| p:first-of-type | 選擇的每個 p 元素是其父元素的第一個 p 元素 |
| input:in-range | 元素指定范圍內的值 |
| input:invalid | 選擇所有無效的元素 |
| p:last-of-type | 選擇每個p元素是其母元素的最后一個p元素 |
| :not(p) | 選擇所有p以外的元素 |
| p:nth-last-child(2) | 選擇所有p元素倒數的第二個子元素 |
| p:nth-last-of-type(2) | 選擇所有p元素倒數的第二個為p的子元素 |
| p:nth-of-type(2) | 選擇所有p元素第二個為p的子元素 |
| p:only-of-type | 選擇所有僅有一個子元素為p的元素 |
| p:only-child | 選擇所有僅有一個子元素的p元素 |
| input:optional | 選擇沒有"required"的元素屬性 |
| input:out-of-range | 選擇指定范圍以外的值的元素屬性 |
| input:read-only | 選擇只讀屬性的元素屬性 |
| input:read-write | 選擇沒有只讀屬性的元素屬性 |
| input:required | 選擇有"required"屬性指定的元素屬性 |
| root | 選擇文檔的根元素 |
| #news:target | 選擇當前活動#news元素(點擊URL包含錨的名字) |
| input:valid | 選擇所有有效值的屬性 |
| input:focus | 選擇元素輸入后具有焦點 |
| p:first-letter | 選擇每個<p元素的第一個字母 |
| p:first-line | 選擇每個<p元素的第一行 |
| p:before | 在每個p元素之前插入內容 |
| p:after | 在每個p元素之后插入內容 |
| p:lang(it) | 為p元素的lang屬性選擇一個開始值 |
17. 偽元素
添加一些選擇器的特殊效果。
selector:pseudo-element {property:value;}
selector.class:pseudo-element {property:value;}
1. :first-line 偽元素 只能用于塊級元素。
屬性： font properties,color properties,background properties,word-spacing,letter-spacing,text-decoration,vertical-align,text-transform,line-height,clear.
2. :first-letter 偽元素 向文本的首字母設置特殊樣式
p:first-letter {color:#ff0000;font-size:xx-large;}
屬性：font/color/background/margin/padding/border properties,text-decoration,vertical-align,text-transform,line-height,float,clear.
3. 偽元素和CSS類 偽元素可以結合CSS類
p.article:first-letter {color:#ff0000;} /*選擇每個<p> 元素的第一個字母*/
p:first-line {color:#ff0000;font-variant:small-caps;} /*選擇每個<p> 元素的第一行*/
p:first-child /*選擇器匹配屬于任意元素的第一個子元素的 <p> 元素*/
/*link,visited,active,hover,focus*/
p:lang(it) {background:yellow;} /*向帶有指定 lang 屬性開始的元素添加樣式。*/
18. 導航欄
ul {list-style-type:none;margin:0;padding:0;} /*從列表中刪除邊距和填充*/
a {display:block;width:60px;} /*垂直導航欄*/
/*1. 創建鏈接并添加邊框
在 border <ul> 上添加 border 屬性來讓導航欄有邊框。
如果要在每個選項上添加邊框，可以在每個 <li> 元素上添加border-bottom :*/
li {text-align:center;border-bottom:1px solid #555;}
li:last-child {border-bottom:none;}
/*2. 全屏高度的固定導航條*/
ul {list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* 全屏高度 */
position: fixed;
overflow: auto; /* 如果導航欄選項多，允許滾動 */}
/*3.添加分割線*/
li {border-right: 1px solid #bbb;}
li:last-child {border-right: none;}
/*4. 導航條固定在頭部或者底部：*/
ul {position: fixed;top: 0;width: 100%;}
ul {position: fixed;bottom: 0;width: 100%;}
/*5. 灰色水平導航條*/
ul {border: 1px solid #e7e7e7;background-color: #f3f3f3;}
li a {color: #666;}
/*6. */
19. 下拉菜單
<style>
.dropdown {position: relative;display: inline-block;}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;}
.dropdown:hover .dropdown-content {display: block;}
</style>
<div class="dropdown">
<span>鼠標移動到我這！</span>
<div class="dropdown-content">
<p>菜鳥教程</p>
<p>www.runoob.com</p>
</div>
</div>
<style>
/* 下拉按鈕樣式 */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* 容器 <div> - 需要定位下拉內容 */
.dropdown {
position: relative;
display: inline-block;
}
/* 下拉內容 (默認隱藏) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* 下拉菜單的鏈接 */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* 鼠標移上去后修改下拉菜單鏈接顏色 */
.dropdown-content a:hover {background-color: #f1f1f1}
/* 在鼠標移上去后顯示下拉菜單 */
.dropdown:hover .dropdown-content {
display: block;
}
/* 當下拉內容顯示后修改下拉按鈕的背景顏色 */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn">下拉菜單</button>
<div class="dropdown-content">
<a href="#">菜鳥教程 1</a>
<a href="#">菜鳥教程 2</a>
<a href="#">菜鳥教程 3</a>
</div>
</div>
/*下拉內容對齊方式*/
float:left、right;
從右到左：
.dropdown-content {right: 0;}
20.Tips
谷歌瀏覽器調試工具
F12-選擇工具
錯誤的屬性有黃色嘆號
css屬性前有多選框用于調試代碼
網頁制作思路：
- 從上到下，先整體再布局
- 先標簽再css美化
CSS書寫順序
1.盒子模型屬性
2.文字樣式
3.圓角，陰影等修飾屬性
css特性
- 繼承性：子級默認繼承父級的文字屬性
- 層疊性：當設置了多個屬性時，相同屬性覆蓋（后面覆蓋前面），不同屬性疊加
- 優先權：當一個標簽用了多個選擇器，范圍越大優先級越低
通配符選擇器<標簽<類class<id<行內樣式<!important(加在分號前面)
復合選擇器進行權重疊加計算（繼承權重最低，important最高）
| 說明 | 快捷鍵 | Emmet |
|---|---|---|
| 類選擇器 | p.class | div特殊直接 .class |
| id選擇器 | p#box | |
| 同級標簽 | div+p | |
| 父子級標簽 | div>p | |
| 多個相同標簽 | span*3 | |
| 有內容的標簽 | div | |
| 屬性簡寫 | w500 | width：500px |
| 多個屬性 | w500+h200+bgc |
| display | 效果 | 說明 |
|---|---|---|
| block | 塊級 | 獨占一行，寬高屬性生效，默認寬度為父級 |
| inline | 行內 | 一行共存多個，寬高屬性不生效，由內容撐開 |
| inline-block | 行內塊 | 一行共存多個，寬高屬性生效，默認由內容撐開 |
21. 學成在線網頁制作
1. 文件夾+頭部布局
| 網站根目錄是存放網站的第一層文件夾 | 用處 |
|---|---|
| images文件夾 | 存放圖片、logo、樣式修飾圖 |
| upload文件夾 | 存放非固定使用的圖片素材，如商品圖宣傳圖需要上傳的圖片 |
| CSS文件夾 | 存放css文件（link標簽引入）base.css基礎公共樣式 index.css首頁css樣式 |
| index.html | 首頁HTML文件 |
- 布局思路：先整體再布局，從外到內，從上到下，從左到右
- CSS實現思路：畫盒子，調整盒子范圍寬高背景色
調整盒子位置：flex布局，內外邊距
控制圖片，文字內容樣式 - header區域-布局
通欄：寬度與瀏覽器窗口相同的盒子
標簽結構：通欄>版心>logo>導航>搜索>用戶
| 功能 | 功能 | 標簽結構 |
|---|---|---|
| logo | 單機跳轉到首頁，引擎搜索優化 | h1>a>網站名稱（搜索關鍵字） |
| 導航欄 | 點擊跳轉頁面 | ul>li*3>a,避免堆砌a標簽，li設置右margin，a設置左右padding |
| 搜索區域 | .search>input+a/button | |
| 用戶user | .user>a>img+span |
2. banner布局
通欄banner>版心>.left+.right
左側導航欄：.left>ul>li*9>a,a默認狀態背景圖為白色右箭頭
右側課程表：.right>h3+.content
精品推薦區域：.recommand>h3+ul+a.modify
精品課程區域：.hd+.bd
22. 小兔鮮項目
| 制作類目 | 結構 | 備注 |
|---|---|---|
| 項目目錄 | images、uploads、iconfont、css(common.css)、index.html | |
| SEO搜索引擎優化三大標簽 | title網頁頭部標簽、description網頁描述、keywords網頁關鍵字 | meta：desc、kw |
| favicon.ico 網頁圖標 | 出現在瀏覽器標題欄，放在網站根目錄 | |
| 快捷導航shortcut | 通欄>版心>導航ul，布局flex-end | |
| 頭部header | .header>logo+導航nav+搜索search+購物車cart | |
| 新鮮好物goods | 標題title+內容bd | 多區域樣式共用 |
| 熱門品牌brand | 左側left+右側箭頭（顯示在標題外部，定位） | |
| 生鮮fresh | 右側right>菜單ul+查看全部 | |
| 最新專題topic |
23. web移動
| 平面轉換transform | 為元素添加動態效果，與過渡配合使用 位移、旋轉、縮放、傾斜 | 說明 |
|---|---|---|
| 平移 | transform：translate（±20px，±20%）； | 百分比按盒子大小，只寫一個值表示x，或者單獨設置translateX、translateY |
| 旋轉 | transform：ratate（±180deg）； | +順時針 |
| 改變轉換原點 | 默認為中心點transform-origin：水平 垂直； | 值可以為方位、像素、百分比 |
| 多重轉換 | 先平移再旋轉 transform：translate（600px） ratate（360deg）； | |
| 縮放 | transform:scale(2,2) | 一個值表示xy等比例 |
| 傾斜 | transform：skew（±30deg）； | 傾斜角度 |
| 線性漸變 | background-image：linear-gradient（to right/45deg，red 60%，green） | 漸變方向和終點位置可選 |
| 徑向漸變 | background-image：radial-gradient（50px 20px at center center，red 60%，green） | 兩條半徑為橢圓 |
平移實現居中效果 transform：translate（-50%，-50%）
background-image：liner-gradient（transparent，rgba（0,0,0,0.5））；透明漸變
transparent=rgba（0,0,0,0）全透明黑色
浙公網安備 33010602011771號