需要帮助格式化HTML页面布局
我有一个页面，我想要具有以下格式：
我无法正确定位下页导航。它需要始终低于数据列。它目前包含在左列下方。它应该有一个边框，但边框出现在页面顶部附近。最后，页脚显示在页面顶部而不是底部。我已经玩了一天超过一天了，无法弄清楚我犯错误的地方。
代码的精简版本在这里：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.h2b {
/*page title*/
font-size: 17.5pt;
color: #469;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.a {
color: #469;
text-decoration: none;
}
body {
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-style: normal;
background-color: #fff;
}
#container {
width: 100%;
margin: 0;
background-color: #fff;
position: relative;
padding: 0;
}
#masthead {
text-align: right;
width: 100%;
background-color: #c5d5e5;
/*width: auto;*/
margin: 0;
padding: 0;
overflow: auto;
}
#page_content {
position: relative;
width: 96%;
/*width: 98%;*/
/*border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCAA77;*/
left: 20px;
}
#major_revision {
/*position: relative;
left: 20px;*/
}
#footer {
background-color: #dfcfbf;
padding-bottom: 5px;
width: auto;
clear: both;
overflow: auto;
}
#masthead img {
float: left;
margin: 0;
padding: 0;
}
#masthead p {
font-size: small;
text-align: right;
color: #000;
margin: 0 0 0 0;
padding: 0;
}
/* Styles for Navigationcommon modified 10-16-2015*/
#navigationcommon {
background-color: #548EBE;
overflow: hidden;
border-bottom: thin black solid;
}
#navigationcommon ul {
list-style-type: none;
width: 100%;
margin: 0;
padding: 0;
}
#navigationcommon li {
float: left;
}
#navigationcommon a {
color: #FFF;
text-decoration: none;
display: block;
padding: 5px;
border: 1px solid #D3D3D3;
background-color: #548EBE;
}
#navigationcommon a:hover {
color: #000;
text-decoration: none;
border: 1px solid #D3D3D3;
background-color: #ADD8E6;
}
/* Styles for Footer */
#footer p {
font-size: x-small;
text-align: center;
color: #393939;
margin: 10px;
padding: 1px;
}
#footer a {
color: #393939;
text-decoration: underline;
}
#footer a:hover {
color: #000;
text-decoration: none;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<title>PAGE</title>
</head>
<body>
<!-- Begin Container -->
<div id="container">
<!-- Begin Masthead -->
<header id="masthead" onclick="" style="background-color:#0047ff">
<p style="background-color:#0047ff;height:30px; width:104px">
<!--See helper file for paths to image files-->
</p>
</header>
<!-- End Masthead -->
<nav id="navigationcommon" onclick="">
<ul>
<!--See helper file for paths to image files-->
<li><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Contacts</a>
</li>
<li>
<a href="#" onclick="passdata(); return false">Improve</a>
</li>
<li><a href="#">Tailor</a>
</li>
</ul>
<a href="#" style="float:right;font:small-caption;border-style:none;
color:white; vertical-align:bottom;margin-bottom:0px;padding-bottom:0px;padding-left:5px;padding-right:5px">Advanced Search</a>
<!--See helper file for paths to image files-->
<input type="image" src="pill-button-green-clip-art.jpg" style="width: 90px; border-style:none; float:right; height: 28px;" value="Search" onclick="search()">
<input name="search" type="text" maxlength="512" id="search" class="searchField" title="" style="width: 300px;
border-style:none; height: 26px; float:right; padding-right:5px; " value="Enter Keyword">
</nav>
<!-- Begin Page Content -->
<section id="page_content" style="top: 60px;" onclick="">
<div id="major_revision" style="position:fixed;top: 65px;float:left;width:100%;padding: 0 1% 1% 2%;">
<p><span id="area" style="font-weight:bold">Some Data</span>
<br>
<span style="font-size:x-small">Major Revision: <revision>1.0</revision><!-- Format is Major Revision: #.# -->
Date: <date>7/1/2015</date></span>
</p>
<!-- Format is Release Date: mm/dd/yyyy -->
</div>
<!-- Below is for the navigation buttons on the top of the screen. It goes ABOVE the LEFT COLUMN <div> -->
<div style="position:fixed;top: 120px;width:96%;margin:0 0 0 2%;border:thin black solid">
<!---->
<div style="position:relative;float:left;width:50%;padding: 0% 0% 0% 0%;background-color:#CCDDFF">
<p style="text-align:left;background-color:transparent;margin:.5% 0 .5% 1%;">
<input style="background-color:#DFCFBF" name="previous" id="previous" type="button" value="<< Prev" onclick="page_navigation('previous')" class="round" />
<br>
<span style="padding: 0% 0% 0% 0%;margin-left:1%;" id="previous_text" class="style_bold"></span>
</p>
</div>
<div style="position:relative;float:right;width:50%;padding: 0% 0% 0% 0%;background-color:#CCDDFF">
<p style="text-align:right;background-color:transparent;margin:.5% 1% .5% 0;">
<input style="background-color:#DFCFBF" name="next" id="next" type="button" value="Next >>" onclick="page_navigation('next')" class="round" />
<br>
<span style="padding: 0% 0% 0% 0%;margin-right:1%;" id="next_text" class="style_bold"></span>
</p>
</div>
</div>
<!-- Above is for the navigation buttons on the top of the screen -->
<div style="position:fixed;top: 165px;float:left;width:98%;padding: 10px 0% 0% 2%;">
<span class="h1b">Page Title
</span>
</div>
<!-- Begin Left Column -->
<div style="position:fixed;top: 205px;width:95%">
<div style="position:relative;float:left;width:70%;padding: 0% 0% 1% 2%;">
<span class="h2b">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>
<span style="margin:20px;">- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<br>
<span style="margin:20px;">- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<br>
<span style="margin:20px;">- xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx</span>
<br>
<span style="margin:20px;">- xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<br>
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx
<br>
<span style="margin:20px;">- xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx</span>
<br>
<span style="margin:20px;">- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
</p>
<span class="h2b">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxx
<br>
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br>
<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxx
<br>
<span style="margin:20px;">- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<br>
<span style="margin:20px;">- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<br>
<span style="margin:20px;">- xxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<br>
<span style="margin:20px;">- xxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxx xxxxxxxx</span>
<br>
<br>xxxxxxx xxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx.
<br>
<br>xxxx xxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxx</p>
</div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div style="position:relative;float:right;width:10%;margin:0 2% 0 0">
<span class="h2b">xxxxxxx </span>
<p>xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxx
<br>
<br>xxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxx
<br>
<br>xxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx
<br>
<span style="margin:1%;">- xxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxx</span>
<br>
<span style="margin:1%;">- xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxx xxxxx xxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxxx xxxxxx</span>
<br>
<span style="margin:1%;">- xxxxxxxx xxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxx</span>
<br>
<span style="margin:1%;">- xxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxxxx xxxxxxx xxxxxxxxx xxxxxxx</span>
<br>
<br>
</p>
<!-- End Right Column -->
</div>
<!-- Below is for the navigation buttons on the bottom of the screen. It goes BELOW the RIGHT COLUMN </div> -->
<div style="position:relative;width:100%;margin:0 0 0 2%;border:thin red solid">
<div style="position:relative;float:left;width:50%;padding: 0% 0% 0% 0%;background-color:#CCDDFF">
<p style="text-align:left;background-color:transparent;margin:.5% 0 .5% 1%;">
<input style="background-color:#DFCFBF" name="previous" id="previous1" type="button" value="<< Prev" onclick="page_navigation('previous')" class="round" />
<br>
<span style="padding: 0% 0% 0% 0%;margin-left:1%;" id="previous_text1" class="style_bold"></span>
</p>
</div>
<div style="position:relative;float:right;width:50%;padding: 0% 0% 0% 0%;background-color:#CCDDFF">
<p style="text-align:right;background-color:transparent;margin:.5% 1% .5% 0;">
<input style="background-color:#DFCFBF" name="next" id="next1" type="button" value="Next >>" onclick="page_navigation('next')" class="round" />
<br>
<span style="padding: 0% 0% 0% 0%;margin-right:1%;" id="next_text1" class="style_bold"></span>
</p>
</div>
</div>
<!-- Above is for the navigation buttons on the bottom of the screen -->
</div>
</section>
<!-- Begin Footer -->
<div id="footer">
<p>Copyright © All Rights Reserved.</p>
</div>
<!-- End Footer -->
</div>
<!-- End Container -->
</body>
</html>
1 个答案:
答案 0 :(得分：0)
看起来您构建了一个复杂的应用程序，通常我使用绝对布局来表示布局所代表的复杂性类型：
http://codepen.io/anon/pen/BomePJ
<div class="l-masthead">Masthead</div>
<div class="l-navigation">Navigation</div>
<div class="l-revision">Revision</div>
<div class="l-pagenav-top">Page Navigation Top</div>
<div class="l-data">
<div class="l-data-con">
<div class="l-data1">
<p>
Lorum1
</p>
<p>
Lorum2
</p>
<p>
Lorum1
</p>
<p>
Lorum1
</p>
<p>
Lorum1
</p>
</div>
<div class="l-data2">
<p>
Lorum1
</p>
<p>
Lorum2
</p>
<p>
Lorum1
</p>
<p>
Lorum1
</p>
<p>
Lorum1
</p> </div>
</div>
</div>
<div class="l-pagenav-bot">Page Navigation Bottom</div>
<div class="l-footer">Footer</div>
.l-masthead { width:100%; height:20px; top:0; left:0; position:absolute; background:orange; }
.l-navigation { width:100%; height:20px; top:20px; left:0; position:absolute; background:green; }
.l-revision { width:100%; height:20px; top:40px; left:0; position:absolute; background:lime; }
.l-pagenav-top { width:100%; height:20px; top:60px; left:0; position:absolute; background:yellow; }
.l-data { width:100%; position:absolute; top:80px; bottom:40px; left:0; }
.l-data-con { width:100%; height:100%; position:relative; }
.l-data1 { padding:20px; overflow-y:auto; position:absolute; top:0; right:50%; bottom:0; left:0; background:LightBlue; }
.l-data2 { padding:20px; overflow-y:auto;position:absolute; top:0; right:0; bottom:0; left:50%; background:LightCyan; }
.l-pagenav-bot { width:100%; height:20px; position:absolute; bottom:20px; left:0; background:yellow; }
.l-footer { width:100%; height:20px; position:absolute; bottom:0; left:0; background:orange; }
之后，这将响应平板电脑外形，我认为你将在应用程序中构建复杂的类型，它没有意义。您将不得不回到用户体验，通过电话制作像这样的复杂应用程序。
此外，将CSS从内联中移出并放入外部CSS文件中。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？