我有一个包含2个页面的html应用程序,它们都有页眉,带有按钮的div内容。我试着将背景图像设置到第一个"页面" div并使css文件中的所有其他div都透明。它工作正常,但在第二页我可以看到第一页滚动时的按钮。如何更改此选项以使第一页上的按钮在第二页上不可见?
第一
<body>
<div data-role="page" id="one" style="display:block;text-align:center;background: url('1.png') no-repeat center center fixed; background-size: cover">
<div data-role="header" id="oneheader" data-position="fixed" style="border: 5;background: Transparent;">
<h2><font color="#000000">text</font></h2>
</div><!-- /header -->
<div data-role="content">
<p>text</p>
<p>
<a href="second.html" data-role="button" data-style="round" id="btn" style="border: 5; background: #FFFFFF;">text</a>
</p>
</div><!-- /content -->
<div data-role="footer" id="onefooter" data-position="fixed">
<h4>text</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
第二
<body>
<div data-role="page" id="one" style="display:block; text-align:center">
<div data-role="header" id="oneheader" data-position="fixed">
<h1>text</h1>
</div><!-- /header -->
<div data-role="content" style="display:block;text-align:center">
<p><a href="page3.html" data-role="button"data-style="round" id="btn"style="border: 5; background: #FFFFFF">text</a></p>
</div>
<div data-role="footer" id="onefooter" data-position="fixed">
<h4>text</h4>
</div><!-- /footer -->
</div>
</body>
css文件:
body {
}
#one {
background: Transparent;
/*background: #06CF7B;*/
color: #000000;
font-family:"Times New Roman", Times, serif;
}
#oneheader {
background: Transparent;
color: #000000;
font-family:"Times New Roman", Times, serif;
}
#onefooter {
background: Transparent;
color: #000000;
}
#btn {
width: 230px; height: 40px;
margin: 0 auto;
/*data-style: round;*/
border: #000000;
border-style: solid;
border-width: 5px;
font-family:"Times New Roman", Times, serif;
}
在img,你可以看到第二页按钮之间第一页的按钮
答案 0 :(得分:0)
<body>
<div data-role="page" id="one" style="display:block; text-align:center">
<div data-role="header" id="oneheader" data-position="fixed">
<h1>text</h1>
</div><!-- /header -->
<div data-role="content" style="display:block;text-align:center">
<p><a href="page3.html" data-role="button"data-style="round" id="btn"style="border: 5; background: #FFFFFF">text</a></p>
</div>
<div data-role="footer" id="onefooter" data-position="fixed">
<h4>text</h4>
</div><!-- /footer -->
</div>
</body>
您的页脚位于内容标记