如何在浏览页面时使标题和水平菜单一致

使用HTML5stack并通过PhoneGap Build发送的移动应用程序。在iOS设备上进行测试（4s & 5c）。注意到当我点击导航到一个新页面时，我的标题和菜单在加载之间变为空白，给出的外观不够完美。我希望通过将标题和菜单保留在所有页面的确切位置，它将看起来像标题和菜单留在原地，而其他一切都改变了。我猜有人会告诉我使用像AngularJS这样的结构化框架，但我不知道它在我正在攀登的这个陡峭的学习曲线上无法腾出更多的时间。也许是下一个项目。如何在浏览页面时使标题和水平菜单一致

我的CSS代码如下。

#menu { 
    width: 100%; 
    position: fixed; 
    margin: 0px; 
    padding: 0px; 
} 

img.headerImg{ 
    width: 100%; 
    margin-top: 0%;  
    padding: 0px ;     
    vertical-align: top; 
} 

.menu, .table { 
    position: fixed; 
    width: 100%; 
    margin: 0% ; 
    padding: 0% ; 
    color: white; 
    background-color: #1E3B56; 
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; 
    font-size: x-small; 
    border-bottom-right-radius: 20%; 
    border-top-left-radius: 5%; 
} 

.navImg { 
    width: 25px; 
    height: 25px; 
    align-items: center; 
    position: absolute;  
    margin: 0px 4px 0px 0px; 
    padding: 2px 2px 0px 0px; 
}

希望有一个解决方案在那里，但如果我不得不忍受它，那么我不得不忍受它...现在。

来源

2017-08-18 GeneralUSA

我通过将混合移动应用程序放入单页应用程序并使用jQuery Mobile data-role =“page”来解决此问题。

尽管我对我的项目太过分了，无法将我的代码转移到此模板中，但我很可能下次将下面的代码用作SPA启动程序。这来自一个非常有用的教程，我发现在Youtube from LinuxAcademy

为您和未来发布html初学者模板。

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>jQyery Mobile - Fixed Header &amp; Footer</title> 
<link rel="stylesheet"href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 
<body> 
<!--<div data-role="page" data-fullscreen="true"> // to show a full page w/hiding header/footer disappears and reappears --> 
<div data-role="page"> 
<div data-role="header" data-position="fixed"> 
<h1>I'm your header</h1> 
<div data-role='navbar'><ul> 
<li><a href="" data-icon="delete">Nav 01</a></li> 
<li><a href="" data-icon="check" data-iconpos="bottom">Nav 02</a></li>    
</ul></div> 
</div><!-- /end header --> 
<div data-role="content"> 
<h1>I'm your content</h1> 
<p>Dominus meus: tu es ergo habet. Lorem quod fecisti mihi carissimi. Vos have ut misereatur sunt incredibili obtulerunt ut vetustus amissus utitur salute mundi. Quia bonus es tu. Et misericordias tuas usque in aeternum manet! Dominus meus: tu es ergo habet. Lorem quod fecisti mihi carissimi. Vos have ut misereatur sunt incredibili obtulerunt ut vetustus amissus utitur salute mundi. Quia bonus es tu. Et misericordias tuas usque in aeternum manet! Dominus meus: tu es ergo habet. Lorem quod fecisti mihi carissimi. Vos have ut misereatur sunt incredibili obtulerunt ut vetustus amissus utitur salute mundi. Quia bonus es tu. Et misericordias tuas usque in aeternum manet! My Lord, You are so Wonderful. Thank you for all that you have done for me and my loved ones. You are incredibly gracious to have offered salvation to a lost world. You are good. And your mercies endureth forever! Dominus meus: tu es ergo habet. Lorem quod fecisti mihi carissimi. Vos have ut misereatur sunt incredibili obtulerunt ut vetustus amissus utitur salute mundi. Quia bonus es tu. Et misericordias tuas usque in aeternum manet! Dominus meus: tu es ergo habet. Lorem quod fecisti mihi carissimi. Vos have ut misereatur sunt incredibili obtulerunt ut vetustus amissus utitur salute mundi. Quia bonus es tu. Et misericordias tuas usque in aeternum manet! Dominus meus: tu es ergo habet. Lorem quod fecisti mihi carissimi. Vos have ut misereatur sunt incredibili obtulerunt ut vetustus amissus utitur salute mundi. Quia bonus es tu. Et misericordias tuas usque in aeternum manet! Dominus meus: tu es ergo habet. Lorem quod fecisti mihi carissimi. Vos have ut misereatur sunt incredibili obtulerunt ut vetustus amissus utitur salute mundi. Quia bonus es tu. Et misericordias tuas usque in aeternum manet! Dominus meus: tu es ergo habet. Lorem quod fecisti mihi carissimi. Vos have ut misereatur sunt incredibili obtulerunt ut vetustus amissus utitur salute mundi. Quia bonus es tu. Et misericordias tuas usque in aeternum manet! Dominus meus: tu es ergo habet. Lorem quod fecisti mihi carissimi. Vos have ut misereatur sunt incredibili obtulerunt ut vetustus amissus utitur salute mundi. Quia bonus es tu. Et misericordias tuas usque in aeternum manet! My Lord, You are so Wonderful. Thank you for all that you have done for me and my loved ones. You are incredibly gracious to have offered salvation to a lost world. You are good. And your mercies endureth forever! Dominus meus: tu es ergo habet. Lorem quod fecisti mihi carissimi. Vos have ut misereatur sunt incredibili obtulerunt ut vetustus amissus utitur salute mundi. Quia bonus es tu. Et misericordias tuas usque in aeternum manet! Dominus meus: tu es ergo habet. Lorem quod fecisti mihi carissimi. Vos have ut misereatur sunt incredibili obtulerunt ut vetustus amissus utitur salute mundi. Quia bonus es tu. Et misericordias tuas usque in aeternum manet! Dominus meus: tu es ergo habet. Lorem quod fecisti mihi carissimi. Vos have ut misereatur sunt incredibili obtulerunt ut vetustus amissus utitur salute mundi. Quia bonus es tu. Et misericordias tuas usque in aeternum manet!</p> </div><!-- /end content --> 
<div data-role="footer" data-position="fixed"> 
<h1>I'm your footer</h1> 
<div data-role='navbar'> 
<ul> 
<li><a href="" data-icon="star">Nav 03</a></li> 
<li><a href="">Nav 04</a></li>    
</ul> 
</div></div><!-- /end footer -->   
</div> 
</body> 
</html>

来源

2018-01-24 09:52:26 GeneralUSA

如何在浏览页面时使标题和水平菜单一致

回答

相关问题