目錄

• CSS基本語法（二）
  • 八、CSS復合選擇器
    • 1、后代選擇器**
    • 2、子選擇器
    • 3、並集選擇器**
    • 4、偽類選擇器
      • 鏈接偽類選擇器
      • :focus偽類選擇器
      • 總結
  • 九、CSS的元素顯示樣式
    • 1、概念
    • 2、塊元素
    • 3、行內元素
    • 4、行內塊元素
    • 5、元素顯示模式的轉換
    • 6、垂直居中
  • 十、CSS背景
    • 1、背景顏色
    • 2、背景圖片
    • 3、背景平鋪
    • 4、背景圖片位置
    • 5、背景圖像固定
    • 6、復合型寫法
    • 7、背景色半透明
    • 8、總結
  • 十一、CSS三大特性
    • 1、層疊性
    • 2、繼承性
      • 行高的繼承
    • 3、優先級
      • 權重疊加
  • 十二、頁面布局
    • 1、盒子模型
      • 組成
        • border邊框
        • content內容
        • padding內邊距
        • margin外邊距
      • 清除內外邊距
    • 2、PS基本操作
    • 3、圓角邊框**
    • 4、陰影
      • 盒子陰影
      • 文字陰影
  • 十三、浮動
    • 1、為什么需要
    • 2、什么是浮動
    • 3、浮動特性
    • 4、應用
    • 5、注意
    • 6、清除浮動
      • 清除浮動方法
  • 十四、PS切圖
    • 1、常見的圖片格式
    • 2、PS切圖
      • 圖層切圖
      • 切片切圖
      • PS插件切圖
    • 3、頁面布局整體思路
      • 頭部制作

CSS基本語法（二）

八、CSS復合選擇器

在CSS中，可以根據選擇器的類型把選擇器分為基礎選擇器和復合選擇器，復合選擇器是建立在基礎選擇器之上，對基礎選擇器進行組合形成的

• 復合選擇器可以更准確、更高效的選擇目標元素（標簽）
• 符合選擇器是由多個基礎選擇器，通過不同的組合方式組合而成的
• 常用的復合選擇器包括：后代選擇器、子選擇器、並集選擇器、偽類選擇器等等

1、后代選擇器**

后代選擇器又稱為包含選擇器，可以選擇父元素里面子元素。其寫法就是把外層標簽寫在前面，內存標簽寫在后面，中間用空格分離。但標簽發生嵌套時，內層標簽就成為外層標簽的后代。

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

ol li {color: red;}  /* 選擇li標簽 */

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

元素一是父級，元素二是子集，最終選擇的是元素二

元素二可以是子級，也可以是孫子級等，只要是元素一的后代即可

ol li p {color: pink}  /* 選擇p標簽 */

元素一和元素二可以是任意的標簽選擇器

2、子選擇器

子元素選擇器（子選擇器）只能作為某元素的最近一級子元素。簡單理解就是選親兒子元素

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

表示選擇元素一里面的所有直接后代（子元素）元素二

div > p {text-decoration: none;}  /* 選擇p標簽 */

元素一和元素二中間用大於號隔開

元素一是父級，元素二是子級，最終選擇的是元素二

元素二必須是親兒子，其孫子、重孫之類都不歸它管

3、並集選擇器**

並集選擇器可以選擇多組標簽，同時為他們定義相同的樣式。通常被用於集體聲明

並集選擇器是各選擇器通過逗號（,）連接而成，任何形式的選擇器都可以作為並集選擇器的一部分

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

表示選擇元素一和元素二

ul, div {font-size: 20px;} /* 選擇ul和div標簽 */ 

元素一和元素二中間用逗號隔開

逗號可以理解為和的意思

並集選擇器同常用於集體聲明

4、偽類選擇器

偽類選擇器用於向某些選擇器添加特殊的效果，比如給鏈接添加特殊效果，或選擇第一個，第N個元素

偽類選擇器書寫最大的特點是用冒號（:）表示，比如：:hover, :first

鏈接偽類選擇器

a:link  /* 選擇所有未被訪問的鏈接*/
a:visited  /* 選擇所有已被訪問的鏈接 */
a:hover  /* 選擇鼠標指針位於其上的鏈接 */
a:active  /* 選擇活動的鏈接（鼠標按下未彈起的鏈接） */

為了確保生效，要按照上面順序書寫

因為a鏈接在瀏覽器具有默認樣式，所以我們實際工作中都需要給鏈接單獨指定樣式

/* a是標簽選擇器 */
a {
    color: gray;
}
/* :hover是鏈接偽類選擇器，鼠標經過是變色 */
a: hover {
    color: red;
}

:focus偽類選擇器

:focus偽類選擇器用於選取獲得焦點的表單元素

焦點就是光標，一般情況<input>類表單元素才能獲取，因此這個選擇器也主要針對與表單元素來說

input:focus {
    background-color: yellow;
}

總結

選擇器	作用	特征	使用情況	隔開符號及用法
后代選擇器	用來選擇后代元素	可以是子孫后代	較多	符號是空格 .nav a
子代選擇器	選擇最近一級元素	只選子代	較少	符號是大於號 .nav>p
並集選擇器	選擇某些相同樣式的元素	可以用於集體聲明	較多	符號是逗號 .nav, .header
鏈接偽類選擇器	選擇不同狀態的鏈接	跟鏈接相關	較多	重點記住a {}和a:hover {}實際開發的寫法
:focus選擇器	選擇獲得光標的表單	跟表單有關	較少	input:focus 記住這個用法

九、CSS的元素顯示樣式

1、概念

作用：網頁得標簽非常多，在不同地方會用到不同類型的標簽，了解他們的特點可以更好的布局我們的頁面

元素的顯示模式就是元素（標簽）以什么方式進行顯示，比如<div>自己占一行，一行可以有多個<span>

HTML元素一般分為塊元素和行內元素兩種類型

2、塊元素

常見的塊元素有<h1>-<h6>/<p>/<div>/<ul>/<ol>/<li>等，其中<div>標簽是最典型的塊元素

塊級元素的特點

1. 比較霸道，自己獨占一行
2. 高度、寬度、外邊距以及內邊距都可以控制
3. 寬度默認是容器（父級寬度）的100%
4. 是一個容器及盒子，里面可以放行內或者塊元素

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

<p>標簽主要用於存放文字，因此<p>標簽里面不能放塊級元素，特別是不能放<div>

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

3、行內元素

常見的行內元素有<a>/<strong>/<b>/<em>/<i>/<del>等，其中<span>標簽是最典型的行內元素，有的地方也將行內元素稱為內聯元素

行內元素的特點

1. 相鄰行內元素在一行上，一行可以顯示多個
2. 高、寬直接設置是無效的
3. 默認寬度就是它本身的寬度
4. 行內元素只能容納文本或其他行內元素

鏈接里面不能再放鏈接

特殊情況鏈接<a>里面可以放塊級元素，但是給<a>轉換一下塊極模式最安全

4、行內塊元素

在行內元素中有幾個特殊標簽——<img>/<input>/<td>，它們可以具有塊元素和行內元素的特點

行內塊元素的特點

1. 和相鄰行內元素（行內塊）在一行上，但是他們之間會有空白縫隙。一行可以顯示多個（行內元素特點）
2. 默認寬度就是它本身內容的寬度
3. 高度、行高、外邊距以及內邊距都可以控制（塊級元素特點）

5、元素顯示模式的轉換

特殊情況下，我們需要元素模式的轉換，簡單理解：一個模式的元素需要另外一種模式的特性比如想要增加鏈接<a>的觸發范圍

• 轉換為塊元素

  display: block;

  a {
      width: 30px;
      height: 30px;
      /* 把行內元素a轉換為塊級元素 */
      display: block;
  }
  

• 轉換為行內元素

  display: inline;

  div {
      /* 把div塊級元素轉換為行內元素 */
      display: inline;
      width: 30px;
  }
  

• 轉換為行內塊

  display: inline-block;

  span {
      /* 把span轉換為行內塊 */
      display: inline-block;
  }
  

6、垂直居中

盒子的高度等於行高

十、CSS背景

背景屬性可以設置背景顏色、背景圖片、背景平鋪、背景圖片的位置、背景圖像固定等

1、背景顏色

background-color屬性定義了元素的背景顏色

div {
background-color: 顏色值;
}

一般情況下元素的背景顏色默認值是transparent（透明），我們也可以手動指定背景顏色為透明色

2、背景圖片

background-image屬性定義了元素的背景圖片

div {
    /* 不要拉下url() */
    background-image: url(圖片url);
}

3、背景平鋪

如果需要在HTML頁面對背景圖片進行平鋪，可以使用background-repeat屬性

background-repeat: repeat|no-repeat|repeat-x|repeat-y;

repeat：平鋪（默認），repeat-x：沿着X軸平鋪，no-reapeat：不平鋪

4、背景圖片位置

利用background-position屬性可以改變圖片在背景中的位置

background-position: x y;
/* 如果是方位名詞，right center和center right 效果是等價的 */

參數代表的位置：x坐標和y坐標。可以使用方位名詞或者精確位置

精確值	說明
length	百分數|由浮點數字和單位標識符組成的長度值
position	top|center|left|right 方位名詞

參數是方位名詞

• 如果指定兩個字都是范圍名詞，則兩個值的位置是無關的
• 如果只指定了一個方位名詞，另一個是省略，則第二個值默認居中對齊

參數是精確單位

• 如果參數值是精確坐標，那么第一個肯定是x坐標，第二個一定是y坐標
• 如果只指定一個數值，那該數值一定是x坐標，另一個默認垂直居中參數

參數是混合單位

• 如果指定的兩個值是精確單位和方位名詞混合使用，則第一個值是x坐標，第二個值是y坐標

5、背景圖像固定

background-attachment屬性設置背景圖像是否固定或者隨着頁面的其余部分移動

用來做視覺滾動效果

background-attachment: scroll | fixed

參數	作用
scroll	背景圖像隨對象內容滾動
fixed	背景圖像固定

6、復合型寫法

為了簡化背景屬性的代碼，我們可以將這些屬性合並簡寫在同一個屬性background中

background: 背景顏色 背景圖片地址 背景平鋪 背景圖像滾動 背景圖像位置;

7、背景色半透明

background: rgba(255, 255, 255, 0.3);
opacity: 0.5;  /* 也可以設置背景透明度 */

最后一個參數是alpha透明度，范圍是在0~1之間

我們習慣把0.3的0省略掉，寫為background: rgba(0, 0, 0, .3);

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

8、總結

屬性	作用	值
background-color	背景顏色	預定義的顏色值/十六進制/RGB代碼
background-image	背景圖片	url(圖片路徑)
background-repeat	是否平鋪	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分別是x和y坐標
background-attachment	背景附着	scroll（背景滾動）/fixed（背景固定）
背景簡寫	書寫更簡單	背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置;
背景色半透明	背景色半透明	background: ragb(0, 0, 0, .3);后面必須是4個值

十一、CSS三大特性

CSS有三個非常重要的三個特性：層疊性、繼承性、優先級

1、層疊性

相同選擇器個設置相同的樣式，此時一個樣式就會覆蓋（層疊）另一個沖突的樣式。層疊性主要解決樣式沖突的問題

層疊性原則

• 樣式沖突：遵循的原則是就近原則，哪個樣式離結構近就執行哪個樣式

  div {color: red}
  div {color: pink}  # 就近原則
  

• 樣式不沖突：不會層疊

2、繼承性

現實中的繼承，我們繼承了父親的姓

CSS中的繼承：子標簽會繼承父標簽的某些樣式，如文本顏色和字號。簡單理解是：子承父業

• 恰當地使用繼承可以簡化代碼，降低CSS樣式的復雜性
• 子元素可以繼承父元素的某些樣式（text-, font-, line-這些元素開頭的可以繼承，以及color屬性）

行高的繼承

div {
    font: 12px/1.5 "Microsoft YaHei";    /* 那個1.5代表字體大小的1.5倍 */
}

• 行高可以跟單位也可以不跟單位
• 如果子元素沒有設置行高，則會繼承父元素的行高
• 此時子元素的行高是：當前子元素的文字大小的1.5倍
• 這樣的寫法的最大優勢就是里面子元素可以根據自己文字大小自動調整行高

3、優先級

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

• 選擇器相同，則執行層屬性

• 選擇器不同，則根據選擇器的權重執行

  • 繼承 / * < 元素選擇器 < 類選擇器 / 偽類選擇器 < ID選擇器 < 行內樣式 < !important 重要的
  • |0, 0, 0, 0 | 0, 0, 0, 1 | 0, 0, 1, 0 | 0, 1, 0, 0 | 1, 0, 0, 0 | = 無窮大 | --> 選擇器權重
  • 優先級注意點：
    • 權重是由4位數字組成，但是不會有進位
    • 可以理解為類選擇器永遠大於元素選擇器，id選擇器永遠大於類選擇器，以此類推
    • 等級判斷從左到右，如果是某一位數值相同，則判斷下一位
    • 繼承的權重是0，如果該元素沒有直接被選中，不管父元素權重有多高，子元素得到的權重都是0
    • 所以我們看這個標簽到底執行哪個樣式，就先看這個標簽有沒有直接被選出來

• 指代的范圍越小，權重越大

div {
    color: red!important;  /* !important，其權重最高 */  
}

權重疊加

如果過復合選擇器，則會有權重的疊加，需要計算權重

權重雖熱會疊加，但是不會有進位的問題

div ul li |----->| 0, 0, 0, 3 |
.nav ul li |---->| 0, 0, 1, 2 |
a:hover |------->| 0, 0, 1, 1 |
.nav a |-------->| 0, 0, 1, 1 |

注意：a標簽瀏覽器默認制定了一個樣式 藍色的 有下划線 a {color: blue;}

十二、頁面布局

頁面布局的步驟

1. 先准備好相關的網頁元素，網頁元素基本都是盒子
2. 利用CSS設置好的盒子樣式，然后擺放到相應的位置
3. 往盒子里面裝內容

網頁布局的核心本質：就是利用CSS擺盒子

1、盒子模型

頁面布局：盒子模型、浮動 和 定位，學好盒子模型能非常好的幫助我們布局頁面

所謂盒子模型：就是把HTML頁面中的布局元素看作是一個矩形的盒子，也就是一個盛裝內容的容器

CSS盒子模型的本質上是一個盒子，封裝周圍的HTML元素，它包括：邊框、外邊距、內邊距和實際內容

組成

border邊框

• border可以設置元素的寬度。邊框有三部分組成：邊框寬度（粗細）、邊框樣式、邊框顏色

  屬性	作用
  border-width	邊框的粗細，一般情況下都用px
  border-style	邊框的樣式,/ solid實線邊框 / dashed虛線邊框 / dotted點線邊框
  border-color	邊框顏色
  復合寫法	border:1px solid red; 注意沒有先后順序

  邊框分開寫法

  border-top: 1px solid red;  /* 只設定上邊框，其余同理*/
  /* 還有buttom left right */
  

表格的細線邊框

• border-collapse屬性控制瀏覽器繪制表格邊框的方式。它控制相鄰單元格的邊框

  border-collapse: collapse;  /* 合並的意思 */
  

注意

• 邊框會增加盒子的實際大小

  1. 測量盒子大小的時候不要量邊框

  2. 如果測量的時候包括了邊框，則需要width/height 減去邊框的寬度

content內容

content內容就是盒子的內容部分

padding內邊距

padding屬性用於設置內邊距，即邊框與內容之間的距離

屬性	作用
padding-left	左邊距
padding-right	右邊距
padding-top	上邊距
padding-bottom	下邊距

復合寫法

值的個數	表達意思
padding: 5px;	1個值，代表上下左右都有 5px 內邊距
padding: 5px 10px;	2個值，代表上下邊距是 5px ，左右邊距是 10px
padding: 5px 10px 20px;	3個值，代表上內邊距 5px， 左右內邊距 10px， 下內邊距 20px
padding: 5px 10px 20px 30px;	4個值，代表 上 右 下 左 各為 5px 10px 20px 30px，順時針設置

注意

• padding會影響盒子實際大小
• 內容和邊框有了距離，添加了內邊距
  1. 如果要保持盒子的大小和原來的一致，則讓 width/height 減去多出來的內邊距大小即可
• 如果沒有給盒子指定寬度padding不會影響，則不會撐開盒子的大小

margin外邊距

margin屬性用於設置外邊距，即控制盒子和盒子之間的距離

屬性	作用
margin-left	左外邊距
margin-right	右外邊距
margin-top	上外邊距
margin-buttom	下外邊距

margin簡寫方式代表的意義和padding的簡寫方式大概相同

外邊距的典型應用

• 外邊距可以讓塊級盒子水平居中

  1. 盒子必須指定了寬度
  2. 盒子的左右外邊距都設置為auto

  以上方法是讓塊級元素水平居中，行內塊元素或者行內元素水平居中給父元素添加 text-align： center即可

• 問題

  • 相鄰塊元素垂直外邊距的合並

    • 當上下相鄰的兩個塊元素相遇時，如果上面的元素有下邊距margin-bottom，下面的元素有上邊距margin-top，則他們之間的垂直間距不是margin-bottom 與 margin-top 之和。取兩個值中的較大者，這種現象被稱為相鄰塊元素垂直外邊距的合並
      • 解決方案：盡量只給一個盒子添加margin值

  • 嵌套塊元素的塌陷

    • 對於兩個嵌套關系的塊元素，父元素有上邊距，同時子元素也有上邊距，此時父元素會塌陷較大的外邊距
      • 解決方案
        • 可以為父元素定義一個上邊框
        • 可以為父元素第一一個內邊距
        • 可以為父元素添加overflow: hidden

清除內外邊距

網頁元素很多都帶有默認的內外邊距，而且不同瀏覽器默認的也不一致。因此我們在布局前，首先要清除下網頁元素的內外邊距

* {
    padding: 0;
    margin: 0;   /* 使用通配符清除 
    					這也是我們CSS的第一行代碼*/
}

行內元素為了照顧兼容性，盡量只設置左右內外邊距，不要設置上下內外邊距，但是轉換為塊級元素和行內塊元素就可以了

2、PS基本操作

因為網頁美工大部分效果圖都是利用PS來做的，所以以后我們大部分切圖工作都是在PS里面完成

• 文件 -》打開：可以打開我們要測量的圖片
• Ctrl + R：可以打開標尺，或者 視圖-》標尺
• 右擊標尺，把里面的單位改為像素
• Ctrl + 加號，可以放大視圖
• 按住空格鍵，鼠標可以變成小手，拖動PS視圖
• 用選區拖動，可以測量大小
• Ctrl + D可以取消選區，或者在旁邊空白處點擊一下也可以取消選區

3、圓角邊框**

在CSS3中，新增了圓角邊框樣式，這樣我們的盒子就可以變成圓角了

border-radius屬性用於設置元素的外邊框的圓角

border-radius: 10px;  /* 添加圓角 */

radius 半徑（圓的半徑）原理：橢圓和邊框的交集形成圓角效果

• 參數可以是數值或百分比形式
• 如果是正方形，想要設置為一個圓，把數值改為高度或寬度的一半即可，或者直接寫為50%
• 如果是一個矩形，設置為高度的一半可以做圓角矩形
• 該屬性是一個簡寫屬性，可以跟四個值，分別代表左上角、右上角、右下角、左下角

4、陰影

盒子陰影

CSS3中新增了盒子陰影，我們可以使用box-shadow屬性為盒子添加陰影

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需，水平陰影的位置，允許負值
v-shadow	必需，垂直陰影的位置，允許負值
blur	可選，模糊距離
spread	可選，陰影距離
color	可選，陰影顏色
inset	可選，將外部陰影（outset）改為內部陰影

注意

• 默認的是外陰影（outset），但是不可以寫這個單詞，否則陰影無效
• 盒子陰影不占用空間，不會影響其他盒子的排序

文字陰影

在CSS3中，我們可以使用text-shadow屬性將陰影應用於文本

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需，水平陰影的位置，允許負值
v-shadow	必需，垂直陰影的位置，允許負值
blur	可選，模糊距離
color	可選，陰影顏色

十三、浮動

傳統網頁布局的三種方式

• 普通流（標准流）
  • 所謂標准流，就是標簽按照規定好的默認方式排列
    1. 塊級元素會獨占一行，從上向下排序排列
    2. 行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行
• 浮動
• 定位

1、為什么需要

有很多的網頁效果，標准流是沒辦法完成，此時就可以利用浮動完成頁面布局，因為浮動可以改變元素標簽的默認的排序方式

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

網頁布局第一准則：多個塊級元素縱向排列找標准線，多個塊級元素橫向排列找浮動

2、什么是浮動

浮動屬性用於創建浮動框，將其移動到一邊，知道左邊或右邊緣觸及包含塊或另一個浮動框的邊緣

選擇器 { float: 屬性值; }

屬性值	描述
none	元素不浮動（默認）
left	元素向左浮動
right	元素向右浮動

3、浮動特性

1. 浮動的元素會脫離標准流（脫標）
   • 脫離標准流的控制（浮）移動到指定位置（動）
   • 浮動的盒子不再保留原先的位置
2. 浮動元素會一行內顯示並且元素頂部對齊排列
   • 浮動的元素是互相貼靠在一起的（不會有縫隙），如果父級寬度裝不下這些浮動的盒子多出的盒子會另起一行對齊
   • 浮動元素中間是沒有空隙的
3. 浮動元素會具有行內塊元素的特性
   • 任何元素都可以浮動，不管原先是什么模式的元素，添加浮動后具有行內塊元素相似的特性
   • 如果行內元素有了浮動，則不需要轉換成行內塊元素就可以直接給高度和寬度

4、應用

浮動元素經常和標准流父級元素搭配使用

為了約束浮動元素位置，我們網頁布局一般采用的策略是：

• 先采用標准流的父元素排列上下位置，之后內部子元素采取浮動排列左右位置，符合網頁布局第一准則

5、注意

浮動元素和標准流的父盒子搭配

• 先用標准流的父元素排列上下位置，之后內部子元素采取浮動排列左右位置

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

• 一個盒子里面有多個盒子，如果其中一個盒子浮動，那么其他兄弟也應該浮動，以防止引起問題
• 浮動的盒子只影響浮動盒子后面的標准流，不會影響前面的標准流

6、清除浮動

由於父級盒子在很多情況下，不方便設置高度，但是盒子浮動又不占有位置，最后父級盒子高度為0時，就會影響下面的標准流盒子

• 由於浮動元素不再占有原文檔流的位置，所以它會對后面的元素排版產生影響
• 父級沒有高度
• 子盒子浮動了
• 影響下面的布局

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

選擇器 { clear: 屬性值; }

屬性值	描述
left	不允許左側有浮動元素，清除左側浮動元素的影響
right	不允許右側有浮動元素，清除右側浮動的影響
both	同時清除左右兩側浮動的影響（主要使用）

清除浮動方法

1. 額外標簽法，也稱隔離法，是W3C推薦的做法

   額外標簽法會在浮動元素末尾添加一個空標簽。例如：<div style="clear: both"></div>，或者其他標簽

   • 優點：通俗易懂，書寫方便
   • 缺點：添加許多無意義的標簽，結構比較差

2. 父級添加overflow屬性

   • 可以給父級添加overflow屬性，將其屬性值設置為hidden、auto或scroll
   • 注意是給父級元素添加代碼
   • 優點：代碼簡潔
   • 缺點：無法顯示溢出部分

3. 父級添加after偽元素

   • .clearfix:after {
         content: "";
         display: block;
         height: 0;
         clear: both;
         visiblity: hidden
     }
     .clearfix {
         *zoom: 1;  /* IE6 IE7 專有 */
     }
     

   • 優點：沒有增加標簽，結構簡單

   • 缺點：照顧低版本瀏覽器

4. 父級添加雙偽元素

   • .clearfix:before, .clearfix:after {
         content: "";
         display: table;
     }
     .clearfix:after {
         clear: both;
     }
     .clearfix {
         *zoom: 1;
     }
     

   • 優點：代碼更簡潔

   • 缺點：照顧低版本瀏覽器

十四、PS切圖

1、常見的圖片格式

1. jpg圖像格式：JPEG（JPG）對色彩信息保留較好，高清、顏色較多，我們產品類的圖片經常使用JPG格式
2. gif圖像格式：GIF格式最多只能儲存256色，所以通常用來顯示簡單圖形及字體，但是可以保存透明背景的動畫效果，實際效果經常用於一些圖片小動畫效果
3. png圖像格式：其是一種新興的網絡圖形格式，結合了GIF和JPEG的優點，具有存儲形式豐富的特點，能夠保持透明背景，如果想要切成透明背景，選擇png格式
4. psd圖像格式：psd格式是PS專用格式，里面可以存放圖層、通道、遮罩等多種設計稿。對我們前端人員來說，最大的優點是我們可以直接從上面復制文字，獲得圖片，還可以測量大小和距離

2、PS切圖

圖層切圖

最簡單的切圖方式：右擊圖層 -> 快速導出為png

但是很多情況下，我們需要合並圖層再導出

1. 選中需要的圖層：圖層菜單 -> 合並圖層（Ctrl + e）
2. 右擊 -> 快速導出為png

切片切圖

1. 利用切片選中圖片
   • 利用切片工具手動划出
2. 導出選中的圖片
   • 文件菜單 -> 導出 -> 存儲為web設備所用的格式 -> 選擇我們要的格式 -> 存儲

PS插件切圖

Cutterman是一款運行在PS里面的插件，能夠自動將需要的圖層進行輸出，以代替傳統的手工“導出web所用格式”以及使用切片工具進行挨個切圖的繁瑣流程

3、頁面布局整體思路

1. 必須確定頁面的版心（可視區），我們測量可知
2. 分析頁面中的行模塊，以及每個行模塊中的列模塊，其為頁面布局的第一准則
3. 一行中的列模塊經常浮動布局，先確定每個列的大小之后確定列的位置，頁面布局第二准則
4. 制作HTML結構，我們還是遵循，先有結構，后有樣式的原則，結構永遠最重要
5. 所以，先理清楚頁面結構，再寫代碼尤為重要，這需要我們多積累

頭部制作

實際開發中，我們不會直接用鏈接a，而是用li包含鏈接（li + a的做法）

• li + a 語義更加清晰，一看這就是有條理的列表型內容
• 如果直接用a。搜索引擎容易辨別為有堆砌關鍵字的嫌疑（故意堆砌關鍵字容易被搜索引擎有降權的風險），從而影響網站排名

導航欄注意點

• 讓導航欄一行顯示，給li加浮動，因為li是塊元素，需要一行顯示
• 導航欄可以不給寬度，將來可以繼續添加其余文字
• 因為導航欄里面文字不一樣多，所以最好給鏈接a左右padding撐開盒子，而不是指定寬度

​