CSS 小結筆記之滑動門技術

lykops 發布于2019-04-23 13:22 / 1556人閱讀

摘要：所謂的滑動門技術，就是指盒子背景能夠自動拉伸以適應不同長度的文本。大多數應用于導航欄之中，如微信導航欄具體實現方法如下首先每一塊文本內容是由標簽與標簽組成標簽只指定高度，而不指定寬度。

所謂的滑動門技術，就是指盒子背景能夠自動拉伸以適應不同長度的文本。即當文字增多時，背景看起來也會變長。

大多數應用于導航欄之中，如微信導航欄:

具體實現方法如下：

1、首先每一塊文本內容是由a標簽與span標簽組成

<a href="#">
        <span>span>
    a>

2、a標簽只指定高度，而不指定寬度。

3、a標簽設置好背景圖后，指定一個padding-left值，大小與左側半圓大小相同，（這樣保證左邊背景不變，中間的背景進行拉伸即可）。

4、span標簽同樣指定該背景圖片，不指定寬度，并且指定padding-right值將圖片右半部分顯示出來（這是要是定圖片位置為右）

具體代碼如下：

a {
            color: white;
            line-height: 33px;
            margin: 100px;
            display: inline-block;
            text-decoration: none;
            /* a不能給寬度 */
            /*  */
            height: 33px;
            background: url(Images/vx.png) no-repeat;
            padding-left: 15px;
        }
        
        a span {
            display: inline-block;
            height: 33px;
            background: url(Images/vx.png) no-repeat right;
            padding-right: 15px;
        }

span 的背景要指定為right

 <a href="#">
        <span>一span>
    a>
    <a href="#">
        <span>一句span>
    a>
    <a href="#">
        <span>一句話span>
    a>
    <a href="#">
        <span>一句長長的話span>
    a>
    <a href="#">
        <span>一句超級超級超級超級超級超級長的話span>
    a>

顯示結果為

可以發現隨著span標簽中文本長度的變化將會帶動背景圖片的拉伸。

云服務器 GPU云服務器通用滑動門 html多個滑動門 css滑動 css技術

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1785.html

CSS魔法堂：重拾Border之——更廣闊的遐想

摘要：也就是說我們操作的幾何公式中的未知變量，而具體的畫圖操作則由渲染引擎處理，而不是我們苦苦哀求設計師幫忙。前言 ?當CSS3推出border-radius屬性時我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來模擬圓角了，但發現border-radius還分水平半徑和垂直半徑，然后又發現border-top-left/right-radius的水平半徑之和大于元素寬度時，實際值會按比...

lily_wang 2019-08-30 13:01 評論0 收藏0
CSS Variables學習筆記

摘要：注本文首發于個人博客學習筆記。最近看了下變量，又名自定義屬性，跟大家分享一下我的學習筆記。使用自定義屬性來設置變量名，并使用特定的來訪問。二學習筆記聲明調用聲明方式變量聲明的方式非常簡單，如下，聲明了一個名叫的變量。注：本文首發于個人博客《CSS Variables學習筆記》。最近看了下CSS Variables（CSS變量，又名CSS自定義屬性），跟大家分享一下我的學習筆記。 ...

mudiyouyou 2019-08-29 15:11 評論0 收藏0
mip-semi-fixed 走走又停停

摘要：代碼設計融合了業界兩種實現方案，非下頁面中通過更換實現，下的頁面由于要特殊處理元素，所以會科隆一個節點，具體代碼參考開源代碼。子節點必選項需要滑動后懸浮的代碼的容器，組件科隆的也是這個節點。寫在前面 MIP 中懸浮元素的特殊情況其實組件上線已經有一段時間了，最開始看到這個需求是站長提交了一個這中功能的組件過來，不過看過代碼立刻就想到了 MIP 頁面的特殊性：從結果頁打開的 MIP ...

yiliang 2019-08-20 15:31 評論0 收藏0
CSS魔法堂：重拾Border之——不僅僅是圓角

摘要：擼代碼實現首頁檢驗單查詢成品通用標準審核圓角的何止是啊上圖的變成橢圓形了，而且中的文字好像飄到外面。我們可以看到兩邊相交所形成的矩形的對角線，將作為邊的相交點。前言 ?當CSS3推出border-radius屬性時我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來模擬圓角了，但發現border-radius還分水平半徑和垂直半徑，然后又發現border-top-left/right...

_Dreams 2019-08-30 13:01 評論0 收藏0
CSS 小結筆記之三種樣式表

摘要：內部樣式表內部樣式表一般寫在頭部，在標簽內用標簽括起來。外部樣式表外部樣式表是單獨將樣式寫到一個文件中，并在頭部引用。使用外部樣式表時要注意如果出現多重樣式時樣式覆蓋帶來的問題。CSS 引入共有三種方式：內部樣式表，內聯樣式（行內樣式）表，外部樣式表，當然也可以使用多重樣式內聯樣式內聯樣式表內聯樣式直接把樣式卸載html代碼行內，一般僅僅在此樣式僅僅只在當前元素上應用時使用，其他...

李文鵬 2019-04-23 13:30 評論0 收藏0