0

次のスタイルに従って CSS ナビゲーションを作成する必要があります。

望ましい外観

ここに画像の説明を入力

以下は私が行ったデザインです： -

1) 展示物 A - スプライトを使用して作成

ここに画像の説明を入力

注:メニュー項目の配置は無視してください

長所：うまく機能し、望ましい外観を持っています

短所:別のメニュー項目を追加する必要がある場合、その特定のメニュー項目用に別の画像を手動で作成する必要があります。すなわち。拡張不可

2)別紙B

ここに画像の説明を入力

長所:非常に拡張性があります。別のメニュー項目を追加する必要がある場合、新しい余分な画像を作成する必要はありません。メニュー名のみを HTML コードに入力する必要があります。

短所:ホバー効果は、目的の外観と同じではありません。

私の要件

Exhibit Aのホバー効果とともにExhibit Bを使用しますが、メニュー項目の作成時に余分な画像を追加する必要はありません (これは Exhibit A で発生しますが、望ましいホバー効果があります)。

私のアプローチ：

  1. 資料 Bの作業を開始する
  2. メニュー項目が 1 つの場合のホバー効果には、3 つの画像を使用します

a) 一番左端 一番左端

b) 中間領域の繰り返しスライス 中央領域の繰り返しスライス

c) 右端 一番右端

これは正しいです ？

これは可能ですか？

より良い方法はありますか？チュートへのリンクは問題ありません。

ありがとう

1] 資料 A の CSS コード

@charset "UTF-8";
* {
margin:0;
padding:0;
list-style: none;
}

ul {
list-style: none;
margin: 0;
padding: 0;
}

img {
    border: none;
}

.clear {
clear:both;
}

.nav-container {
width: 960px;
}
#navMenu{
display: inline;
margin: 0;
padding: 0px;
position: relative;
z-index: 5;
}
#navMenu li{
float: left;
display: inline;
}

#navMenu li.navRepeat{
float: left;
display: inline;
background-image:url("../images/navigation_repeat.gif");
width:425px;
height:40px;
}

#navMenu li.navRepeatEnd{
float: right;
display: inline;
background-image:url("../images/navigation_repeat_end.gif");
width:1px;
height:40px;
}

a.navReservations{
display:block;
float:left;
width:89px;
height:40px;
background-repeat:no-repeat;
background: url("../images/reservations.gif")
}

a.navReservations:hover{
background: url("../images/reservations.gif") 0 40px;
}

a.navRentals{
display:block;
float:left;
width:62px;
height:40px;
background-repeat:no-repeat;
background: url("../images/rentals.gif")
}

a .navReservations {
float: left;
display: inline;
height: 100px;
width: 400px;
}

a.navRentals:hover{
background: url("../images/rentals.gif") 0 40px;
}

a.navTariffs{
display:block;
float:left;
width:59px;
height:40px;
background-repeat:no-repeat;
background: url("../images/tariffs.gif")
}

a.navTariffs:hover{
background: url("../images/tariffs.gif") 0 40px;
}

a.navFleet{
display:block;
float:left;
width:64px;
height:40px;
background-repeat:no-repeat;
background: url("../images/fleet.gif")
}

a.navFleet:hover{
background: url("../images/fleet.gif") 0 40px;
}

a.navTools{
display:block;
float:left;
width:56px;
height:40px;
background-repeat:no-repeat;
background: url("../images/tools.gif")
}

a.navTools:hover{
background: url("../images/tools.gif") 0 40px;
}

a.navReports{
display:block;
float:left;
width:71px;
height:40px;
background-repeat:no-repeat;
background: url("../images/reports.gif")
}

a.navReports:hover{
background: url("../images/reports.gif") 0 40px;
}

a.navSystem-Management{
display:block;
float:left;
width:133px;
height:40px;
background-repeat:no-repeat;
background: url("../images/system_management.gif")
}

a.navSystem-Management:hover{
    background: url("../images/system_management.gif") 0 40px;
}

2] 展示 B の CSS コード 

#navigation {
width: 959px;
height: 36px;
margin: 0;
padding: 0;
background-image: url(images/navigation-bg.gif);
background-repeat: no-repeat;
background-position: left top;
border: 1px solid #CCC;
} 
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
} 
#navigation ul li {
display: inline;
margin: 0px;
} 
#navigation ul li a {
height:27px;
display: block;
float: left;
color: #000;
text-decoration: none;
font-family: Arial;
font-size: 12px;
font-weight: bold;
background-image: url(images/navigation-separator.gif);
background-repeat: no-repeat;
background-position: right center;
padding-top: 6px;
padding-right: 15px;
padding-left: 15px;
vertical-align: 10%;
padding-bottom: 4px;
} 

#navigation ul li a:hover {
color:#FFF;
background-image: url(images/navigation-hover.gif);
background-repeat: repeat-x;
background-position: left top;
}

#navigation ul li#active a {
color:#363636;
background: url(images/navigation-hover.png) repeat-x left top;
}
4

1 に答える 1

1

技術的には、幅の広い左 + タブの本体と右側の 2 つのスプライトのみが必要です。ワイドとは、つまり、400px またはヒットするとは予想されない任意のワイド サイズです。使いやすさのためにキロバイトを交換しています。次のようなマークアップを使用することで、これを実現できます。

<ul class="list">
    <li><a href="#">Text</a></li>
</ul>

次のようなcssを使用：

ul.list
{
    list-style-type: none;
    margin: 0;
}
ul.list li 
{
    float: left;
    background: url(leftpluswide.png) top left no-repeat;
}
ul.list li a
{
    background: url(right.png) top right no-repeat;
}

唯一の注意点は、right.png が li の背景と重なるため、透過性がないことを確認する必要があることです。

また、完全を期すために、li と a に高さを適用する必要がある場合があります (それを取得するには、display:inline-block または line-height が必要になる可能性があります)。

于 2011-02-01T06:27:36.813 に答える