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

Question

我有一个 JQuery Mobile 导航栏，我想用 css 设计它的样式，就像 google 上最顶级的导航菜单一样。

谁能帮我解决样式问题？

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

谢谢!

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;
}