1、单列布局
单列布局通常用于简单的博客或文档页面。页面内容在一个单一的垂直流中展示。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>单列布局示例</title>
<style>
/* 样式内容 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #333;
background-color: #f4f4f4;
}
header {
background: #333;
color: #fff;
padding: 20px 0;
text-align: center;
}
header nav ul {
list-style: none;
padding: 0;
}
header nav ul li {
display: inline;
margin-right: 10px;
}
header nav ul li a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
background: #fff;
margin: 20px auto;
max-width: 800px;
box-shadow: 0 0 10px #ccc;
}
footer {
text-align: center;
padding: 10px 0;
background: #333;
color: #fff;
}
footer p {
margin: 0;
}
</style>
</head>
<body>
<header>
<h1>我的网站</h1>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#contact">联系方式</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h2>欢迎来到我的网站</h2>
<p>这里是内容简介。</p>
</section>
<section id="about">
<h2>关于我们</h2>
<p>这里是关于我们的信息。</p>
</section>
<section id="contact">
<h2>联系方式</h2>
<p>这里是联系方式。</p>
</section>
</main>
<footer>
<p>版权所有 © 2024</p>
</footer>
</body>
</html>
2、双列布局
双列布局布局通常有一个主要内容区域和一个侧边栏，适合新闻网站、博客等。一个网页，左侧是较窄的侧边栏用于导航链接，右侧是内容显示区域。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>双列布局示例</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
min-height: 100vh; /* 使用视窗高度，确保内容充满整个屏幕高度 */
}
.sidebar {
width: 20%; /* 侧边栏宽度为总宽度的20% */
background-color: #f8f8f8;
padding: 20px;
}
.sidebar ul {
list-style: none;
padding: 0;
}
.sidebar ul li a {
text-decoration: none;
color: black;
display: block;
padding: 10px;
transition: background-color 0.3s;
}
.sidebar ul li a:hover {
background-color: #ddd;
}
.content {
flex-grow: 1; /* 内容区域填充剩余空间 */
padding: 20px;
background-color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#contact">联系方式</a></li>
</ul>
</div>
<div class="content">
<h1>欢迎来到我的网页</h1>
<p>这里是内容区域，你可以放置任何你想展示的信息。</p>
</div>
</div>
</body>
</html>
3、三列布局
三列布局通常包括两个侧边栏和一个中间的主内容区域，这种布局适用于提供大量导航选项和广告的网站。创建一个三列布局，中间宽大用于主内容，两侧较窄用于导航和广告。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>三列布局示例</title>
<style>
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
header, footer {
background-color: #333;
color: white;
padding: 1em;
text-align: center;
}
#main-container {
display: flex;
flex: 1;
padding: 20px;
}
nav, article, aside {
padding: 20px;
}
nav {
flex: 1;
background-color: #f4f4f4;
}
article {
flex: 3;
background-color: #fff;
border: 1px solid #ccc;
}
aside {
flex: 1;
background-color: #f4f4f4;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em;
}
</style>
</head>
<body>
<header>页眉 - 网站标题或Logo</header>
<div id="main-container">
<nav>左侧导航</nav>
<article>中间主内容区</article>
<aside>右侧广告或其他信息</aside>
</div>
<footer>页脚 - 版权信息或链接</footer>
</body>
</html>
4、网格布局
网格布局通过CSS Grid实现，非常灵活，适用于复杂的页面设计。使用CSS Grid技术创建一个具有多个卡片（每个卡片包含图像和文本）的响应式网格。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网格布局示例</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}
.card {
background: #f9f9f9;
border: 1px solid #ccc;
border-radius: 8px;
}
.card img {
width: 100%;
height: auto;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.text {
padding: 10px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="card">
<img src="https://via.example.com/400x200.png?text=Image+1" alt="Placeholder Image 1">
<div class="text">这是卡片1的文本。</div>
</div>
<div class="card">
<img src="https://via.example.com/400x200.png?text=Image+2" alt="Placeholder Image 2">
<div class="text">这是卡片2的文本。</div>
</div>
<div class="card">
<img src="https://via.example.com/400x200.png?text=Image+3" alt="Placeholder Image 3">
<div class="text">这是卡片3的文本。</div>
</div>
<div class="card">
<img src="https://via.example.com/400x200.png?text=Image+4" alt="Placeholder Image 4">
<div class="text">这是卡片4的文本。</div>
</div>
</div>
</body>
</html>
5、全屏布局
全屏布局通常用于着陆页面或全屏滚动网站，每个屏幕完全填满一个视觉部分。设计一个全屏滚动网站，每向下滚动一屏展示新的内容。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>全屏滚动布局</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.section {
height: 100vh; /* 视窗的100%高度 */
display: flex;
justify-content: center;
align-items: center;
font-size: 32px;
font-family: Arial, sans-serif;
color: #fff;
}
#section1 { background-color: #ff5555; }
#section2 { background-color: #55ff55; }
#section3 { background-color: #5555ff; }
#section4 { background-color: #ffff55; }
</style>
</head>
<body>
<div class="section" id="section1">第一屏</div>
<div class="section" id="section2">第二屏</div>
<div class="section" id="section3">第三屏</div>
<div class="section" id="section4">第四屏</div>
</body>
</html>