Question

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

Answer 1

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

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

CSS

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

HTML

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

Answer 2

这是带侧栏的基本布局。

<!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>

添加侧栏全宽页眉和页脚

2 个答案:

CSS

HTML