字體圖標(biāo)（解決精靈圖的缺點(diǎn)）
1.輕量級
2.靈活性
3.兼容性（幾乎支持所有的瀏覽器）
注意不能代替精靈技術(shù)埂软，比如復(fù)雜的圖片還是用精靈圖做
- 下載
- icomoon（國外服務(wù)器）https://icomoon.io/
- iconfont阿里字體庫
-
引入
把下載的fonts 放到項目根目錄
通過css的方式引入
image.png
css 三角制作
當(dāng) div 盒子width,hight 都是0px 時示罗，設(shè)置4條邊的顏色即可（可以把其他三邊設(shè)置透明）
image.png
css用戶界面樣式
所謂的界面樣式，就是更改一些用戶操作樣式精算，以便提高更好的用戶體驗
-
更改用戶的鼠標(biāo)樣式
2.表單輪廓
3.防止表單域拖拽
image.png
image.png
image.png
vertical-align屬性（圖片和文字垂直居中鲤嫡，和行內(nèi)塊或者行內(nèi)元素搭配使用）
image.png
解決圖片底側(cè)空白縫隙
image.png
溢出的文字省略號顯示
image.png
image.png
image.png
image.png
此處更推薦后臺人員做這個效果钙畔，因為后臺人員可以設(shè)置顯示多少字蕴忆，操作更簡單
頁面布局技巧
巧妙利用一個技術(shù)更好更快的布局：
1.margin負(fù)值的運(yùn)用
image.png
image.png
image.png
image.png
相對定位會壓住其他的盒子
2.文字圍繞浮動元素
image.png
image.png
