0

navbar タブのスタイルを設定しようとしています。動作するコードが 2 つありますが、個々のタブをさらに制御する必要があり、その方法がわかりません。

これらのタブは、ヘッダーの下と右端にあります。そして、最初のタブのみの左下隅を丸くしようとしています。以下の 2 つのコード スニペットは両方とも、ナビゲーション バーの各タブの左下を丸めます。

各タブを制御し、各タブを個別にスタイルできるようにする適切なコードを見つけたいと思います。以下の 2 つのスニペットでは、どちらを改善した方がよいのか、何を追加するべきなのかわかりません。

.custom .menu, .custom .menu a, .custom .menu li ul {
-moz-border-radius-bottomleft:.5em; font-weight:bold;
-webkit-border-bottom-left-radius:.5em; font-weight:bold;
-moz-border-radius-bottomright:.0em;
-webkit-border-bottom-right-radius:.0em;}

またはこれ：

/* Remove the border from the far left. */
ul.menu{border-left:0;}

/* Add the left border back in. If you change the color of the nav border in the WordPress admin panel, you will also have to manually change the left border color below. */
ul.menu li.tab-1 a{
    border-left:1px solid #CCC;
    -moz-border-radius-topleft:.5em;
    -webkit-border-top-left-radius:.5em;}

/* This creates the rounded borders. */
ul.menu li.tab a{
    -moz-border-radius-bottomleft:.5em; font-weight:bold;
    -webkit-border-bottom-left-radius:.5em; font-weight:bold;
    -moz-border-radius-topright:.0em;
    -webkit-border-top-right-radius:.0em;}

助けてくれてありがとう

4

2 に答える 2

0

ここでは過剰に設計されている可能性があります:first-child -CSS疑似クラスの使用を検討しましたか？<ul>それができない場合は、最初ではなく左下を丸めてみ<li>ませんか？あなたが説明したことから、これらの両方は、PHPの行を書かなくてもあなたの望む結果を達成するでしょう。

于 2011-01-18T16:35:40.917 に答える
0

私は通常、htmlを生成する何らかのphpスクリプトを持っているので、htmlが生成されたときに各タブに独自のスタイルを与えることです。

// Assume $menu_tabs contains tab names
echo "<ul>"
foreach($menu_tabs as $tab) {
    $tabclass = tabclass($tab) // Just turn it into a valid css class name
    echo "<li class='tab $tabclass'>$tab</li>"
}
echo "</ul>"

またはその趣旨の何か。

次に、CSSスタイルを作成できます

.tabclassname {
    // Special CSS goes here
}

または、プログラムでタブを生成していない場合。各クラスの名前を手動で入力するだけです。

編集：すべてのタブを制御したいと言ったので、私は主にPHPを提案しました。最初のタブだけが必要な場合は、 ul:first-child が良い方法です。または、Gavin が提案したように ul に丸め効果を適用します。

于 2011-01-18T13:36:25.173 に答える