滑動門門技術

所謂滑動門技術就是利用背景圖片的分割，實現不同內容長度下，按鈕的可伸縮性。

具體思路：根據文本自適應大小，我們可用兩個獨立的背景圖像來創造它。一個在左邊，一個在右邊。把這兩幅圖像想象成兩扇可滑動的門，它們滑到一起并交迭，占據一個較窄的空間；或者相互滑開，占據一個較寬的空間。

所用圖片：

a{height: 92px;line-height: 92px;padding-right: 52px;display: inline-block;background: url(Sliding.png) no-repeat right top; } span{display: inline-block;height: 92px;line-height: 92px;background: #fff url(Sliding.png); } span{padding:0px 10px 0px 30px;font-size: 20px;font-weight: bold;color: #fff; } <a href="javascript:;"><span>點擊進入首頁</span></a> <a href="javascript:;"><span>更多詳情</span></a> <a href="javascript:;"><span>聯系</span></a>

執行結果：

字體圖標

通常下載字體圖標網站：
IcoMoon、iconfont、fontello

> SVG （可縮放矢量圖形）

可縮放矢量圖形是基于可擴展標記語言（標準通用標記語言的子集），用于描述二維矢量圖形的一種圖形格式。它由萬維網聯盟制定，是一個開放標準。

svg格式，是基于svg字體渲染的一種格式。

> 操作步驟

1，打開下載字體網站，以IcoMoon為例，點擊右上角IcoMoon App按鈕。
2，上傳以前使用的字體的selection.json文件（第一次使用字體圖標忽略此步驟）。


3，點擊下面需要使用的字體圖標。

然后點擊Generate Font按鈕，再點擊Download下載。
4，打開壓縮包把fonts文件夾與style.css文件復制到項目目錄，即可使用。
使用方案一：
引入style.css文件后，為span標簽添加相應圖標的class即可：

注：span標簽內就不要再加其他內容了

<span class="icon-image"></span>

使用方案二
寫入css樣式：

@font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot?e2ufrf'); src:url('fonts/icomoon.eot?e2ufrf#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?e2ufrf') format('truetype'), url('fonts/icomoon.woff?e2ufrf') format('woff'), url('fonts/icomoon.svg?e2ufrf#icomoon') format('svg'); font-weight: normal; font-style: normal; } i{font-family: 'icomoon';font-style: normal;/*可忽略不寫*/vertical-align: -10%;/*可忽略不寫*/ } <p><i>?</i> 上傳圖片</p>

注：i標簽內的內容，是在壓縮文件內有個demo.html，其內容中復制到的（復制“?”內容）

執行結果：

總結

以上是生活随笔為你收集整理的前端笔记—从入门到坟墓[CSS][滑动门技术与字体图标][11]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。