Div CSS 布局实例代码
在网页设计中，了解和掌握合理的布局技巧对于创建美观且功能性的网站至关重要，本文将介绍如何使用CSS进行基本的Div布局,并提供一些实际的例子来帮助您更好地理解这一概念。
什么是Div？
<div> 是 HTML 中的一个基本元素，它用于定义一个区域或容器，但并不自动添加任何样式，通过应用CSS，我们可以为这个区域设置背景、边框、颜色等样式,从而实现复杂的布局效果。
Div CSS 布局实例代码
简单的水平布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Div Horizontal Layout</title>
<style>
.container {
width: 960px;
margin: auto;
background-color: #f2f2f2;
}
.content {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
.left {
background-color: #e0e0e0;
width: 30%;
}
.right {
background-color: #dcdcdc;
width: 40%;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="left">左侧部分</div>
<div class="right">右侧部分</div>
</div>
</div>
</body>
</html>
垂直布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Div Vertical Layout</title>
<style>
.container {
height: 500px;
margin: auto;
background-color: #f2f2f2;
}
.header {
background-color: #ddd;
text-align: center;
font-size: 24px;
}
.sidebar {
float: left;
width: 200px;
background-color: #e0e0e0;
border-right: 1px solid #ccc;
}
.main-content {
float: right;
width: calc(100% - 200px);
}
</style>
</head>
<body>
<div class="container">
<div class="header">顶部标题</div>
<div class="sidebar">
<h3>侧边栏标题</h3>
<!-- 内容 -->
</div>
<div class="main-content">
<p>Main Content</p>
</div>
</div>
</body>
</html>
示例展示了如何使用Div和CSS来构建简单的HTML页面布局，根据需要，您可以调整宽度、高度、边距和其他属性以适应不同的设计需求，学习这些基础布局技巧后,可以进一步探索更复杂的设计方法。
上一篇