3

このPSDをCSSでHTMLに変換しようとしています。

フォトショップファイル

そして、これは私がこれまでに得たものです（CSS3を使用）。

実際のメニュー

しかし、メニュー項目の間に仕切りを配置する方法がわかりません。何か案は？

編集: 例の画像が表示されていないようです。それで、ここにあります。

PSD ファイル http://postimage.org/image/2qywn3nj8/

これまでに得たもの http://postimage.org/image/1ylhjsv2c/

#nav
{
    padding:0;
    margin:0;
    height: 35px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background-image: -moz-linear-gradient(top, #ffffff, #eaecec);
    -moz-box-shadow: 0 0 1px #888;
    }

 #nav ul
 {
     margin-top: 0px;
     margin-left: 0;
     Font-Family: Arial;
     font-size: 10pt;
     list-style: none;
     padding-top: 8px;
     color: #000000;
     }
 #nav ul li
 {
     display: inline;
     padding-left: 30px;
     }
4

5 に答える 5

2

空の li を追加して、セパレーターとしてスタイルすることができます。コード的には醜いと思いますが、次のようなものが機能します。

CSS:

#nav
{
    padding:0;
    margin:0;
    height: 35px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background-image: -moz-linear-gradient(top, #ffffff, #eaecec);
    -moz-box-shadow: 0 0 1px #888;
    }

 #nav ul
 {
     margin-top: 0px;
     margin-left: 0;
     Font-Family: Arial;
     font-size: 10pt;
     list-style: none;
     padding-top: 8px;
     color: #000000;
     }
 #nav ul li
 {
     display: inline;
     padding-left: 15px;
     }
 #nav ul li.sep{
    background-image: -moz-linear-gradient(top, #eaecec, #555555);
    padding-left:1px;
    margin-left: 15px;

 }

HTML:

<div id="nav">
    <ul>
        <li>test</li>
        <li class="sep"></li>
        <li>test2</li>
        <li class="sep"></li>
        <li>test3</li>
        <li class="sep"></li>
        <li>test</li>
        <li class="sep"></li>
        <li>test2</li>
        <li class="sep"></li>
        <li>test3</li>
</ul>
</div>
于 2011-07-28T05:01:16.407 に答える
2

それぞれの間に 1 ピクセル幅の div を配置して、溝、尾根、インセット、アウトセットなどのエッジのある境界線を与えることはできますか? または、画像を使用することもできます。

于 2011-07-28T04:28:19.500 に答える
1

次のようなものを使用できます。

#nav ul li {
     display: inline;
     padding-left: 30px;

     border-left: 1px solid #THE-WHITE-COLOR;
     border-right: 1px solid #THE-GREY-COLOR;
}

そして、 first と lastの追加マークアップとしてborder-left: none;andを使用するだけですborder-right: none;#navl ul li

行の上部と下部にあるスペースでトリッキーになるかもしれません..しかし、あなたは..それを行うことができます.

于 2011-07-28T04:45:25.890 に答える
0

メニューは次のようになります。

HTML:

<div id="nav">
 <ul>
  <li><a href="#">Rates &amp; Plans</a></li>
  <li><a href="#">Phones</a></li>
  <li><a href="#">Rates</a></li>
  <li><a href="#">Booking</a></li>
  <li><a href="#">Coverage</a></li>
  <li><a href="#">FAQ</a></li>
  <li><a href="#">Support</a></li>
 </ul>
</div>

CSS:

#nav{
 // Background
}
#nav ul
 padding:0;margin:0 0 0 30px;
}
#nav li{
 background:url(separator.png) no-repeat 100% 0%;
 padding: 10px 15px;
 margin: 0 2px;
}
于 2011-07-28T04:32:09.643 に答える
0

最も簡単なオプションは、各ナビゲーション項目の後に空のリスト要素を配置し、それに応じてスタイルを設定することですが、これはあまりセマンティックではありません。

:after ( http://www.w3schools.com/cssref/sel_after.asp )などの CSS セレクターを使用することもできます。

于 2011-07-28T06:33:14.187 に答える