最初は、スライドドア、スライドドアの現実を体験するか、呼び出すことができます。
スライドドアは、背景に表示されます
美的のためのページを作成し、多くの場合、あなたは上昇し、沈んだ気持ちで、そのようなマイクロチャネルのナビゲーションバーなどの背景ページ要素のための特殊な形状を設定する必要があり、最大の問題は言葉の限りがないが、私たちがすることになっていますか？
中国の背景要素の特殊な形状のすべての種類を作るためにすることができ、適応的にどのくらいこのコンテンツの、CSSスライドドア技術の登場。その様々な特殊形状の背景が自由にスライド可能な、テキスト要素内のより良いユーザビリティに合うように延伸することができるという新たな角度ページの構築、。スライドドアのナビゲーションバーで最も一般的な多様性。
コア技術
コア技術は、CSSスプライト（主にバックグラウンドの位置）と、ナビゲーションバーの異なる単語に適応するために、ボックスのパディング気晴らしの幅を使用することです。
一般的な古典的なレイアウトは、このようなものです：
<li>
<a href="#">
<span>导航栏内容</span>
</a>
</li>CSSスタイル
* {
padding:0;
margin:0;
}
body{
background: url(images/wx.jpg) repeat-x;
}
.father {
padding-top:20px;
}
li {
padding-left: 16px;
height: 33px;
float: left;
line-height: 33px;
margin:0 10px;
background: url(./images/to.png) no-repeat left ;
}
a {
padding-right: 16px;
height: 33px;
display: inline-block;
color:#fff;
background: url(./images/to.png) no-repeat right ;
text-decoration: none;
}
li:hover,
li:hover a {
background-image:url(./images/ao.png);
}要約：
- 気晴らしに適した幅をパディング、左の背景を設定します。
- 背景スパン設定権が、残りの幅の拡張幅を続行するワード適切な軟化パディング。
- 全体のスパンは、ナビゲーションが含まれているので理由はクリック可能です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*1. a 是 设置 左侧 背景 （左门）*/
a {
/*因为我们是滑动门，左右推拉 跟文字内容多少有关系，此时需要用文字撑开盒子， 就要用到行内块*/
display: inline-block;
height: 33px;
background: url(images/to.png) no-repeat;
margin: 100px;
padding-left: 15px;
color: #fff;
}
/*2. span 是设置 右侧 背景 （右门）*/
a span {
display: inline-block;
height: 33px;
/*一定注意 span 需要背景图片 右对齐*/
background: url(images/to.png) no-repeat right top;
padding-right: 15px;
}
/*3 因为整个导航栏都是 链接 所以 a 要包含 span */
</style>
</head>
<body>
<a href="#">
<span>首页</span>
</a>
<a href="#">
<span>公司新闻</span>
</a>
</body>
</html>