div制作实例css
基础 DIV 布局示例
以下是一个简单的 DIV 布局 CSS 代码，包含容器、标题和内容区域：
/* 容器样式 */
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
border: 1px solid #ddd;
}
/* 标题样式 */
.header {
font-size: 24px;
color: #333;
text-align: center;
margin-bottom: 15px;
}
/* 内容区域样式 */
.content {
background-color: white;
padding: 15px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}对应的 HTML 结构：
<div class="container">
<div class="header">这是标题</div>
<div class="content">这里是内容区域，可以放置文本或其他元素。</div>
</div>多列 DIV 布局
使用 CSS 实现两列布局（左侧导航 + 右侧内容）：
/* 外层容器 */
.wrapper {
display: flex;
gap: 20px;
}
/* 左侧导航 */
.sidebar {
width: 200px;
background: #e9e9e9;
padding: 10px;
}
/* 右侧内容 */
.main-content {
flex: 1;
padding: 10px;
background: #fff;
}对应的 HTML 结构：
<div class="wrapper">
<div class="sidebar">导航菜单</div>
<div class="main-content">主要内容区域</div>
</div>响应式 DIV 设计
通过媒体查询实现移动端适配：
.responsive-box {
width: 100%;
padding: 15px;
background: #4CAF50;
color: white;
}
/* 屏幕宽度小于 600px 时调整样式 */
@media (max-width: 600px) {
.responsive-box {
background: #2196F3;
font-size: 14px;
}
}HTML 示例：
<div class="responsive-box">此 DIV 会根据屏幕尺寸改变颜色和字体大小。</div>DIV 悬浮效果
添加悬停交互效果：
.hover-effect {
width: 150px;
height: 150px;
background: #ff9800;
transition: all 0.3s ease;
}
.hover-effect:hover {
transform: scale(1.05);
background: #ff5722;
cursor: pointer;
}HTML 示例：
<div class="hover-effect">悬停时放大并变色</div>注意事项
- 使用
box-sizing: border-box确保 padding 不影响实际宽度计算。 - 浮动布局需注意清除浮动（如使用
clearfix）。 - Flexbox 或 Grid 更适合现代复杂布局。
以上示例可直接复制到项目中调试修改。
