如何对同一html文件中的多个页面使用相同的标题
我想制作一个基于iPad HTML5/CSS3的应用程序，我发现了JQuery Mobile并尝试使用它。下面是它的样子： 这是摘要页面，当用户单击其中一个网格元素时，它应该转到适当的详细信息页面。（点击网格“a”应进入id为“blockA”等的内部页面。） 我遇到了一些问题，在网上找不到任何清晰的线索如何对同一html文件中的多个页面使用相同的标题,html,css,jquery-mobile,Html,Css,Jquery Mobile,我想制作一个基于iPad HTML5/CSS3的应用程序，我发现了JQuery Mobile并尝试使用它。下面是它的样子： 这是摘要页面，当用户单击其中一个网格元素时，它应该转到适当的详细信息页面。（点击网格“a”应进入id为“blockA”等的内部页面。） 我遇到了一些问题，在网上找不到任何清晰的线索 我希望我的标题+照片和摘要+信息栏是固定的。我找到的唯一解决办法是将header div复制/粘贴到我的“blockA”页面和其他5个页面中，我觉得这非常烦人。基本上，我希望我的顶部屏幕是固定
<body>
<div data-role="page" id="page_main" style="min-height: 496px; ">
<div data-role="header" id="nav-header-pleiades" data-add-back-btn="true" data-back-btn-text="Retour à la sélection">
<h1>Dossier de <span class='ptaGetUser' attribute-value='Name'>Mr. XXXXXXX</span></h1>
<ul data-role="listview">
<li class="pta-file-content" data-icon="custom" data-theme="c">
<img class="pta-img-collab" src="img/collab/Pic-S.jpg"/>
<div class="ui-grid-a">
<div class="ui-block-a">
<p><span class='ptaGetUser' attribute-value='title'>Mr.</span> <span class='ptaGetUser' attribute-value='firstname'>Whatever</span> <span class='ptaGetUser' attribute-value='lastname'>X</span></p>
</div>
<div class="ui-block-b">
<p><span class='ptaGetUser' attribute-value='mail'>whatever.x@mail.com</span></p>
</div>
<div class="ui-block-a">
<p><span class='ptaGetUser' attribute-value='birthdate'>09/03/1984</span></p>
</div>
<div class="ui-block-b">
<p><span class='ptaGetUser' attribute-value='phone'>0450090909</span></p>
</div>
<div class="ui-block-a">
<p><span class='ptaGetUser' attribute-value='work_id'>1656486m</span></p>
</div>
<div class="ui-block-b">
<p><span class='ptaGetUser' attribute-value='assignment'>Ingénieur débutant</span></p>
</div>
<div class="ui-block-a">
<p><span class='ptaGetUser' attribute-value='status'>Status</span></p>
</div>
<div class="ui-block-b">
<p><span class='ptaGetUser' attribute-value='building'>Company</span></p>
</div>
<div class="ui-block-a">
<p>Employé depuis <span class='ptaGetUser' attribute-value='employee_since'>01/09/2010</span></p>
</div>
</div>
</li>
</ul>
<h1 class="ui-title">Informations</h1>
</div>
<div class="ui-grid-b">
<div class="ui-block-a">
<a href="#blockA"><span id='ptaGetUserBlockA'>a</span></a>
</div>
<div class="ui-block-b">
<a href="#blockB"><span id='ptaGetUserBlockB'>b</span></a>
</div>
<div class="ui-block-c">
<a href="#blockC"><span id='ptaGetUserBlockC'>c</span></a>
</div>
<div class="ui-block-a">
<a href="#blockD"><span id='ptaGetUserBlockD'>d</span></a>
</div>
<div class="ui-block-b">
<a href="#blockE"><span id='ptaGetUserBlockE'>e</span></a>
</div>
<div class="ui-block-c">
<a href="#blockF"><span id='ptaGetUserBlockF'>f</span></a>
</div>
</div>
</div>
<div data-role="page" data-title="Page Foo" id="blockA">
<div data-role="header" id="nav-header-pleiades" data-add-back-btn="true" data-back-btn-text="Retour à la sélection">
<h1>Dossier de <span class='ptaGetUser' attribute-value='Name'>Mr. XXXXXXX</span></h1>
<ul data-role="listview">
<li class="pta-file-content" data-icon="custom" data-theme="c">
<img class="pta-img-collab" src="img/collab/Pic-S.jpg"/>
<div class="ui-grid-a">
<div class="ui-block-a">
<p><span class='ptaGetUser' attribute-value='title'>Mr.</span> <span class='ptaGetUser' attribute-value='firstname'>Whatever</span> <span class='ptaGetUser' attribute-value='lastname'>X</span></p>
</div>
<div class="ui-block-b">
<p><span class='ptaGetUser' attribute-value='mail'>whatever.x@mail.com</span></p>
</div>
<div class="ui-block-a">
<p><span class='ptaGetUser' attribute-value='birthdate'>09/03/1984</span></p>
</div>
<div class="ui-block-b">
<p><span class='ptaGetUser' attribute-value='phone'>0450090909</span></p>
</div>
<div class="ui-block-a">
<p><span class='ptaGetUser' attribute-value='work_id'>1656486m</span></p>
</div>
<div class="ui-block-b">
<p><span class='ptaGetUser' attribute-value='assignment'>Ingénieur débutant</span></p>
</div>
<div class="ui-block-a">
<p><span class='ptaGetUser' attribute-value='status'>Status</span></p>
</div>
<div class="ui-block-b">
<p><span class='ptaGetUser' attribute-value='building'>Company</span></p>
</div>
<div class="ui-block-a">
<p>Employé depuis <span class='ptaGetUser' attribute-value='employee_since'>01/09/2010</span></p>
</div>
</div>
</li>
</ul>
<h1 class="ui-title">Informations</h1>
</div>
mon bloc A
</div>
</body>
当我单击第一个网格元素以显示页面时，整个屏幕都会滑动。正如您所看到的，我将整个标题复制到了我的第二个page div中，这对代码可读性非常不利。我的网格边框也有CSS问题，因为它不显示底部边框，如何在不修改CSS的情况下将边框添加到网格？听起来你在尝试在不修改CSS的情况下做很多事情。为什么这是您项目的一个要求
希望这有帮助 听起来，您正在尝试在不修改CSS的情况下做很多事情。为什么这是您项目的一个要求
3） 实现元素自定义高度的唯一方法是编写自定义CSS。不，只是我是JQuery Mobile的新手，我想我可以通过更少的CSS修改来做得更好，比如使用特定的数据角色，这样它就适合了。似乎没有干净的方法可以做到这一点。我知道标题和布局网格，你们可以在我的代码中看到。所以我的帖子没有回答你们的问题？我不确定你能找到什么更好的答案，但我希望被标记为答案，或者有更好的解决方案。奥夫·维德森！抱歉，我不能，因为你指的是永久性页脚/页眉或布局网格，但我已经使用了所有这些。不，只是我是JQuery Mobile的新手，我想我可以做得更好，更少的CSS修改，比如使用特定的数据角色，使其适合正确的等等。似乎没有干净的方法可以做到这一点。我知道标题和布局网格，你们可以在我的代码中看到。所以我的帖子没有回答你们的问题？我不知道还有什么比answe更好
.ui-title,.ui-title
{
height:24px;
}
.banner
{
height:45px;
padding: 0px 15px !important;
}
.ui-li-thumb, .ui-li-icon {
max-width:165px;
max-height:165px;
}
.pta-file-content
{
height:148px;
}
.ui-li-has-thumb
{
padding-left: 165px !important;
}
.ui-grid-a
{
padding-top: 5px;
}
.ui-grid-b
{
height:543px;
width: 1022px;
}
.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b,.ui-grid-b .ui-block-c
{
height:50%;
width:32%;
border: 1px solid black;
}