【发布时间】：2011-04-07 00:06:19
【问题描述】：
我正在学习如何使用 Johnathan Stark 的 O'Reilly Building iPhone Apps 书构建一个 iphone 网站。出于这个问题的目的，您将能够通过从 www.saudialberta.com 的桌面查看问题来理解我的问题。如果您查看主页，它有两个面板，Dates 和About。如果您点击“日期”，它会打开一个包含 6 天的新页面。
问题：如果您查看下面的 html，我试图了解是什么允许“日期”内的无序列表在新页面上打开，而不仅仅是出现在“日期”下方在同一页面上，以及就此而言，是什么允许“关于”内的“p”元素出现在新页面上，而不是像 html 所建议的那样，就在 About div 下方。
请注意，“about”div 内的“p”元素上没有样式 id 或类。由于“日期”和“关于”都是“工具栏”，我猜它是工具栏 css 中的东西。这本书还使用了 jqtouch 和 jquery，但是在那些文件（我可以看到）中没有任何东西可以操纵这些 html 元素。
工具栏 CSS
.toolbar {
-webkit-box-sizing: border-box;
border-bottom: 1px solid #000;
padding: 10px;
height: 45px;
background: url(img/toolbar.png) #000000 repeat-x;
position: relative;
}
.black-translucent .toolbar {
margin-top: 20px;
}
.toolbar > h1 {
position: absolute;
overflow: hidden;
left: 50%;
top: 10px;
line-height: 1em;
margin: 1px 0 0 -75px;
height: 40px;
font-size: 20px;
width: 150px;
font-weight: bold;
text-shadow: rgba(0,0,0,1) 0 -1px 1px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
color: #fff;
}
HTML
<html>
<head>
<title>Kilo</title>
<link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css">
<link type="text/css" rel="stylesheet" media="screen" href="themes/jqt/theme.css">
<link type="text/css" rel="stylesheet" media="screen" href="kilo.css">
<script type="text/javascript" src="jqtouch/jquery.js"></script>
<script type="text/javascript" src="jqtouch/jqtouch.js"></script>
<script type="text/javascript" src="kilo.js"></script>
</head>
<body>
<div id="home">
<div class="toolbar">
<h1>Kilo</h1>
<a class="button flip" href="#settings">Settings</a>
</div>
<ul class="edgetoedge">
<li class="arrow"><a href="#dates">Dates</a></li>
<li class="arrow"><a href="#about">About</a></li>
</ul>
</div>
<div id="about">
<div class="toolbar">
<h1>About</h1>
<a class="button back" href="#">Back</a>
</div>
<div>
<p>Kilo gives you easy access to your food diary.</p>
</div>
</div>
<div id="dates">
<div class="toolbar">
<h1>Dates</h1>
<a class="button back" href="#">Back</a>
</div>
<ul class="edgetoedge">
<li class="arrow"><a id="0" href="#date">Today</a></li>
<li class="arrow"><a id="1" href="#date">Yesterday</a></li>
<li class="arrow"><a id="2" href="#date">2 Days Ago</a></li>
<li class="arrow"><a id="3" href="#date">3 Days Ago</a></li>
<li class="arrow"><a id="4" href="#date">4 Days Ago</a></li>
<li class="arrow"><a id="5" href="#date">5 Days Ago</a></li>
</ul>
</div>
<div id="date">
<div class="toolbar">
<h1>Date</h1>
<a class="button back" href="#">Back</a>
<a class="button slideup" href="#createEntry">+</a>
</div>
<ul class="edgetoedge">
<li id="entryTemplate" class="entry" style="display:none">
<span class="label">Label</span>
<span class="calories">000</span>
<span class="delete">Delete</span>
</li>
</ul>
</div>
<div id="createEntry">
<div class="toolbar">
<h1>New Entry</h1>
<a class="button cancel" href="#">Cancel</a>
</div>
<form method="post">
<ul class="rounded">
<li><input type="text" placeholder="Food" name="food" id="food" autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
<li><input type="text" placeholder="Calories" name="calories" id="calories" autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
<li><input type="submit" class="submit" name="action" value="Save Entry" /></li>
</ul>
</form>
</div>
<div id="settings">
<div class="toolbar">
<h1>Settings</h1>
<a class="button cancel" href="#">Cancel</a>
</div>
<form method="post">
<ul class="rounded">
<li><input placeholder="Age" type="text" name="age" id="age" /></li>
<li><input placeholder="Weight" type="text" name="weight" id="weight" /></li>
<li><input placeholder="Budget" type="text" name="budget" id="budget" /></li>
<li><input type="submit" class="submit" name="action" value="Save Changes" /></li>
</ul>
</form>
</div>
</body>
</html>
【问题讨论】：