久久精品这里只有精品,美女被操网站在线一区,熟女人妻www.精品

1. 精靈圖（重點(diǎn)）

1.1 為什么需要精靈圖

一個(gè)網(wǎng)頁(yè)中往往會(huì)應(yīng)用很多小的背景圖像作為修飾，當(dāng)網(wǎng)頁(yè)中的圖像過(guò)多時(shí)，服務(wù)器就會(huì)頻繁地接收和發(fā)送請(qǐng)求圖片，造成服務(wù)器請(qǐng)求壓力過(guò)大，這將大大降低頁(yè)面的加載速度。

為什么使用精靈圖（目的）：

為了有效地減少服務(wù)器接收和發(fā)送請(qǐng)求的次數(shù)，提高頁(yè)面的加載速度，出現(xiàn)了 CSS 精靈技術(shù)（也稱 CSS Sprites、CSS 雪碧）。

核心原理：

將網(wǎng)頁(yè)中的一些小背景圖像整合到一張大圖中 ，這樣服務(wù)器只需要一次請(qǐng)求就可以了。

1.2 精靈圖（sprites）的使用

使用精靈圖核心：

精靈技術(shù)主要針對(duì)于背景圖片使用。就是把多個(gè)小背景圖片整合到一張大圖片中。
這個(gè)大圖片也稱為 sprites 精靈圖或者雪碧圖
移動(dòng)背景圖片位置，此時(shí)可以使用 background-position 。
移動(dòng)的距離就是這個(gè)目標(biāo)圖片的 x 和 y 坐標(biāo)。注意網(wǎng)頁(yè)中的坐標(biāo)有所不同
因?yàn)橐话闱闆r下都是往上往左移動(dòng)，所以數(shù)值是負(fù)值。
使用精靈圖的時(shí)候需要精確測(cè)量，每個(gè)小背景圖片的大小和位置。

使用精靈圖核心總結(jié)：

精靈圖主要針對(duì)于小的背景圖片使用。
主要借助于背景位置來(lái)實(shí)現(xiàn)---background-position 。
一般情況下精靈圖都是負(fù)值。（千萬(wàn)注意網(wǎng)頁(yè)中的坐標(biāo)： x軸右邊走是正值，左邊走是負(fù)值， y軸同理。）

2. 字體圖標(biāo)

2.1 字體圖標(biāo)的產(chǎn)生

字體圖標(biāo)使用場(chǎng)景：主要用于顯示網(wǎng)頁(yè)中通用、常用的一些小圖標(biāo)。

精靈圖是有諸多優(yōu)點(diǎn)的，但是缺點(diǎn)很明顯。

1.圖片文件還是比較大的。

2.圖片本身放大和縮小會(huì)失真。

3.一旦圖片制作完畢想要更換非常復(fù)雜。

此時(shí)，有一種技術(shù)的出現(xiàn)很好的解決了以上問(wèn)題，就是字體圖標(biāo) iconfont。

字體圖標(biāo)可以為前端工程師提供一種方便高效的圖標(biāo)使用方式，展示的是圖標(biāo)，本質(zhì)屬于字體。

2.2 字體圖標(biāo)的優(yōu)點(diǎn)

輕量級(jí)：一個(gè)圖標(biāo)字體要比一系列的圖像要小。一旦字體加載了，圖標(biāo)就會(huì)馬上渲染出來(lái)，減少了服務(wù)器請(qǐng)求

靈活性：本質(zhì)其實(shí)是文字，可以很隨意的改變顏色、產(chǎn)生陰影、透明效果、旋轉(zhuǎn)等
兼容性：幾乎支持所有的瀏覽器，請(qǐng)放心使用
注意：字體圖標(biāo)不能替代精靈技術(shù)，只是對(duì)工作中圖標(biāo)部分技術(shù)的提升和優(yōu)化。

總結(jié)：

1.如果遇到一些結(jié)構(gòu)和樣式比較簡(jiǎn)單的小圖標(biāo)，就用字體圖標(biāo)。

2.如果遇到一些結(jié)構(gòu)和樣式復(fù)雜一點(diǎn)的小圖片，就用精靈圖。

使用步驟

字體圖標(biāo)是一些網(wǎng)頁(yè)常見(jiàn)的小圖標(biāo)，我們直接網(wǎng)上下載即可。因此使用可以分為：

1.字體圖標(biāo)的下載

2.字體圖標(biāo)的引入（引入到我們html頁(yè)面中）

3.字體圖標(biāo)的追加（以后添加新的小圖標(biāo)）

2.3 字體圖標(biāo)的下載

推薦下載網(wǎng)站：

icomoon 字庫(kù) http://icomoon.io 推薦指數(shù) ★★★★★

IcoMoon 成立于 2011 年，推出了第一個(gè)自定義圖標(biāo)字體生成器，它允許用戶選擇所需要的圖標(biāo)，使它們成一字型。該字庫(kù)內(nèi)容種類繁多，非常全面，唯一的遺憾是國(guó)外服務(wù)器，打開(kāi)網(wǎng)速較慢。

阿里 iconfont 字庫(kù) http://www.iconfont.cn/ 推薦指數(shù) ★★★★★

這個(gè)是阿里媽媽 M2UX 的一個(gè) iconfont 字體圖標(biāo)字庫(kù)，包含了淘寶圖標(biāo)庫(kù)和阿里媽媽圖標(biāo)庫(kù)?？梢允褂?AI制作圖標(biāo)上傳生成。重點(diǎn)是，免費(fèi)！

2.4 字體圖標(biāo)的引入

下載完畢之后，注意原先的文件不要?jiǎng)h，后面會(huì)用。

把下載包里面的 fonts 文件夾放入頁(yè)面根目錄下

字體文件格式

不同瀏覽器所支持的字體格式是不一樣的，字體圖標(biāo)之所以兼容，就是因?yàn)榘酥髁鳛g覽器支持的字體文件。

1).TureType( .ttf )格式.ttf字體是Windows和Mac的最常見(jiàn)的字體，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

2).Web Open Font Format( .woff )格式woff字體，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

3).Embedded Open Type( .eot )格式.eot字體是IE專用字體，支持這種字體的瀏覽器有IE4+；

4).SVG( .svg )格式.svg字體是基于SVG字體渲染的一種格式，支持這種字體的瀏覽器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

2.在 CSS 樣式中全局聲明字體：簡(jiǎn)單理解把這些字體文件通過(guò)css引入到我們頁(yè)面中。

一定注意字體文件路徑的問(wèn)題

 @font-face {
   font-family: 'icomoon';
   src:  url('fonts/icomoon.eot?7kkyc2');
   src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
     url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
     url('fonts/icomoon.woff?7kkyc2') format('woff'),
     url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }

html 標(biāo)簽內(nèi)添加小圖標(biāo)。

給標(biāo)簽定義字體。

 span {
   font-family: "icomoon";
 }

注意：務(wù)必保證這個(gè)字體和上面@font-face里面的字體保持一致

2.5 字體圖標(biāo)的追加

如果工作中，原來(lái)的字體圖標(biāo)不夠用了，我們需要添加新的字體圖標(biāo)到原來(lái)的字體文件中。

把壓縮包里面的 selection.json 從新上傳，然后選中自己想要新的圖標(biāo)，從新下載壓縮包，并替換原來(lái)的文件即可。

3. CSS 三角

3.1 介紹

網(wǎng)頁(yè)中常見(jiàn)一些三角形，使用 CSS 直接畫(huà)出來(lái)就可以，不必做成圖片或者字體圖標(biāo)。

 div {
    width: 0; 
    height: 0;
    border: 50px solid transparent;
    border-color: red green blue black;
    line-height:0;
    font-size: 0;
 }

我們用css 邊框可以模擬三角效果
寬度高度為0
我們4個(gè)邊框都要寫(xiě)，只保留需要的邊框顏色，其余的不能省略，都改為 transparent 透明就好了
為了照顧兼容性低版本的瀏覽器，加上 font-size: 0; line-height: 0;

4. CSS 用戶界面樣式

什么是界面樣式

所謂的界面樣式，就是更改一些用戶操作樣式，以便提高更好的用戶體驗(yàn)。

更改用戶的鼠標(biāo)樣式
表單輪廓
防止表單域拖拽

4.1 鼠標(biāo)樣式 cursor

 li {
    cursor: pointer; 
 }

設(shè)置或檢索在對(duì)象上移動(dòng)的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀。

4.2 輪廓線 outline

給表單添加 outline: 0; 或者 outline: none; 樣式之后，就可以去掉默認(rèn)的藍(lán)色邊框。

 input {
    outline: none; 
 }

4.3 防止拖拽文本域 resize

實(shí)際開(kāi)發(fā)中，我們文本域右下角是不可以拖拽的。

 textarea{ 
    resize: none;
 }

vertical-align 屬性應(yīng)用

5. vertical-align 屬性應(yīng)用

CSS 的 vertical-align 屬性使用場(chǎng)景：經(jīng)常用于設(shè)置圖片或者表單(行內(nèi)塊元素）和文字垂直對(duì)齊。

官方解釋：用于設(shè)置一個(gè)元素的垂直對(duì)齊方式，但是它只針對(duì)于行內(nèi)元素或者行內(nèi)塊元素有效。

語(yǔ)法：

vertical-align : baseline | top | middle | bottom

5.1 圖片、表單和文字對(duì)齊

圖片、表單都屬于行內(nèi)塊元素，默認(rèn)的 vertical-align 是基線對(duì)齊。

此時(shí)可以給圖片、表單這些行內(nèi)塊元素的 vertical-align 屬性設(shè)置為 middle 就可以讓文字和圖片垂直居中對(duì)齊了。

5.2 解決圖片底部默認(rèn)空白縫隙問(wèn)題

bug：圖片底側(cè)會(huì)有一個(gè)空白縫隙，原因是行內(nèi)塊元素會(huì)和文字的基線對(duì)齊。

主要解決方法有兩種：

1.給圖片添加 vertical-align:middle | top| bottom 等。（提倡使用的）

2.把圖片轉(zhuǎn)換為塊級(jí)元素 display: block;

6. 溢出的文字省略號(hào)顯示

6.1 單行文本溢出顯示省略號(hào)

單行文本溢出顯示省略號(hào)--必須滿足三個(gè)條件：

  /*1. 先強(qiáng)制一行內(nèi)顯示文本*/
   white-space: nowrap;  （ 默認(rèn) normal 自動(dòng)換行）
   
  /*2. 超出的部分隱藏*/
   overflow: hidden;
   
  /*3. 文字用省略號(hào)替代超出的部分*/
   text-overflow: ellipsis;

6.2 多行文本溢出顯示省略號(hào)（了解）

多行文本溢出顯示省略號(hào)，有較大兼容性問(wèn)題，適合于webKit瀏覽器或移動(dòng)端（移動(dòng)端大部分是webkit內(nèi)核）

/*1. 超出的部分隱藏 */
overflow: hidden;

/*2. 文字用省略號(hào)替代超出的部分 */
text-overflow: ellipsis;

/* 3. 彈性伸縮盒子模型顯示 */
display: -webkit-box;

/* 4. 限制在一個(gè)塊元素顯示的文本的行數(shù) */
-webkit-line-clamp: 2;

/* 5. 設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式 */
-webkit-box-orient: vertical;

更推薦讓后臺(tái)人員來(lái)做這個(gè)效果，因?yàn)楹笈_(tái)人員可以設(shè)置顯示多少個(gè)字，操作更簡(jiǎn)單。

7. 常見(jiàn)布局技巧

巧妙利用一個(gè)技術(shù)更快更好的布局：

margin負(fù)值的運(yùn)用
文字圍繞浮動(dòng)元素
行內(nèi)塊的巧妙運(yùn)用
CSS三角強(qiáng)化

7.1. margin負(fù)值運(yùn)用

1.讓每個(gè)盒子margin 往左側(cè)移動(dòng) -1px 正好壓住相鄰盒子邊框

2.鼠標(biāo)經(jīng)過(guò)某個(gè)盒子的時(shí)候，提高當(dāng)前盒子的層級(jí)即可（如果沒(méi)有有定位，則加相對(duì)定位（保留位置），如果有定位，則加z-index）

巧妙運(yùn)用浮動(dòng)元素不會(huì)壓住文字的特性

頁(yè)碼在頁(yè)面中間顯示:

把這些鏈接盒子轉(zhuǎn)換為行內(nèi)塊，之后給父級(jí)指定 text-align:center;
利用行內(nèi)塊元素中間有縫隙，并且給父級(jí)添加 text-align:center; 行內(nèi)塊元素會(huì)水平會(huì)居中

8. CSS 初始化

不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，為了消除不同瀏覽器對(duì)HTML文本呈現(xiàn)的差異，照顧瀏覽器的兼容，我們需要對(duì)CSS 初始化

簡(jiǎn)單理解： CSS初始化是指重設(shè)瀏覽器的樣式。 (也稱為CSS reset）

每個(gè)網(wǎng)頁(yè)都必須首先進(jìn)行 CSS初始化。

Unicode編碼字體：

把中文字體的名稱用相應(yīng)的Unicode編碼來(lái)代替，這樣就可以有效的避免瀏覽器解釋CSS代碼時(shí)候出現(xiàn)亂碼的問(wèn)題。
·

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

CSS基礎(chǔ)學(xué)習(xí)第七天

CSS基礎(chǔ)學(xué)習(xí)第七天

1. 精靈圖（重點(diǎn)）

1.1 為什么需要精靈圖

1.2 精靈圖（sprites）的使用

2. 字體圖標(biāo)

2.1 字體圖標(biāo)的產(chǎn)生

2.2 字體圖標(biāo)的優(yōu)點(diǎn)

2.3 字體圖標(biāo)的下載

2.4 字體圖標(biāo)的引入

2.5 字體圖標(biāo)的追加

3. CSS 三角

3.1 介紹

4. CSS 用戶界面樣式

4.1 鼠標(biāo)樣式 cursor

4.2 輪廓線 outline

4.3 防止拖拽文本域 resize

5. vertical-align 屬性應(yīng)用

5.1 圖片、表單和文字對(duì)齊

5.2 解決圖片底部默認(rèn)空白縫隙問(wèn)題

6. 溢出的文字省略號(hào)顯示

6.1 單行文本溢出顯示省略號(hào)

6.2 多行文本溢出顯示省略號(hào)（了解）

7. 常見(jiàn)布局技巧

7.1. margin負(fù)值運(yùn)用

8. CSS 初始化

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

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

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

CSS基礎(chǔ)學(xué)習(xí)第七天

1. 精靈圖（重點(diǎn)）

1.1 為什么需要精靈圖

1.2 精靈圖（sprites）的使用

2. 字體圖標(biāo)

2.1 字體圖標(biāo)的產(chǎn)生

2.2 字體圖標(biāo)的優(yōu)點(diǎn)

2.3 字體圖標(biāo)的下載

2.4 字體圖標(biāo)的引入

2.5 字體圖標(biāo)的追加

3. CSS 三角

3.1 介紹

4. CSS 用戶界面樣式

4.1 鼠標(biāo)樣式 cursor

4.2 輪廓線 outline

4.3 防止拖拽文本域 resize

5. vertical-align 屬性應(yīng)用

5.1 圖片、表單和文字對(duì)齊

5.2 解決圖片底部默認(rèn)空白縫隙問(wèn)題

6. 溢出的文字省略號(hào)顯示

6.1 單行文本溢出顯示省略號(hào)

6.2 多行文本溢出顯示省略號(hào)（了解）

7. 常見(jiàn)布局技巧

7.1. margin負(fù)值運(yùn)用

8. CSS 初始化

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

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

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

5.1 圖片、表單和文字對(duì)齊