css - 带有 JQuery Mobile 的导航栏谷歌风格

Question

我有一个 JQuery Mobile Navbar，我想用 css 来设置样式，就像谷歌上最上面的导航菜单一样。

有人可以帮我看看款式吗？

或者至少告诉我需要覆盖哪些样式以及如何实现？

谢谢！

Answer 1

刚刚创建了一些你可以使用的东西。它并不完美，但它看起来非常像谷歌。（现场示例：http: //jsfiddle.net/dAUbu/）

HTML：

<div data-role="page"> 
    <div data-role="header" class="header-google">
        <div data-role="navbar">
            <ul>
                <li><a href="#">Search</a></li>
                <li><a href="#" class="ui-btn-active">Images</a></li>
                <li><a href="#">Maps</a></li>
                <li><a href="#">Play</a></li>
                <li><a href="#">YouTube</a></li>
            </ul>
        </div>
    </div>

    <div data-role="content">
        <p>Yay!</p>
    </div>
</div>​

CSS：

.header-google {
    border: none;
    border-bottom: 1px solid #000;
    background: #2D2D2D;
}

.header-google a.ui-btn {
    border: none;
    background: inherit;
    text-shadow: none;
    color: #BBB;
    font-family: Arial, sans-serif;
    font-size: 13px;
}

.header-google .ui-btn-inner {
    padding: 0 !important;
    height: 29px;
    line-height: 29px;
}

.header-google a.ui-btn.ui-btn-active,
.header-google a.ui-btn:hover{
    color: #FFF;
}