添加边栏全宽页眉和页脚
添加边栏全宽页眉和页脚
提问于 2013-09-14 06:55:16
我找到了这个全宽的html模板，我想在页眉和页脚之间添加一个右侧栏到模板中。
如果有人对类似的模板有不同的代码，这也会有所帮助。
我不是一个开发者(学习)。我很感谢你的帮助。谢谢。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Layout</title>
<style media="all">
* {margin: 0; padding: 0;}
body {background: #e7e7e7;}
.header-outer, .content-outer, .footer-outer {width: 100%;}
.header-outer, .footer-outer {background: #c7c7c7;}
.header, .content, .footer {margin: 0 auto;}
.header, .footer {min-height: 100px; color: white; padding: 20px 0; width: 960px;}
.content {background: white; min-height: 400px; padding: 20px; width: 920px;}
</style>
</head>
<body>
<div class="header-outer">
<div class="header">
<h1>Heading text</h1>
</div>
</div>
<div class="content-outer">
<div class="content">
<p>Body text</p>
</div>
</div>
<div class="footer-outer">
<div class="footer">
<p>Footer text</p>
</div>
</div>
</body>
</html>回答 2
Stack Overflow用户
发布于 2013-09-14 07:10:46
如果你在这个网站上进行快速的谷歌搜索或搜索，会有很多的例子。在查看您的代码时，可以提供许多建议，比如创建一个单独的css文件并通过HTML链接它。这使得代码的读取和编写变得更容易。
以最简单的方式回答您的问题，您可以通过执行以下操作来实现：
CSS
.sidebar {padding: 20px; float: right; min-height: 400px; background-color: #CCCCCC;}HTML
<div class="sidebar">
<p>Side Bar </p>
Stack Overflow用户
发布于 2013-09-14 07:04:35
这是一个带有侧边栏的基本布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Layout</title>
<style media="all">
* {margin: 0; padding: 0;}
body {background: #e7e7e7;}
.header-outer, .footer-outer {width: 100%;}
.header-outer, .footer-outer {background: #c7c7c7;}
.header, .content, .footer {margin: 0 auto !important;}
.header, .footer {min-height: 100px; color: white; padding: 20px 0; width: 860px;}
.content {background: white; min-height: 400px; padding: 20px; width: 720px;}
.sidebar {background: white; min-height: 400px; padding: 20px; width: 200px;}
</style>
</head>
<body>
<div class="header-outer">
<div class="header">
<h1>Heading text</h1>
</div>
</div>
<div class="content-outer">
<center>
<table>
<tr>
<td>
<div class="content">
<p>Body text</p>
</div>
</td>
<td>
<div class="sidebar">
<p>Sidebar text</p>
</div>
</td>
</tr>
</table>
<center>
</div>
<div class="footer-outer">
<div class="footer">
<p>Footer text</p>
</div>
</div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18796433
复制相关文章
相似问题
腾讯云开发者
