滑動門出現的背景---實例微信導航欄（a盒子裏麪包span盒子，文字寫在span裏）

時間 2019-11-14

標籤滑動出現背景實例微信導航盒子裏面 span 文字寫在欄目 CSS 简体版

原文原文鏈接

需求：

製做網頁時，爲了美觀，經常須要爲網頁元素設置特殊形狀的背景，好比微信導航欄，有凸起和凹下去的感受，其中最大的問題是字數不一樣，如何作？css

解決：

用一個a包含span來製做，字數放在span裏面。html

此時span裏面字數多一點，也能夠撐開盒子，實現這個效果。（用到了css spirit 精靈圖和滑動門技術）微信

實例：微信導航欄代碼

核心：

1. a 盒子裏麪包 span 盒子測試

2. a盒子裏，調整背景圖片位置，設置成：綠色左半邊url

2. span盒子裏，也調整背景圖片的位置，設置成：紅色右半邊，再span裏面放文字，文字多，就自動撐開（像滑動門推開的效果）spa

（所用到的背景圖片以下：code

）htm

代碼：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7     a {
 8         margin: 100px;
 9         height: 33px;
10         display: inline-block;
11         background: url(images/to.png) no-repeat;
12         color: #fff;
13         text-decoration: none;
14         line-height: 33px;
15         padding-left: 15px;
16     }
17     span {
18         display: inline-block;
19         height: 33px;
20         background: url(images/to.png) no-repeat right;
21         padding-right: 15px;
22     }
23     </style>
24 </head>
25 <body>
26     <a href="#">
27         <span>你好我是測試字數特別多的首頁導航</span>
28     </a>
29 </body>
30 </html>