带有 JQuery Mobile 的导航栏谷歌风格答案

【问题标题】：Navbar google style with JQuery Mobile带有 JQuery Mobile 的导航栏谷歌风格
【发布时间】：2012-04-24 07:21:41
【问题描述】：

我有一个 JQuery 移动导航栏，我想用 css 设置样式，就像谷歌上最顶部的导航菜单一样。

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

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

谢谢！

【问题讨论】：

检查你想在你的开发者工具中设置样式的元素。没有比这更容易的了。
@Jasper 我不明白我需要“覆盖”哪些类（如果我需要覆盖它们）以及如何做到这一点:(
在您的开发工具（我见过的任何工具）中，当您检查一个元素时，您可以看到它的 CSS 规则/样式。样式声明通常像样式表中一样显示：.ui-page .ui-content .ui-listview { some-style: some-value; }。您可以通过在自己的声明中添加 !important 来覆盖样式，也可以使 CSS 规则更加具体，以便在默认主题上使用它们。
如果您在诊断 jQuery Mobile 特定 CSS 方面需要更多帮助，请在此处查看我的其他答案：stackoverflow.com/…

标签： css jquery-mobile

【解决方案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;
}

【讨论】：