WEB前端第十九課——雪碧圖&滑動門
1.字體圖標css
獲取途徑：html
① 免費網站下載字體web
② 收費網站購買字體使用權chrome
③ 本身設計字體（要有設計背景）瀏覽器
2.阿里巴巴 IconFont圖標庫服務器
URL：https://www.iconfont.cn/home/index，須要註冊帳號後才能下載使用微信
圖標下載成功後，能夠經過編輯器直接調用app
引用方式（如下內容摘自iconfont使用說明）：編輯器
① Unicode 引用，Unicode 是字體在網頁端最原始的應用方式，特色：svg
兼容性最好，支持 IE6+，及全部現代瀏覽器。
支持按字體的方式去動態調整圖標大小，顏色等等。
可是由於是字體，因此不支持多色。只能使用平臺裏單色的圖標，就算項目裏有多色圖標也會自動去色。
注意：新版 iconfont 支持多色圖標，這些多色圖標在 Unicode 模式下將不能使用，若是有需求建議使用symbol 的引用方式
②
font-class 引用，是 Unicode 使用方式的一種變種，主要是解決 Unicode 書寫不直觀，語意不明確的問題，特色：
兼容性良好，支持 IE8+，及全部現代瀏覽器。
相比於 Unicode 語意明確，書寫更直觀。能夠很容易分辨這個 icon 是什麼。
由於使用 class 來定義圖標，因此當要替換圖標時，只須要修改 class 裏面的 Unicode 引用。
不過由於本質上仍是使用的字體，因此多色圖標仍是不支持的。
③ Symbol 引用，這是一種全新的使用方式，應該說這纔是將來的主流，也是平臺目前推薦的用法。這種用法實際上是作了一個 SVG 的集合，與另外兩種相比具備以下特色：
支持多色圖標了，再也不受單色限制。
經過一些技巧，支持像字體那樣，經過 font-size, color 來調整樣式。
兼容性較差，支持 IE9+，及現代瀏覽器。
瀏覽器渲染 SVG 的性能通常，還不如 png。
3.Unicode引用 測試代碼
/* CSS代碼 （來自iconfont） */
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1596700948491'); /* IE9 */
src: url('iconfont.eot?t=1596700948491#iefix') format('embedded-opentype'), /* IE6-IE8 */
url("data:application/x-font-woff2;charset=utf-8;") format('woff2'),
url('iconfont.woff?t=1596700948491') format('woff'),
url('iconfont.ttf?t=1596700948491') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1596700948491#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* HTML代碼 */
<html>
<head lang="en">
<meta charset="utf-8">
<link rel="stylesheet" href="images/icon/iconfont.css"/>
<title>CSS_iconfont</title>
</head>
<body>
<ul type="none">
<li><i class="iconfont">&# xe7ec;</i>新浪微博</li>
<li><i class="iconfont">&# xe63b;</i>QQ空間</li>
<li><i class="iconfont">&# xe615;</i>騰訊微博</li>
<li><i class="iconfont">&# xe630;</i>購物車</li>
</ul>
</body>
</html>
4.font class引用 測試代碼
<html>
<head lang="en">
<meta charset="utf-8">
<link rel="stylesheet" href="images/icon/iconfont.css"/>
<title>CSS_iconfont</title>
</head>
<body>
<ul type="none">
<li class="iconfont icon-xinlangweibo1">新浪微博</li>
<li class="iconfont icon-QQkongjian1">QQ空間</li>
<li class="iconfont icon-tubiaozhizuomoban">騰訊微博</li>
<li class="iconfont icon-shopshoppingco">購物車</li>
</ul>
</body>
</html>
5.symbol引用 測試代碼
/* 引用iconfont使用說明 */
<html>
<head lang="en">
<meta charset="utf-8">
<!-- <link rel="stylesheet" href="images/icon/iconfont.css"/>-->
<title>CSS_iconfont</title>
<script src="Images/icon/iconfont.js"></script>
<style>
.icon {
width: 12em;
height: 2em;
vertical-align: -2.15em;
/*fill: currentColor;*/
/*overflow: hidden;*/
}
</style>
</head>
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xinlangweibo"></use>
<text x="110" y="30" fill="red">新浪微博</text>
</svg>
</body>
</html>
6.CSS sprites雪碧圖，將多張圖片、圖標等合併爲一張整圖，而後經過 background-position 進行背景圖片定位
Sprites圖片整合能夠有效減小服務器請求次數，從而提升頁面加載效率
整合圖片的小工具網上有不少，PC端和在線的都有，能夠自動生成CSS代碼，操做便捷
sprites測試代碼以下（經過Satyr Sprite工具整合圖片，感謝工具做者http://shen.li/blog/post/C_sharp/CSS_Satyr.html）
<html>
<head lang="en">
<meta charset="utf-8">
<title>CSS_sprites</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid #55a532;
background-image: url("images/number/compose.png");
float: left;
margin-left: 10px;
}
.pic_1 {background-position: -0px -0px; width: 200px; height: 200px; }
.pic_2 {background-position: -202px -0px; width: 200px; height: 200px; }
.pic_3 {background-position: -405px -0px; width: 200px; height: 200px; }
.pic_4 {background-position: -610px -0px; width: 200px; height: 200px; }
.pic_5 {background-position: -815px -0px; width: 200px; height: 200px; }
</style>
</head>
<body>
<div class="pic_1">壹</div>
<div class="pic_2">貳</div>
<div class="pic_3">叄</div>
<div class="pic_4">肆</div>
<div class="pic_5">伍</div>
</body>
</html>
7.滑動門，利用CSS背景圖像的可層疊性，經過元素寬度的可伸縮性建立特定的動態效果
經過滑動門技術，設計的導航菜單兼具傳統佈局的呈現效果，但菜單的擴展性更強，能夠根據內容多少自動調節
<html>
<head lang="en">
<meta charset="utf-8">
<title>CSS_滑動門</title>
<style>
.left{
height: 36px;
/*不能設置元素寬度*/
margin: 100px 200px 0px;
text-decoration: none;
color: white;
display: inline-block;
background: url("images/tools/nav_cont.png") no-repeat;
}
.right{
height: 36px;
padding: 0px 10px;
line-height: 36px;
background: url("images/tools/nav_cont.png") right;
}
</style>
</head>
<body>
<a href="#" class="left">
<span class="right">聯繫咱們</span>
</a>
</body>
</html>
8.微信PC端官網導航欄製做
<html>
<head lang="en">
<meta charset="utf-8">
<title>WeChat_nav</title>
<style>
body{
margin: 0px;
}
.base{
width: 100%;
height: 1022px;
margin: 0;
background: url("Images/tools/wx_bkg.jpg") repeat-x;
}
.container{
width: 988px;
height: 1022px;
margin: 0px 297.5px;
padding: 0px 10px;
/*background-color: hotpink;*/
}
/* logo圖片尺寸，須要針對 img標籤進行設置，不能針對 a標籤設置 */
.logo{
width: 129.63px;
height: 44px;
margin-top: 14px;
float: left;
}
.menu{
width: 748px;
height: 54px;
margin: 0px;
padding: 21px 0 0;
float: right;
}
.button{
height: 33px;
margin: 0;
list-style-type: none;
float: left;
}
.button_left{
/*a標籤與span標籤爲行內元素，經過display屬性轉換爲行內塊級元素，再設置行高*/
display: inline-block;
height: 32.5px;
line-height: 32.5px;
padding-left: 13px;
color: white;
font-size: 14px;
text-decoration: none;
float: right;
}
.button_right{
display: inline-block;
height: 32.5px;
line-height: 32.5px;
padding-right: 10px;
float: right;
}
.button:hover .button_left{
background: url("Images/tools/wx_concave.png") no-repeat;
}
.button:hover .button_right{
background: url("Images/tools/wx_concave.png") right;
}
.menu li:first-child>.button_left{
background: url("Images/tools/wx_convex.png") no-repeat;
}
.menu li:first-child>a .button_right{
background: url("Images/tools/wx_convex.png") right;
}
</style>
</head>
<body>
<div class="base">
<div class="container">
<a href="#">
<img class="logo" src="Images/tools/wx_logo.png" alt="">
</a>
<ul class="menu">
<li class="button">
<a href="#" class="button_left">
<span class="button_right">首頁</span>
</a>
</li>
<li class="button">
<a href="#" class="button_left">
<span class="button_right">幫助與反饋</span>
</a>
</li>
<li class="button">
<a href="#" class="button_left">
<span class="button_right">公衆平臺</span>
</a>
</li>
<li class="button">
<a href="#" class="button_left">
<span class="button_right">開放平臺</span>
</a>
</li>
<li class="button">
<a href="#" class="button_left">
<span class="button_right">微信支付</span>
</a>
</li>
<li class="button">
<a href="#" class="button_left">
<span class="button_right">微信廣告</span>
</a>
</li>
<li class="button">
<a href="#" class="button_left">
<span class="button_right">企業微信</span>
</a>
</li>
<li class="button">
<a href="#" class="button_left">
<span class="button_right">表情開放平臺</span>
</a>
</li>
<li class="button">
<a href="#" class="button_left">
<span class="button_right">微信網頁版</span>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
相關文章
- 1. web前端sprite，精靈圖，雪碧圖
- 2. 前端自動生成雪碧圖
- 3. web前端-CSS-滑動門
- 4. WEB前端第十七課——CSS動畫
- 5. Web優化之雪碧圖
- 6. 移動端使用「雪碧圖」
- 7. 移動端適配CSS Sprites雪碧圖
- 8. WEB前端第九課——div背景
- 9. 雪碧圖動畫實現
- 10. 雪碧圖
- 更多相關文章...
- • ionic 滑動框 - ionic 教程
- • jQuery Mobile 表單滑動條 - jQuery Mobile 教程
- • 算法總結-滑動窗口
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 升級Gradle後報錯Gradle‘s dependency cache may be corrupt (this sometimes occurs
- 2. Smarter, Not Harder
- 3. mac-2019-react-native 本地環境搭建(xcode-11.1和android studio3.5.2中Genymotion2.12.1 和VirtualBox-5.2.34 )
- 4. 查看文件中關鍵字前後幾行的內容
- 5. XXE萌新進階全攻略
- 6. Installation failed due to: ‘Connection refused: connect‘安卓studio端口占用
- 7. zabbix5.0通過agent監控winserve12
- 8. IT行業UI前景、潛力如何？
- 9. Mac Swig 3.0.12 安裝
- 10. Windows上FreeRDP-WebConnect是一個開源HTML5代理，它提供對使用RDP的任何Windows服務器和工作站的Web訪問
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. web前端sprite，精靈圖，雪碧圖
- 2. 前端自動生成雪碧圖
- 3. web前端-CSS-滑動門
- 4. WEB前端第十七課——CSS動畫
- 5. Web優化之雪碧圖
- 6. 移動端使用「雪碧圖」
- 7. 移動端適配CSS Sprites雪碧圖
- 8. WEB前端第九課——div背景
- 9. 雪碧圖動畫實現
- 10. 雪碧圖