CSS引き戸技術

コア技術をスライディング：

ためには背景がこのコンテンツの適応中国どのように多くの要素は、その自由ドロースライドできるという特別な様々な形状を作るために

ウィザードのCSS（主にバックグラウンドの場所）および拡張ボックスのパディング幅を使用してナビゲーションバーの異なる単語に対応するために、
一般的な古典的なレイアウト
< 李> 
    < A HREF = "＃" > 
    < スパン>导航内容</ スパン> 
    </ A > 
</ 李>

スタイルの設定
{
            マージン：100ピクセル;
            表示：インラインブロック。
            高さ：33px;
            背景：URL（画像/ ao.png）ノー・リピート;
            パディング左：15ピクセル;
            
}
スパン{
    高さ：33px;
    表示：インラインブロック。
    背景：URL（画像/ ao.png）ノー・リピート右;
    パディング右：15ピクセル;
}
要約： 
【選択図】図1左側部分、適当な伸延幅パディング
残りの幅の拡張幅を続行するワード適切で軟化背景右、パディングを設定2.スパン
全体のスパンは、ナビゲーションが含まれているので、なぜ3.理由がクリック可能です

マイクロチャンネルナビゲーションバーの演習

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < タイトル>ドキュメント</ タイトル> 
    < スタイル> 
        * { 
            マージン：0 ; 
            パディング：0 ; 
        } 
        UL { 
            リストスタイル：なし。
        } 
        体{ 
            背景：URL（画像/ wx.jpg）リピート-X ; 
        } 
        .nav { 
            高さ：75px ;
            

        } 
        .nav李{ 
            フロート：左; 
            マージン：0 15ピクセル; 
            パディングトップ：21px ; 
        } 
        .navのLi A { 
            表示：ブロック。
            高さ：33px ; 
            背景：URL（画像/ to.png）ノー・リピート; 
            色：#FFF ; 
            フォントサイズ：14px ; 
            行の高さ：33px; 
            テキスト装飾：なし; 
            パディング左：15ピクセル;

        } 
        .navのLi：ホバー{ 
            背景画像：のURL（画像/ ao.png） 。
        } 
        .navのLi：ホバースパン{ 
            背景画像：URL（画像/ ao.png） 。
        }

        .nav李スパン{ 
            表示：ブロック。
            行の高さ：33px ; 
            背景：URL（画像/ to.png）ノー・リピート右; 
            パディング右：15ピクセル;

        }

    </ スタイル> 
</ ヘッド> 
< 身体> 
    < divのクラス= "NAV" > 
        < UL > 
            < 李> 
                < A HREF = "＃" > 
                    < スパン>首页</ スパン> 
                </ A > 
            </ 李> 
            < 李> 
                < A HREF = "＃" > 
                    < スパン>帮助与反馈</ スパン>
                </ A >
            </ 李> 
                < 李> 
                < A HREF = "＃" > 
                    < スパン>公众平台</ スパン> 
                </ A >
            
            </ 李> 
            < リチウム> 
                < A HREF = "＃" > 
                    < スパン>帮助与反馈</ スパン> 
                </ A > 
            </ 李> 
                < リチウム> 
                < A HREF = "＃" > 
                    < スパン>公众平台< / スパン> 
                </ A >
            
            </ 李> 
        </ UL > 
    </ DIV > 
</ ボディ> 
</ HTML >

コードの表示