Navigator的谷歌风格与JQuery移动

我有一个JQuery Mobile Navbar，我想用css风格像谷歌顶部的导航菜单。Navigator的谷歌风格与JQuery移动

有人可以帮助我与风格？

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

谢谢！

2012-04-23 Uince81

检查你想要的风格元素在你的开发工具。它只是没有比这更容易。 – Jasper 2012-04-23 21:07:16

@Jasper我不能说我需要“覆盖”哪些类（如果我需要覆盖它们）以及如何去做：（ – Uince81 2012-04-23 21:20:56

）在您的开发人员工具（我见过的任何）中，当您检查一个元素时，您可以看到它的CSS规则/样式，样式声明通常就像它们在样式表中一样显示：'.ui-page .ui-content .ui-listview {some-style：some-value;}'。或者通过在自己的声明中添加'！important'来覆盖样式，或者您可以使CSS规则稍微更具体，以便在默认主题中使用它们。 – Jasper 2012-04-23 21:55:14

刚刚创建了一些你可以使用的东西。这并不完美，但它看起来非常像Google。（活生生的例子：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; 
}

来源

2012-04-23 23:21:41 Jonathan

Navigator的谷歌风格与JQuery移动

回答

相关问题