“英特尔XDK”存在HTML5/CSS3页脚未对齐/出现在页眉上方的问题
我目前正在使用“英特尔xdk/应用程序设计器”中的拖放功能创建应用程序。该应用程序的目的是为用户创建基本教程，并使用地理定位工具。我主要使用英特尔网站上的应用程序初学者教程来创建应用程序。这些教程很好地完成了一些基础工作，比如在页面之间添加图像和导航。然而，当我添加地理定位时，该程序（即使在最好的情况下也是喜怒无常的）删除了几页。我已将代码复制到word中，当我将代码复制回以尝试还原页面时，应用程序已开始在页眉顶部显示页脚。令人恼火的是，页眉和页脚本身（仍在底部）都被压缩到屏幕的一侧，并且没有按应有的方式均匀分布。我目前使用的代码如下“英特尔XDK”存在HTML5/CSS3页脚未对齐/出现在页眉上方的问题,html,css,header,emulation,footer,Html,Css,Header,Emulation,Footer,我目前正在使用“英特尔xdk/应用程序设计器”中的拖放功能创建应用程序。该应用程序的目的是为用户创建基本教程，并使用地理定位工具。我主要使用英特尔网站上的应用程序初学者教程来创建应用程序。这些教程很好地完成了一些基础工作，比如在页面之间添加图像和导航。然而，当我添加地理定位时，该程序（即使在最好的情况下也是喜怒无常的）删除了几页。我已将代码复制到word中，当我将代码复制回以尝试还原页面时，应用程序已开始在页眉顶部显示页脚。令人恼火的是，页眉和页脚本身（仍在底部）都被压缩到屏幕的一侧，并且没有按
<!DOCTYPE html>
<html>p
<!--HTML5 doctype-->
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Pragma" content="no-cache">
<script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
<script type="text/javascript" language="javascript">
var isIntel=window.intel&&window.intel.xdk
// This event handler is fired once the intel libraries are ready
function onDeviceReady() {
//hide splash screen now that our app is ready to run
intel.xdk.device.hideSplashScreen();
setTimeout(function () {
$.ui.launch();
}, 50);
}
//initial event handler to detect when intel is ready to roll
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
</script>
<script src="js/appframework.ui.min.js"></script>
<script>
if(isIntel)
$.ui.autoLaunch = false;
$.ui.useOSThemes = true; //Change this to false to force a device theme
$.ui.blockPageScroll();
$(document).ready(function () {
if ($.ui.useOSThemes && (!$.os.ios||$.os.ios7))
$("#afui").removeClass("ios");
});
</script>
<link href="css/icons.css" rel="stylesheet" type="text/css">
<link href="css/af.ui.css" rel="stylesheet" type="text/css">
<script>
function get_location() {
navigator.geolocation.getCurrentPosition(show_map);
}
function show_map(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
document.write("latitude :" + latitude + "<br>");
document.write("longitude :" + longitude + "<br>");
}
</script>
</head>
<body>
<div id="afui" class="ios">
<div id="header" class="header"></div>
<div id="content" style="">
<div class="panel" title="Main" data-nav="nav_0" id="main" selected="selected"
style="" data-appbuilder-object="page" data-header="header_0" data-footer="default_footer">
<div class="container" style="width: 100%; height: 100%; position: relative;" data-appbuilder-object="container">
<img src="images/intel.jpg" style="width: 100%; height: auto;" alt="Title" data-appbuilder-object="image"
class="" title="Main Screen">
<div class="text_item" data-appbuilder-object="text" style="text-align: center;">Welcome to the Tutorials App.
<br>Please select an option.</div>
</div>
</div>
<div class="panel" title="About" data-nav="nav_0" id="page_1" data-appbuilder-object="page"
style="width: 100%; height: 100%;" data-header="header_0" data-footer="default_footer">
<div class="container" style="width: 100%; height: 100%;" data-appbuilder-object="container">
<img src="images/intel.jpg" style="width: auto; height: 40%; display: block; margin-left: auto; margin-right: auto;"
alt="Title" data-appbuilder-object="image" class="" title="About">
<div class="text_item" data-appbuilder-object="text" style="text-align: center;">The about screen
<br>about
</div>
</div>
</div>
<div class="panel" title="Tutorials" data-nav="nav_0" id="page_2" data-appbuilder-object="page"
style="" data-header="header_0" data-footer="default_footer">
<ul class="list" data-appbuilder-object="list" style="">
<li><a href="#page_3">HTML Tutorial</a>
</li>
<li><a href="#page_4">CSS Tutorial</a>
</li>
<li><a href="#page_5">Geolocation</a>
</li>
</ul>
</div>
<div class="panel" title="HTML Tutorial" data-nav="nav_0" id="page_3" data-appbuilder-object="page"
style="" data-header="header_0" data-footer="footer_1">
<div class="container" style="width: 100%; height: 100%; position: relative;" data-appbuilder-object="container">
<img src="images/intel.jpg" style="width: 100%; margin-top: 100px;" alt="Title"
data-appbuilder-object="image" class="" title="intel">
<div class="text_item" data-appbuilder-object="text" style="text-align: center;">Use HTML like this.
<iframe width="100%" src="//www.youtube.com/embed/9gTw2EDkaDQ" frameborder="0"
allowfullscreen=""></iframe>
</div>
</div>
</div>
<div class="panel" title="CSS Tutorial" data-nav="nav_0" id="page_4" data-appbuilder-object="page"
style="width: 100%;" data-header="header_0" data-footer="footer_2">
<div class="container" style="width: 100%; height: 100%; position: relative;" data-appbuilder-object="container">
<img src="images/intel.jpg" style="width: 100%; margin-top: 100px;" alt="Title"
data-appbuilder-object="image" class="" title="intel1">
<div class="text_item" data-appbuilder-object="text" style="text-align: center;">Use CSS like this</div>
</div>
</div>
<div class="panel" title="Geolocation" data-nav="nav_0" id="page_5" data-appbuilder-object="page"
style="width: 100%;" data-header="header_0" data-footer="footer_3">
<div class="container" style="width: 100%; height: 100%;" data-appbuilder-object="container">
<img src="images/intel.jpg" style="width: 100%; margin-top: 100px;" alt="Title"
data-appbuilder-object="image" class="" title="intel2">
<div class="text_item" data-appbuilder-object="text" style="text-align: center;">Find Geolocation here</div>
<a class="button" href="#page_7" style="width: 100%;" data-appbuilder-object="button"
data-transition="slide" id="button_8" onclick="get_location();">Geolocation</a>
</div>
</div>
<div class="panel" title="Display Location" data-nav="nav_0" id="page_7" data-appbuilder-object="page"
style="" data-footer="default_footer" data-header="header_0"></div>
<div id="navbar" class="footer">
<footer><a href="#main" class="icon home" style="">Home</a><a href="#page_1"
class="icon info" style="">About</a><a href="#page_2" class="icon star"
style="">Tutorials</a><a href="#page_7" class="icon key" style="">Resources</a>
</footer>
</div>
</div>
<div id="navbar" class="footer">
<footer><a href="#main" class="icon home" style="">Home</a><a href="#page_1" class="icon info"
style="">About</a><a href="#page_2" class="icon star" style="">Tutorials</a>
<a
href="#page_7" class="icon key" style="">Resources</a>
</footer>
</div>
<header id="header_0" data-appbuilder-object="header">
<h1 class="apptitle"> Tutorials App</h1>
</header>
<nav id="nav_0" data-appbuilder-object="nav">
<h1>Side Menu</h1>
</nav>
<footer id="footer_1" data-appbuilder-object="footer"><a href="#page_1" class="icon left">Previous</a><a href="#main" class="icon home">Home</a>
<a href="#page_4" class="icon right">Next</a>
</footer>
<footer id="footer_2" data-appbuilder-object="footer"><a href="#page_3" class="icon left">Previous</a><a href="#main" class="icon home">Home</a>
<a href="#page_5" class="icon right">Next</a>
</footer>
<footer id="footer_3" data-appbuilder-object="footer"><a href="#page_4" class="icon left">Previous</a><a href="#main" class="icon home">Home</a>
<a href="#page_7" class="icon right">Next</a>
</footer>
<footer id="default_footer" data-appbuilder-object="footer"><a href="#main" class="icon home">Home</a><a href="#page_1" class="icon info">About</a>
<a href="#page_2" class="icon star">Tutorials</a><a href="#page_7" class="icon key">Resources</a>
</footer>
</body>
</div>
</html>
P
var isIntel=window.intel&&window.intel.xdk
//英特尔库准备就绪后，将触发此事件处理程序
函数ondevicerady（）{
//隐藏启动屏幕，现在我们的应用程序已准备好运行
intel.xdk.device.hideSplashScreen（）；
setTimeout（函数（）{
$.ui.launch（）；
}, 50);
}
//用于检测英特尔何时准备就绪的初始事件处理程序
document.addEventListener（“intel.xdk.device.ready”，ondevicerady，false）；
国际单项体育联合会（isIntel）
$.ui.autoLaunch=false；
$.ui.useOSThemes=true//将此更改为false以强制设备主题
$.ui.blockPageScroll（）；
$（文档）.ready（函数（）{
if（$.ui.useOSThemes&（！$.os.ios | |$.os.ios7））
$（“#afui”）.removeClass（“ios”）；
});
函数get_location（）{
navigator.geolocation.getCurrentPosition（显示地图）；
}
功能显示图（位置）{
变量纬度=位置坐标纬度；
var经度=position.coords.longitude；
文件。写入（“纬度：“+latitude+”
”；
文件。写入（“经度：“+经度+”
”；
}
欢迎使用教程应用程序。
请选择一个选项。
关于屏幕
关于
-
-
-
像这样使用HTML。
像这样使用CSS
在这里找到地理位置
教程应用程序
配菜
显示位置面板（id=“page_7”
）中，您有第二个“导航栏”
，删除该
，然后它应该正常工作，不确定这是如何发生的，但它不应该在那里