Question

我有一个JQuery Mobile Navbar，我想用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;
}

使用JQuery Mobile导航谷歌风格

1 个答案: