0

次のナビゲーション メニューを再現しようとしていますが、ボタンのレイアウトと間隔に関していくつかの問題があります。

また、Composer ボタンを使用すると、アイコンを背景画像として設定できますか?

オリジナル：

ここに画像の説明を入力

私の試み：

ここに画像の説明を入力

HTML:

<div class="options">
                <nav class="mainOptions">
                    <ul>
                        <li><a class="composer" href="#">Composer</a></li>
                        <li><a href="#">Address Books</a></li>
                        <li class="active"><a href="#" target="_self" title="View Messages Scheduled for Future Delivery">Scheduled Messages</a></li>
                        <li><a href="#" target="_self" title="Message Templates for you or your organisation">Templates</a></li>
                    </ul>
            </nav>

CSS:

.options{
    width:100%;
    height:50px;
}
.mainOptions{
    float:left;
    margin:0 15px 0 20px;
    color:#fff;
    width:700px;
    height:50px;
}
.mainOptions a.composer{
    width:50px;
    height:40px;
    color:#fff;
    background: #184c82; /* Old browsers */
    background: -moz-linear-gradient(top,  #184c82 0%, #022243 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#184c82), color-stop(100%,#022243)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #184c82 0%,#022243 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #184c82 0%,#022243 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #184c82 0%,#022243 100%); /* IE10+ */
    background: linear-gradient(top,  #184c82 0%,#022243 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#184c82', endColorstr='#022243',GradientType=0 ); /* IE6-9 */
}
.mainOptions .composerIcon{
    display:inline-block;
    width:14px;
    height:14px;
    background:url('../images/composer.png') no-repeat -96px -72px;
}
.mainOptions ul li{
    display:inline-block;
    padding:4px 10px 4px;
    border-radius:4px;
}
.mainOptions li a{
    text-decoration:none;
    font-size:13px;
    line-height:18px;
    color:#184C82;
}
.mainOptions li{
    width:140px;
    text-align:center;
}
.mainOptions li.active{
    background-color:#7E98B3;
    color:#FFF;
}
4

1 に答える 1

1

これがあなたが持っていたものに基づいて私がしたことです。Composer ボタンのフォントが違うように見えますが、私は確信が持てません。画像を Composer ボタンに追加するだけで、かなり近いものになります。

http://jsfiddle.net/hhKah/1/

于 2012-05-30T01:54:42.317 に答える