CSS构造模板
CSS构造模板
提问于 2014-04-27 14:49:44
我正在设计一个CSS模板，它由四个部分组成：-
- 标题
- 侧导航
- 主要内容
- 页脚
边导航和主要内容将呈现沿对方，(25%，75%)宽度。
我的问题是，这两个部分是否应该放在另一个容器中，还是应该与页眉和页脚位于同一级别？
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-04-27 14:55:19
取决于您的需求(现在看起来非常简单)。您可以这样做，所以我认为您应该最小化标记，并将它们设置在与页眉和页脚相同的级别上。
下面是你可以做的事情的一个例子：
小提琴
<header></header>
<nav></nav>
<main></main>
<footer></footer>CSS：
header, footer {
height: 200px;
background:green;
clear:both;
}
nav, main {
float:left;
width:25%;
height:500px;
background:gold;
}
main {
width:75%;
background:red;
}Stack Overflow用户
发布于 2014-04-27 14:55:23
边栏和导航可以在他们自己的容器内这样下去，容器与页眉和页脚处于相同的水平上。
<div class="container">
<div class="sidebar">
</div>
<div class="main-content">
</div>
</div>CSS
.container {
width:100%
}
.sidebar {
float:left;
width:25%
}
.main-content {
float:left;
width:75%;
}或者，它们都可以与页眉和页脚处于相同的级别，如下所示(但如果其中一个内容不如另一个内容，则可能会出现问题，可以使用clear:both修复)：
<div class="sidebar">
</div>
<div class="main-content">
</div>CSS
.sidebar {
float:left;
width:25%
}
.main-content {
float:left;
width:75%;
}Stack Overflow用户
发布于 2014-04-27 15:01:11
你应该使用相同的级别。您试图通过CSS实现的目标是可能的，并且这些部分应该是简单的和合乎逻辑的。过多的嵌套会造成混乱，并且使得编写正确的CSS变得更加困难。下面是一些HTML示例：
<html>
<head>
<title>My website</title>
<!-- And the rest of the head stuff, including a link to your CSS -->
</head>
<body>
<header>
<h1>My website</h1>
<nav id="headnav">
<ul>
<li>Login</li>
<li>About</li>
</ul>
</nav>
</header>
<nav id="mainnav">
<ul>
<li>First page</li>
<li>Second page</li>
<li>Third page</li>
</ul>
</nav>
<main>
<h2>Main content</h2>
<p>This is some main content text.</p>
</main>
<footer>
<p>Copyright and cookies and bears, oh my...</p>
</footer>
</body>
</html>然后，通过使用CSS定位您想要的东西。任何多余的标签都应该被剥去。下面是一些与HTML一起使用的CSS：
header {
clear: both;
width: 100%;
}
nav#mainnav {
width: 25%;
float: left;
}
main {
width: 75%;
}
footer {
clear: both;
width: 100%;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23324825
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号