0

ここにあるようなナビゲーション バーを作成する方法を見つけようとしています: navbar

しかし、ほとんど初心者なので、ここでどの方法を使用すればよいかわかりません。それは UL なのかテーブルなのか、また、リンク間にこれらの境界線を設定する方法もわかりません。リンクはおそらく画像としてそこに挿入されるはずです。

ここに独自のコードを書いて最初に調べてもらうとより役立つことはわかっていますが、このテーブルとリストのどちらを使用する必要があるかさえわかりません。ですから、誰かが最初にそれについて提案をくれて、それから私たちがさらに議論できるコードを書くことができれば、本当に感謝しています.

ありがとう

4

2 に答える 2

0

私はメニューに UL を使用することを好みますが、テーブルを使用した方が効果が得られやすいようです。

2 行 5 列の表を作成してみてください。

および: 最初の行の下枠を削除します。2 行目の上枠を削除します。2 行目のセルの境界線。

また、各行の高さを設定する必要がある場合もあります。

于 2013-02-03T13:17:16.220 に答える
0

これには 2 つの方法があります。1 つ目は、ナビゲーション ボタンの背景として設定される小さな縦線の画像です。

もう 1 つの方法は、高さをこの境界線の高さと設定してタグ内<span>に絶対配置することです。<a>top: 0left:0

HTML:

<ul>
    <li><a href="#"><span></span>Nav 1</a></li>
    <li><a href="#"><span></span>Nav 2</a></li>
    <li><a href="#"><span></span>Nav 3</a></li>
    <li><a href="#"><span></span>Nav 4</a></li>
</ul>

CSS:

ul {
    float:left; 
    border: 1px solid #000;
}

ul li {
    list-style-type: none;
    float:left;
}

ul li a {
    display:block; 
    padding: 10px;
    position:relative; 
}

ul li span {
    border-left: 1px solid #000;
    height: 10px; <!-- as long as you want -->
    position:absolute; 
    top: 0; 
    left: 0;
}

それをコピーしてエディターに貼り付けて、どのように見えるかを確認できます。

また、ナビゲーションには'sを使用<ul>します。<li>は推奨されておらず、その目的で使用するの<table>は適切ではありません。

于 2013-02-03T13:06:52.827 に答える