如何在瀏覽頁面時使標題和水平菜單一致

使用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

如何在瀏覽頁面時使標題和水平菜單一致

回答

相關問題