CSS-實戰-梯形背景導航

java小工匠發表於2017-07-13

1、實現效果

梯形背景圖導航,如下圖。由於導航條文字多少不固定,因此面臨的挑戰是,當文字內容增加時,中間的背景寬度自動拉伸。CSS3的出現實現這樣的效果相對變的容易,本文使用背景圖定位的知識,加上CSS其他知識。介紹CSS2實現這樣效果的一種思路。

梯形背景導航

2、總體實現思路

(1)準備背景圖
注意圖片,一定是透明背景格式的,可以另存為下圖。

透明背景圖

(2)建立A標籤巢狀B標籤的導航選單

<a href="javascript:void(0);" class="menu">
    <b>測試</b>
</a>

(3)設定A標籤的左邊距,背景圖從左向右顯示。
A標籤紅色區域的背景顯示出來,其他區域背景讓B標籤的背景將其覆蓋。

A標籤顯示區域

(4)設定B標籤的右邊距,背景圖從右向左顯示。
B標籤,通過文字的寬度讓盒子變寬,同時設定B的右邊距,背景圖從右向左顯示。

B標籤顯示區域

(5)說明:A標籤背景圖主要顯示左邊部分,B標籤背景圖主要是顯示右邊和中間部分,AB兩個標籤的背景圖合併,可以顯示最終理想效果。

3、細節程式碼實現步驟

第一步: 設定A的屬性
(1):將A標籤為浮動標籤,A標籤的高度為25px.
(2):將A標籤的坐邊距設定為25px,可以容納背景圖的弧度.
(3):將背景圖從左邊定位,上下不做偏移.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>梯形導航-第一步</title>
    <style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    .header{
        width: 80%;
        height: 50px;
        background-color: #ccc;
        overflow:hidden;
        margin: 0px auto;
        border: 1px solid #ccc;
    }
    .dhbar{
        width: 70%;
        margin-top: 25px;
        margin-right:25px;
        float: right;
        background: white;

    }
    .dhbar a {
        float: left;
        cursor:pointer;
        height: 25px;
        padding: 0px 0px 0px 25px;
        margin: 0px 10px;
        font-size: 13px;
        text-decoration: none;
        color: black; 
        background:url(dh.png) no-repeat left 0px;
        border: 1px solid red;
    }

    .dhbar b{
        border: 1px solid blue;
    }
   
    </style>
</head>
<body>
    <div class="header">
        <div class="dhbar">
            <a href="javascript:void(0);" class="menu">
                <b>測試</b>
            </a>
            <a href="javascript:void(0);" class="menu">
                <b>多個文字測試</b>
            </a>
            <a href="javascript:void(0);" class="menu">
                <b>測試</b>
            </a>
            <a href="javascript:void(0);" class="menu">
                <b>測試</b>
            </a>
        </div>
    </div>
</body>
</html>
設定A元素後的樣式

第二步: 設定B的基本屬性
(1):設定B為塊級元素.
(2):設定B元素的高度
(3):設定B元素的文字垂直居中顯示,line-height與高度一樣
(4):設定B元素的右邊距為25px.

  .dhbar b{
        border: 1px solid blue;
        font-weight: normal;
        display:inline-block;
        height: 25px;
        line-height: 25px; 
        z-index:1;
        color: black; 
        padding: 0px 25px 0px 0px;
    }
設定B元素後的樣式

第三步:新增B元素背景圖

    .dhbar b{
        border: 1px solid blue;
        font-weight: normal;
        display:inline-block;
        height: 25px;
        line-height: 25px; 
        z-index:1;
        color: black; 
        padding: 0px 25px 0px 0px;
        background:url(dh.png) no-repeat right 0px;
    }
B元素新增背景圖

第四步:去掉邊框樣式

最終效果

原始碼 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>梯形導航</title>
    <style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    .header{
        width: 80%;
        height: 50px;
        background-color: #ccc;
        overflow:hidden;
        margin: 0px auto;
        border: 1px solid #ccc;
    }
    .dhbar{
        width: 70%;
        margin-top: 25px;
        margin-right:25px;
        float: right;
        background: white;

    }
    .dhbar a {
        float: left;
        cursor:pointer;
        height: 25px;
        padding: 0px 0px 0px 25px;
        margin: 0px 10px;
        font-size: 13px;
        text-decoration: none;
        color: black; 
        background:url(dh.png) no-repeat left 0px;
         
    }

    .dhbar b{
        font-weight: normal;
        display:inline-block;
        height: 25px;
        line-height: 25px; 
        z-index:1;
        color: black; 
        padding: 0px 25px 0px 0px;
        background:url(dh.png) no-repeat right 0px;
    }
     
    
    
    </style>
</head>
<body>
    <div class="header">
        <div class="dhbar">
            <a href="javascript:void(0);" class="menu">
                <b>測試</b>
            </a>
            <a href="javascript:void(0);" class="menu">
                <b>多個文字測試</b>
            </a>
            <a href="javascript:void(0);" class="menu">
                <b>測試</b>
            </a>
            <a href="javascript:void(0);" class="menu">
                <b>測試</b>
            </a>
        </div>
    </div>
</body>
</html>

4、新增滑鼠移動後效果

原始碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>梯形導航</title>
    <style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    .header{
        width: 80%;
        height: 50px;
        background-color: #ccc;
        overflow:hidden;
        margin: 0px auto;
        border: 1px solid #ccc;
    }
    .dhbar{
        width: 70%;
        margin-top: 25px;
        margin-right:25px;
        float: right;
        background: white;

    }
    .dhbar a {
        float: left;
        cursor:pointer;
        height: 25px;
        padding: 0px 0px 0px 25px;
        margin: 0px 10px;
        font-size: 13px;
        text-decoration: none;
        color: black; 
         
    }

    .dhbar b{
        font-weight: normal;
        display:inline-block;
        height: 25px;
        line-height: 25px; 
        z-index:1;
        color: black; 
        padding: 0px 25px 0px 0px;
    }
     
    .dhbar a:hover{
        background:url(dh.png) no-repeat left 0px;
    }
    
    .dhbar a:hover b{
        color :red;
        background:url(dh.png) no-repeat right 0px;
    }
    
    </style>
</head>
<body>
    <div class="header">
        <div class="dhbar">
            <a href="javascript:void(0);" class="menu">
                <b>測試</b>
            </a>
            <a href="javascript:void(0);" class="menu">
                <b>多個文字測試</b>
            </a>
            <a href="javascript:void(0);" class="menu">
                <b>測試</b>
            </a>
            <a href="javascript:void(0);" class="menu">
                <b>測試</b>
            </a>
        </div>
    </div>
</body>
</html>

執行效果:

image.png

5、挑戰實現如下效果

(1)可以用本文的思路(瀏覽器支援CSS3後,本文的思路基本淘汰)。
(2) 使用CSS3的新特性實現。

image.png
image.png
image.png

素材圖片

dh.png


相關文章