1

私は現在、私が作成しているWebページにこれを持っています:

HTML

<div id="pageHeader">
    <nav id="siteNav">
        <ul>
            <li id="currentNavTab"><a href="index.php"><span>Home</span></a></li>
            <li><a href="services.php"><span>Services</span></a></li>
            <li><a href="gallery.php"><span>Gallery</span></a></li>
            <li class="LastNavTab"><a href="contact.php"><span>Contact</span></a></li>
        </ul>
    </nav>
</div>

CSS

nav#siteNav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}

nav#siteNav ul {
padding: 0;
background-image: url('NavTabsBG.jpg');
box-shadow: inset 0px 2px 8px 2px rgba(0, 0, 0, 0.4);
border-radius: 8px;
}

nav#siteNav li {
display: inline;
width: 240px;
padding-left: 50px;
padding-right: 50px;
}

nav#siteNav a {
display: inline-block;
padding: 10px;
color: rgb(255, 235, 200);
font-size: 36px;
text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.6);
}

コードの結果は次のようになります。 現在のウェブページの外観

現在選択されているタブがハイライトされるようにしたいと思います。ハイライトは、ビットマップにするか、背景グラデーションで生成することができます。このモックアップのようなもの：

ページをどのように表示したいか

レイアウトに問題があります。背景をliの後ろに配置しようとしましたが、正しく表示されませんでした:

うまくいかなかったこと

Web 開発の比較的素人なので、これを修正して希望する結果を得る方法がわかりません。追加の問題は、丸みを帯びた境界線内でハイライトをマスクしたいということです。どんな助けでも大歓迎です！

4

1 に答える 1

1

これがフィドルです。http://jsfiddle.net/57VC8/1/

私がしたこと：

  1. li に display inline-block を設定します。なんで？インラインブロックまたはブロック (これらの表示のいずれかを持つ要素) をインライン要素内に配置すると、理解しにくい問題が発生する可能性があります。
  2. a要素ではなく要素にすべての幅とパディングを設定しliます。
  3. 現在選択されているリンクにクラス「current」を追加しました。これにより、必要なスタイルを適用できます。
于 2012-07-26T21:04:21.030 に答える