1. 什么是首页布局
在网站制作中，首页布局便是站点的面貌之一，节点名称叫做 Homepage。用户第一次访问你的网站时，看到的便是首页布局。因此布局的合理性以及美观程度对于用户体验有着非常重要的作用。同时，在SEO方面也有一定的作用。
实际上，首页布局除了抢眼外，还应该怎么做呢？
2. 常用布局样式介绍
2.1 单栏布局
单栏布局是最简单、最常见的布局，页面除了一个Logo及导航外，只有一个主要内容区域。这种布局清晰明了，让用户能够快速找到页面的相应内容。然而，如果你需要展示多重内容时，单栏布局就显得力不从心了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单栏布局</title>
</head>
<body>
<div class="container">
<header>
<img src="logo.png" alt="logo">
<nav>
<ul>
<li>首页</li>
<li>产品</li>
<li>关于我们</li>
</ul>
</nav>
</header>
<article>
<h1>文章标题</h1>
<p>
这里是文章内容。
</p>
</article>
<footer>
<p>?2021 My Website. All rights reserved.</p>
</footer>
</div>
</body>
</html>
2.2 双栏布局
双栏布局，是在单栏基础上增加了一列或一行，通过左右分隔栏或者上下分隔栏来展示更多的内容。其特点是布局简单，展示内容多元化。在设计上能够更好地分离正文和侧边栏，提供更好的阅读体验。所以，很多新闻网站、博客都用到了这种布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双栏布局</title>
<style>
.container {
display: flex;
width: 1000px;
margin: 0 auto;
}
.main {
width: 70%;
}
.sidebar {
width: 30%;
margin-left: 20px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="container">
<header>
<img src="logo.png" alt="logo">
<nav>
<ul>
<li>首页</li>
<li>产品</li>
<li>关于我们</li>
</ul>
</nav>
</header>
<main class="main">
<article>
<h1>文章标题</h1>
<p>
这里是文章内容。
</p>
</article>
</main>
<aside class="sidebar">
<h3>侧边栏标题</h3>
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>
</aside>
<footer>
<p>?2021 My Website. All rights reserved.</p>
</footer>
</div>
</body>
</html>
2.3 面向大屏幕的双栏布局
面向大屏幕的双栏布局，即对双栏布局的一种优化版。在布局上增加了主栏内的两、三栏的排版设计，关键信息要素突出。该布局适用于电商类网站，更能表现出产品的特性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>面向大屏幕的双栏布局</title>
<style>
.container {
display: flex;
width: 1000px;
margin: 0 auto;
}
.main {
width: 70%;
display: flex;
justify-content: space-between;
}
.sidebar {
width: 30%;
border: 1px solid #ddd;
}
.main-1, .main-2, .main-3 {
width: 30%;
}
</style>
</head>
<body>
<div class="container">
<header>
<img src="logo.png" alt="logo">
<nav>
<ul>
<li>首页</li>
<li>产品</li>
<li>关于我们</li>
</ul>
</nav>
</header>
<main class="main">
<article class="main-1">
<p>
这是主要信息1。
</p>
</article>
<article class="main-2">
<p>
与主要信息相对应的另一个补充信息2。
</p>
</article>
<article class="main-3">
<p>
与主要信息相对应的另一个补充信息3。
</p>
</article>
</main>
<aside class="sidebar">
<h3>侧边栏标题</h3>
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>
</aside>
<footer>
<p>?2021 My Website. All rights reserved.</p>
</footer>
</div>
</body>
</html>
2.4 三栏布局
三栏布局，是在双栏布局基础上再增加一栏，通常是左右两边分别是侧边栏，中间是主要内容区域。三栏布局相对于双栏布局而言，可以更好地丰富网站的内容，是一种非常实用的布局形式。但也要注意使用的时机，不要在内容页使用它。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三栏布局</title>
<style>
.container {
width: 1000px;
display: flex;
margin: 0 auto;
}
.sidebar-1 {
width: 20%;
margin-right: 20px;
}
.main {
width: 60%;
margin-right: 20px;
}
.sidebar-2 {
width: 20%;
}
</style>
</head>
<body>
<div class="container">
<aside class="sidebar-1">
<h3>侧边栏标题1</h3>
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>
</aside>
<main class="main">
<article>
<h1>文章标题</h1>
<p>
这里是文章内容。
</p>
</article>
</main>
<aside class="sidebar-2">
<h3>侧边栏标题2</h3>
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>
</aside>
</div>
</body>
</html>
2.5 网格布局
网格布局是 CSS3 所引入的一种全新的布局方式，它可以快速地将页面中的元素进行归类，进而展示为一种网络形式的布局，在开发过程中通常将某些元素分到同一行或同一列，最终实现页面中元素的高度自适应分布，适合用于网站的首页、后台等复杂页面的开发。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网格布局</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 80px 200px auto;
grid-template-areas:
"header header header"
"nav content aside"
"footer footer footer";
grid-gap: 10px;
padding: 10px;
}
header {
grid-area: header;
background-color: #eee;
}
nav {
grid-area: nav;
background-color: #ddd;
}
main {
grid-area: content;
background-color: #ccc;
}
aside {
grid-area: aside;
background-color: #bbb;
}
footer {
grid-area: footer;
background-color: #aaa;
}
</style>
</head>
<body>
<div class="container">
<header>header</header>
<nav>nav</nav>
<main>main</main>
<aside>aside</aside>
<footer>footer</footer>
</div>
</body>
</html>
以上介绍的几种布局是比较流行的，但并不是全部，应根据自己的实际需求选择适合自己的布局。