溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下高級(jí)CSS技巧有哪些的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
1. 為什么需要精靈圖？
客戶端要訪問一個(gè)網(wǎng)頁(yè)時(shí)，瀏覽器會(huì)向服務(wù)器發(fā)送請(qǐng)求，服務(wù)器接收到請(qǐng)求后，會(huì)返回請(qǐng)求頁(yè)面給客戶端
一個(gè)網(wǎng)頁(yè)中往往會(huì)應(yīng)用很多小的背景圖像作為修飾，當(dāng)網(wǎng)頁(yè)中的圖像過多時(shí)，服務(wù)器就會(huì)頻繁地接收和發(fā)送請(qǐng)求圖片，造成服務(wù)器請(qǐng)求壓力過大，這將大大降低頁(yè)面的加載速度
因此，為了有效地減少服務(wù)器接收和發(fā)送請(qǐng)求的次數(shù)，提高頁(yè)面的加載速度，出現(xiàn)了 CSS 精靈技術(shù)（也稱為 CSS Sprites、CSS 雪碧）。
核心原理：將網(wǎng)頁(yè)中的一些小背景圖像整合到一張大圖中，這樣服務(wù)器只需要一次請(qǐng)求就可以了
2. 精靈圖的使用
使用精靈圖核心：
精靈技術(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è)小背景圖片的大小和位置
在王者榮耀的官網(wǎng)，我們可以找到這樣的一張精靈圖
怎么顯示這張精靈圖中的特定部分呢
<!DOCTYPE html>
<html>
<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>
<style>
.box1 {
width: 60px;
height: 60px;
margin: 100px auto;
background: url(images/index.png) no-repeat -182px 0;
}
.box2 {
width: 27px;
height: 25px;
margin: 200px;
background: url(images/index.png) no-repeat -155px -106px;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
運(yùn)行結(jié)果：
3. 精靈圖應(yīng)用案例
素材在此
代碼實(shí)現(xiàn)：
<!DOCTYPE html>
<html>
<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>
<style>
span {
display: inline-block;
background: url(images/abcd.jpg) no-repeat;
}
.c {
width: 109px;
height: 110px;
background-position: -237px -8px;
}
.z {
width: 113px;
height: 112px;
background-position: -479px -557px;
}
.r {
width: 110px;
height: 109px;
background-position: -139px -415px;
}
</style>
</head>
<body>
<span></span>
<span></span>
<span></span>
</body>
</html>
運(yùn)行結(jié)果：
怎么樣，快去試試看吧
1. 字體圖標(biāo)的產(chǎn)生
下圖中圈起來的就是字體圖標(biāo)，不是圖片哦
字體圖標(biāo)的使用場(chǎng)景：主要用于顯示網(wǎng)頁(yè)中通用、常用的一些小圖標(biāo)
精靈圖是有很多優(yōu)點(diǎn)的，但是缺點(diǎn)也很明顯
圖片文件占用空間還是比較大的
圖片本身放大和縮小會(huì)失真
一旦圖片制作完畢想要更換非常復(fù)雜
于是，一種技術(shù)出現(xiàn)了，就是字體圖標(biāo) iconfont
字體圖標(biāo)可以為前端工程師提供一種方便高效的圖標(biāo)使用方式，展示的是圖標(biāo)，本質(zhì)屬于字體
2. 字體圖標(biāo)的優(yōu)點(diǎn)
輕量級(jí)：一個(gè)字體圖標(biāo)要比一系列的圖像要小，一旦字體加載了，圖標(biāo)就會(huì)馬上渲染出來，減少了服務(wù)器請(qǐng)求
靈活性：本質(zhì)其實(shí)是文字，可以很隨意地改變顏色、產(chǎn)生陰影、透明效果、旋轉(zhuǎn)等等
兼容性：幾乎支持所有的瀏覽器，請(qǐng)放心使用
注意：字體圖標(biāo)不能替代精靈技術(shù)，只是對(duì)工作中圖標(biāo)部分技術(shù)的提升和優(yōu)化
總結(jié)：
如果遇到一些結(jié)構(gòu)和樣式比較簡(jiǎn)單的小圖標(biāo)，就用字體圖標(biāo)
如果遇到一些結(jié)構(gòu)和樣式復(fù)雜一點(diǎn)的小圖片，就用精靈圖
3. 下載字體圖標(biāo)
字體圖標(biāo)是一些網(wǎng)頁(yè)常見的小圖標(biāo)，我們直接從網(wǎng)上下載即可，使用可以分為：
字體圖標(biāo)的下載
字體圖標(biāo)的引入（引入到我們 html 頁(yè)面中）
字體圖標(biāo)的追加（以后添加新的小圖標(biāo)）
推薦的下載網(wǎng)站：
icomoon 字庫(kù)
IcoMoon 成立于 2011 年，推出了第一個(gè)自定義圖標(biāo)字體生成器，它允許用戶選擇所需要的圖標(biāo)，使它們呈一字型。該字庫(kù)內(nèi)容種類繁多，非常全面，唯一的遺憾是國(guó)外服務(wù)器，打開網(wǎng)速較慢
iconfont 字庫(kù)
這個(gè)是阿里巴巴 M2UX 的一個(gè) iconfont 字體圖標(biāo)字庫(kù)，包含了淘寶圖標(biāo)庫(kù)和阿里巴巴圖標(biāo)庫(kù)，可以使用 AI 制作圖表上傳生成，重點(diǎn)是 —— 免費(fèi)
拿 icomoon 字庫(kù) 來說，基本操作如下
4. 引入字體圖標(biāo)
下載完畢之后，注意原先的文件不要?jiǎng)h，后面會(huì)用
把下載包里面的 fonts 文件夾放入頁(yè)面根目錄下
在 CSS 樣式中全局聲明字體：簡(jiǎn)單理解為將這些字體文件通過 css 引入到我們頁(yè)面中
一定要注意文件路徑的問題
我們用下面這一系列代碼來聲明字體，這段代碼也可以在 style.css 中找到
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?q42srk');
src: url('fonts/icomoon.eot?q42srk#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?q42srk') format('truetype'),
url('fonts/icomoon.woff?q42srk') format('woff'),
url('fonts/icomoon.svg?q42srk#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
打開 demo.html 我們可以復(fù)制下載的圖標(biāo)
<!DOCTYPE html>
<html>
<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>字體圖標(biāo)的使用</title>
<style>
/* 字體聲明 */
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?q42srk');
src: url('fonts/icomoon.eot?q42srk#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?q42srk') format('truetype'),
url('fonts/icomoon.woff?q42srk') format('woff'),
url('fonts/icomoon.svg?q42srk#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
/* 指定字體，和字體聲明中一致 */
font-family: 'icomoon';
font-size: 100px;
color: cyan;
}
</style>
</head>
<body>
<span>?</span>
<span>?</span>
<span>?</span>
</body>
</html>
5. 字體圖標(biāo)的追加
如果工作中，原來的字體圖標(biāo)不夠用了，我們需要添加新的字體圖標(biāo)到原來的字體文件
把壓縮包里面的 selection.json 重新上傳，然后選中自己想要新的圖標(biāo)，重新下載壓縮包，并替換原來的文件即可
1. CSS三角制作
網(wǎng)頁(yè)中常見一些三角形，使用 CSS 直接畫出來就可以，不必做成圖片或者字體圖標(biāo)
<!DOCTYPE html>
<html>
<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>CSS三角制作</title>
<style>
.box1 {
width: 0;
height: 0;
border: 10px solid;
border-top-color: cyan;
border-right-color: red;
border-bottom-color: green;
border-left-color: blue;
}
.box2 {
width: 0;
height: 0;
border: 10px solid transparent;
/* 要顯示的一邊改變顏色，其他邊透明 */
border-bottom-color: cyan;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
2. CSS三角應(yīng)用-京東效果
<!DOCTYPE html>
<html>
<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>CSS三角應(yīng)用</title>
<style>
.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: pink;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
</body>
</html>
1. 什么是界面樣式
所謂的界面樣式，就是更改一些用戶操作樣式，以便提供更好的用戶體驗(yàn)
更改用戶的鼠標(biāo)樣式
表單輪廓
防止表單域拖拽
2. 更換用戶鼠標(biāo)樣式
li { cursor: pointer; }
設(shè)置或檢索在對(duì)象上移動(dòng)的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀
| 屬性值 | 描述 |
|---|---|
| default | 小白，默認(rèn) |
| pointer | 小手 |
| move | 移動(dòng) |
| text | 文本 |
| not-allowed | 禁止 |
<!DOCTYPE html>
<html>
<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>鼠標(biāo)樣式</title>
</head>
<body>
<ul>
<li style="cursor: default;">我是鼠標(biāo)默認(rèn)樣式</li>
<li style="cursor: pointer;">我是鼠標(biāo)小手樣式</li>
<li style="cursor: move;">我是鼠標(biāo)移動(dòng)樣式</li>
<li style="cursor: text;">我是鼠標(biāo)文本樣式</li>
<li style="cursor: not-allowed;">我是鼠標(biāo)禁止樣式</li>
</ul>
</body>
</html>
3. 表單輪廓線
給表單添加 outline: 0; 或者 outline: none; 樣式之后，就可以去掉默認(rèn)的藍(lán)色邊框
4. 防止表單域拖拽
實(shí)際開發(fā)中，我們文本域右下角是不可以拖拽的
給文本域添加 resize: none; 樣式之后，就可以防止被拖拽
<!DOCTYPE html>
<html>
<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>
<style>
input,
textarea {
outline: none;
}
textarea {
resize: none;
}
</style>
</head>
<body>
<input type="text">
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>
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
| 值 | 描述 |
|---|---|
| baseline | 默認(rèn)，元素放置在父元素的基線上 |
| top | 把元素的頂端于行中最高元素的頂端對(duì)齊 |
| middle | 把此元素放置在父元素的中部 |
| bottom | 把元素的頂端與行中最低的元素的頂端對(duì)齊 |
登錄后復(fù)制<!DOCTYPE html>
<html>
<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>vertical-align</title>
<style>
img {
vertical-align: middle;
}
</style>
</head>
<body>
<img src="images/math.png" alt="">一生之?dāng)?
</body>
</html>
1. 圖片、表單和文字對(duì)齊
圖片、表單都屬于行內(nèi)塊元素，默認(rèn)的 vertical-align 是基線對(duì)齊
此時(shí)可以給圖片、表單這些行內(nèi)塊元素的 vertical-align 屬性設(shè)置為 middle 就可以讓文字和圖片垂直居中對(duì)齊了
2. 解決圖片底部默認(rèn)白色間隙問題
bug：圖片底側(cè)會(huì)有一個(gè)空白間隙，原因是行內(nèi)塊元素會(huì)和文字的基線對(duì)齊
主要解決方法有兩種：
給圖片添加 vertical-align: middle | top | bottom; 等 （推薦）
把圖片轉(zhuǎn)換為塊級(jí)元素 display: block;
<!DOCTYPE html>
<html>
<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>
<style>
div {
border: 2px solid red;
}
img {
vertical-align: bottom;
}
</style>
</head>
<body>
<div>
<img src="images/smile.jpg" alt="">
</div>
</body>
</html>
1. 單行文本溢出顯示省略號(hào)——必須滿足三個(gè)條件
登錄后復(fù)制/* 1.文字顯示不開時(shí)強(qiáng)制顯示 */
white-space: nowrap;
/* 2. 超出部分隱藏 */
overflow: hidden;
/* 3. 文字用省略號(hào)替代超出的部分 */
text-overflow: ellipsis;
<!DOCTYPE html>
<html>
<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>
<style>
div {
width: 150px;
height: 80px;
background-color: cyan;
margin: 100px auto;
/* 1.文字顯示不開時(shí)強(qiáng)制顯示 */
white-space: nowrap;
/* 2. 超出部分隱藏 */
overflow: hidden;
/* 3. 文字用省略號(hào)替代超出的部分 */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
衣帶漸寬終不悔，為伊消得人憔悴
</div>
</body>
</html>
2. 多行文本溢出顯示省略號(hào)
多行文本溢出顯示省略號(hào)，有較大兼容性問題，適合于 webKit 瀏覽器或者移動(dòng)端（移動(dòng)端大部分是 webKit 內(nèi)核）
/* 彈性伸縮盒子模型顯示 */
display: -webkit-box;
/* 限制在一個(gè)塊元素顯示的文本的行數(shù) */
-webkit-line-clamp: 3;
/* 設(shè)置或檢索伸縮盒子對(duì)象的子元素的排列方式 */
-webkit-box-orient: vertical;
<!DOCTYPE html>
<html>
<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>
<style>
div {
width: 150px;
height: 65px;
background-color: cyan;
margin: 100px auto;
overflow: hidden;
text-overflow: ellipsis;
/* 彈性伸縮盒子模型顯示 */
display: -webkit-box;
/* 限制在一個(gè)塊元素顯示的文本的行數(shù) */
-webkit-line-clamp: 3;
/* 設(shè)置或檢索伸縮盒子對(duì)象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div>
衣帶漸寬終不悔，為伊消得人憔悴.衣帶漸寬終不悔，為伊消得人憔悴
</div>
</body>
</html>
更推薦讓后臺(tái)人員來做這個(gè)效果，因?yàn)楹笈_(tái)人員可以設(shè)置顯示多少個(gè)字，操作更簡(jiǎn)單
1. margin負(fù)值的運(yùn)用一
讓每個(gè)盒子 margin 往左側(cè)移動(dòng) -1px 正好壓住相鄰盒子邊框
<!DOCTYPE html>
<html>
<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>margin負(fù)值的巧妙運(yùn)用</title>
<style>
ul li {
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid cyan;
margin-left: -1px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
2. margin負(fù)值的運(yùn)用二
鼠標(biāo)經(jīng)過某個(gè)盒子的時(shí)候，提高當(dāng)前盒子的層級(jí)即可（如果沒有定位，則加相對(duì)定位（保留位置），如果有定位，則加 z-index）
<!DOCTYPE html>
<html>
<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>margin負(fù)值的巧妙運(yùn)用</title>
<style>
ul li {
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid cyan;
margin-left: -1px;
}
ul li:hover {
/* 盒子沒有定位時(shí)，加相對(duì)定位 */
position: relative;
/* 盒子有定位時(shí)，由于子絕父相無(wú)法添加相對(duì)定位 */
z-index: 1;
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
3. 文字圍繞浮動(dòng)元素
類似于下圖這樣的效果，該怎么實(shí)現(xiàn)呢？
<!DOCTYPE html>
<html>
<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>文字圍繞浮動(dòng)元素</title>
<style>
.box {
width: 280px;
height: 70px;
margin: 100px auto;
}
.pic {
float: left;
width: 120px;
height: 60px;
margin-right: 10px;
}
.pic img {
width: 100%;
border-radius: 15px;
}
.box p {
overflow: hidden;
text-overflow: ellipsis;
/* 彈性伸縮盒子模型顯示 */
display: -webkit-box;
/* 限制在一個(gè)塊元素顯示的文本的行數(shù) */
-webkit-line-clamp: 2;
/* 設(shè)置或檢索伸縮盒子對(duì)象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div>
<div>
<img src="images/img.jpg" alt="">
</div>
<p>河南一景區(qū)爆火，風(fēng)景優(yōu)美物價(jià)低，吸引許多游客前來打卡</p>
</div>
</body>
</html>
4. 行內(nèi)塊的巧妙運(yùn)用
<!DOCTYPE html>
<html>
<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>行內(nèi)塊的巧妙運(yùn)用</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;
}
.box .prev,
.box .next {
width: 85px;
}
.box .current,
.box .elp {
background-color: #fff;
border: none;
}
.box input {
width: 45px;
height: 36px;
border: 1px solid #ccc;
outline: none;
}
.box button {
width: 60px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div>
<a href="#"><<上一頁(yè)</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">...</a>
<a href="#">>>下一頁(yè)</a>
到第
<input type="text">
頁(yè)
<button>確定</button>
</div>
</body>
</html>
5. CSS三角強(qiáng)化
<!DOCTYPE html>
<html>
<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>CSS三角巧妙運(yùn)用</title>
<style>
.price {
width: 160px;
height: 24px;
border: 1px solid red;
margin: 100px 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;
top: 0;
right: 0;
width: 0;
height: 0;
/* 1. 只保留右邊的邊框有顏色 */
border-color: transparent #fff transparent transparent;
/* 2. 樣式都是solid */
border-style: solid;
/* 3. 上邊框?qū)挾纫?，右邊框?qū)挾壬孕?，其余邊框?yàn)? */
border-width: 24px 10px 0 0;
}
.origin {
font-size: 12px;
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div>
<span>
￥9.99
<i></i>
</span>
<span>￥9999</span>
</div>
</body>
</html>
效果圖：
不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，為了消除不同瀏覽器對(duì) HTML 文本呈現(xiàn)的差異，照顧瀏覽器的兼容，我們需要對(duì) CSS 進(jìn)行初始化
簡(jiǎn)單理解：CSS 初始化是指重設(shè)瀏覽器的樣式，也稱為 CSS reset
每個(gè)網(wǎng)頁(yè)都必須首先進(jìn)行 CSS 初始化
這里我們以京東 CSS 初始化代碼為例，打開京東商城源代碼，找到其 CSS 代碼
再找到初始化代碼
我們來看一下它都做了些什么工作
/* 把所有標(biāo)簽的內(nèi)外邊距清零 */
* {
margin: 0;
padding: 0
}
/* em 和 i 斜體的文字不傾斜 */
em,
i {
font-style: normal
}
/* 去掉 li 的小圓點(diǎn) */
li {
list-style: none
}
img {
/* border: 0 照顧低版本瀏覽器，如果圖片外面包含了鏈接會(huì)有邊框的問題 */
border: 0;
/* 取消圖片底側(cè)有空白縫隙的問題 */
vertical-align: middle
}
button {
/* 當(dāng)我們鼠標(biāo)經(jīng)過button按鈕的時(shí)候，鼠標(biāo)變成小手 */
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 {
/* 抗鋸齒性，讓文字顯示得更加清晰 */
-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
}
Unicode 編碼字體：
把中文字體的名稱用相應(yīng)的 Unicode 編碼來代替，這樣就可以有效地避免瀏覽器解釋 CSS 代碼時(shí)候出現(xiàn)亂碼
比如：
黑體 \9ED1\4F53
宋體 \5B8B\4F53
微軟雅黑 \5FAF\8F6F\96C5\9ED1
以上就是“高級(jí)CSS技巧有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
