CSS-實戰-梯形背景導航

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

原文網址 : https://flycode.co/archives/129615

CSS

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的新特性實現。