0

我找到了这个全宽 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>
4

2 回答 2

1

如果您在此站点上进行快速 Google 搜索或搜索，则有很多示例。查看您的代码可以提供很多建议，例如创建一个单独的 css 文件并通过 HTML 链接它。这样可以更轻松地阅读和编写代码。

以最简单的方式回答您的问题，您可以通过执行以下操作来做到这一点：

CSS

.sidebar {padding: 20px; float: right; min-height: 400px; background-color: #CCCCCC;}

HTML

<div class="sidebar">
<p>Side Bar </p>

于 2013-09-13T23:10:46.120 回答
0

这是带有侧边栏的基本布局。

<!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>
于 2013-09-13T23:04:34.890 回答