div制作实例css
使用 div 和 CSS 创建布局实例
以下是一个常见的 div 布局实例，包含头部、导航栏、内容区和页脚，并附上相应的 CSS 样式代码。
HTML 结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div 布局实例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<h1>网站标题</h1>
</div>
<div class="navbar">
<a href="#">首页</a>
<a href="#">关于</a>
<a href="#">服务</a>
<a href="#">联系</a>
</div>
<div class="content">
<div class="main-content">
<h2>主要内容</h2>
<p>这里是网站的主要内容区域。</p>
</div>
<div class="sidebar">
<h3>侧边栏</h3>
<p>这里是侧边栏内容。</p>
</div>
</div>
<div class="footer">
<p>版权信息 © 2023</p>
</div>
</body>
</html>CSS 样式
/* 全局样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
color: #333;
}
/* 头部样式 */
.header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 20px;
}
/* 导航栏样式 */
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* 内容区域样式 */
.content {
display: flex;
}
.main-content {
flex: 70%;
padding: 20px;
background-color: #f1f1f1;
}
.sidebar {
flex: 30%;
padding: 20px;
background-color: #ddd;
}
/* 页脚样式 */
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}响应式设计调整
为了使布局在移动设备上也能良好显示，可以添加媒体查询：
@media screen and (max-width: 768px) {
.content {
flex-direction: column;
}
.navbar a {
float: none;
width: 100%;
}
}进阶样式技巧
-
阴影效果：
.header { box-shadow: 0 2px 5px rgba(0,0,0,0.1); } -
悬停动画：
.navbar a { transition: background-color 0.3s ease; } -
圆角边框：
.sidebar { border-radius: 5px; margin: 10px; }
这个实例展示了如何使用 div 和 CSS 创建完整的网页布局，包括响应式设计和一些视觉效果增强。可以根据实际需求调整各个部分的样式和结构。
