网页模板
Introduction
我正在设计一个网站作为一种爱好。从下面的代码中您可能可以看出，我是一个绝对的初学者。我想要做的第一件事是创建一个很好的网页模板，我可以为每个页面使用它。到目前为止，这就是我所拥有的(为了便于访问，我把background-colors添加到了divs中)：
<!DOCTYPE html>
<html>
<head>
<title>Fiddling Bits</title>
<meta charset="utf-8">
<meta name="description" content="All Things C and Embedded C">
<meta name="author" content="Paul Dunn">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="layout">
<div class="layout header">
</div>
<div class="layout main_nav">
</div>
<div class="layout sub_nav">
</div>
<div class="layout content">
</div>
<div class="layout footer">
</div>
</div>
</body>
</html>CSS
.layout
{
position: relative;
width: 1000px;
margin: 0 auto;
}
.layout .header
{
float: left;
display: inline;
height: 100px;
background-color: red;
}
.layout .main_nav
{
float: left;
display: inline;
height: 50px;
background-color: orange;
}
.layout .sub_nav
{
float: left;
display: inline;
height: 300px;
width: 20%;
background-color: yellow;
}
.layout .content
{
float: left;
display: inline;
float: right;
height: 300px;
width: 80%;
background-color: blue;
}
.layout .footer
{
float: left;
display: inline;
height: 50px;
background-color: green;
}输出
区段
- 标题(红色)
- 主导航(橙色)
- 分航(黄)
- 内容(蓝色)
- 页脚(绿色)
结论
任何建议，您可以提供如何我可以改进，无论多么轻微，将不胜感激。
回答 1
Code Review用户
发布于 2014-01-03 07:30:45
下面是我所做的事情的一个快速演示
高地
首先，我会避免身高。让内容定义容器的高度。否则，您将遇到问题，比如当内容高于容器时。您可以在内容较小的时候设置min-height (如1行文本)。
目标样式
我注意到.layout是针对容器和节的。除非你设定了共同的风格，否则我会避免这样做。我看到您正在为1000px设置.layout宽度，将其分配给不需要1000px的元素。
<div>是块元素
。
您要知道，<div>是一个块元素。它自动占用100%的宽度，并强迫自己低于前一个元素，并强制后面的元素低于该元素。
因此，只要您的容器是1000px，它中的任何<div>都自动是1000px。
侧边栏
我们都遇到了将侧边栏安装到一边的问题，另一个就在页面上，并且有一个中心内容填充剩余的中心。
浮子
通常是在浮动中完成的，但我遇到的每个开发人员的问题是，他们将width设置为几乎所有的东西。你知道，有一种方法可以将侧边栏的宽度设置为固定大小，并让内容填充其余的空间，而不为其设置宽度：
HTML：
<div class="container">
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
</div>CSS：
.container{
overflow:hidden;
}
.sidebar{
background: red;
float:left;
width: 100px;
height: 200px;
}
.content{
background: blue;
height: 200px;
overflow:hidden;
}CSS表
不，我不是在说HTML表格。我说的是允许元素显示类似于表的display属性。它具有与表相同的HTML结构，但不是表。我更喜欢这种方法和Bootstrap似乎也在使用它。
HTML：
<div class="table">
<div>
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
</div>
</div>CSS：
.table{
display:table;
width: 100%;
height: 200px;
}
.table > *{
display:table-row;
}
.table > * > *{
display:table-cell;
}
.sidebar{
background: red;
width: 100px;
}
.content{
background: blue;
}设计趋势
正如你所知，今天的大多数网站(除了传统的和未维护的) 放下侧边栏，因为今天的人们也为移动设计。你不会一直想要一个烦人的侧边栏，它只会占用空间。
HTML5标签
如果您开始采用新的HTML5标记，情况会更好。<header>、<nav>、<section>和<footer>对初学者都有好处。
浮子力display:block
是的，如果您为一个元素设置了float，它将强制该元素成为一个块元素。这样做之后再分配一个display属性是没有用的。
https://codereview.stackexchange.com/questions/38472
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号