CSS 网站布局
网站布局
网站通常分为页眉、菜单、内容和页脚:
有大量不同的布局设计可供选择。但是,上面的结构是最常见的结构之一
页眉
页眉通常位于网站顶部(或顶部导航菜单正下方)。它通常包含徽标或网站名称:
示例
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}
结果
导航栏
导航栏包含链接列表,可帮助访问者浏览您的网站:
示例
/* 导航栏容器 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 导航栏链接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 链接 - 悬停时更改颜色 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
结果
内容
此部分的布局通常取决于目标用户。最常见的布局是以下一种(或组合):
1 列(通常用于移动浏览器)
2 列(通常用于平板电脑和笔记本电脑)
3 列布局(仅用于台式机)
我们将创建一个 3 列布局,并在较小的屏幕上将其更改为 1 列布局:
示例
/* 创建三个相等的列,彼此浮动 */
.column {
float: left;
width: 33.33%;
}
/* 清除列后的浮动 */
.row:after {
content: "";
display: table;
clear: both;
/* 响应式布局 - 使三列堆叠在彼此之上,而不是在较小的屏幕(600px 宽或更小)上彼此相邻 */
@media screen and (max-width: 600px) {
.column { width: 100%; }
} }
结果
提示:要创建 2 列布局,请将宽度更改为 50%。要创建 4 列布局,请使用 25% 等。
提示:创建列布局的更现代方法是使用 CSS Flexbox。但是,它在 Internet Explorer 10 及更早版本中不受支持。如果您需要 IE6-10 支持,请使用浮动(如上所示)。
不等列
主要内容是您网站中最大和最重要的部分。
列宽不等的情况很常见,这样大部分空间就留给了主要内容。侧边内容(如果有)通常用作替代导航或指定与主要内容相关的信息。您可以随意更改宽度,但要记住总宽度应为 100%:
示例
.column {
float: left;
}
/* 左右列 */
.column.side {
width: 25%;
}
/* 中间列 */
.column.middle {
width: 50%;
}
/* 响应式布局 - 使三列堆叠在一起而不是彼此相邻 */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
} }
结果
页脚
页脚位于页面底部。它通常包含版权和联系信息等信息:
示例
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}
结果
响应式网站布局
通过使用上面的一些 CSS 代码,我们创建了一个响应式网站布局,根据屏幕宽度,该布局在两列和全宽列之间变化:
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
/* Header/Blog Title */
.header {
padding: 30px;
text-align: center;
background: white;
}
.header h1 {
font-size: 50px;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* Right column */
.rightcolumn {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
}
/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row::after {
content: "";
display: table;
clear: both;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>My Website</h1>
<p>Resize the browser window to see the effect.</p>
</div>
<div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" style="float:right">Link</a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Me</h2>
<div class="fakeimg" style="height:100px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
</div>
<div class="card">
<h3>Popular Post</h3>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
</div>
<div class="card">
<h3>Follow Me</h3>
<p>Some text..</p>
</div>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>
总结
本文介绍了的CSS网站布局,如有问题欢迎私信和评论