当前位置：首页 > CSS

div css制作步骤

2026-02-26 21:36:37CSS

创建HTML结构

使用HTML5标准文档类型声明，构建基础框架。在<body>内添加需要样式化的div容器，确保每个div有清晰的类名或ID以便CSS定位。

<!DOCTYPE html>
<html>
<head>
    <title>Div CSS示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div id="header">页眉内容</div>
        <div class="content">主体内容</div>
        <div class="sidebar">侧边栏</div>
    </div>
</body>
</html>

编写基础CSS样式

新建CSS文件（如styles.css），重置默认样式并设置全局属性。使用类选择器或ID选择器针对不同div定义样式，注意盒模型属性的应用。

div css制作步骤

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    width: 80%;
    margin: 0 auto;
    background-color: #f5f5f5;
}

#header {
    height: 80px;
    background-color: #333;
    color: white;
    padding: 20px;
}

.content {
    float: left;
    width: 70%;
    padding: 15px;
}

.sidebar {
    float: right;
    width: 30%;
    padding: 15px;
    background-color: #ddd;
}

实现布局与定位

根据需求选择浮动、Flexbox或Grid布局。清除浮动避免布局坍塌，使用clearfix技巧或现代布局方案。

div css制作步骤

/* Flexbox方案示例 */
.container {
    display: flex;
    flex-wrap: wrap;
}

.content {
    flex: 70%;
}

.sidebar {
    flex: 30%;
}

/* 清除浮动传统方案 */
.container::after {
    content: "";
    display: table;
    clear: both;
}

添加响应式设计

通过媒体查询适配不同设备屏幕尺寸，调整div的排列方式和尺寸。确保移动端友好性。

@media (max-width: 768px) {
    .content, .sidebar {
        width: 100%;
        float: none;
    }

    .container {
        width: 95%;
    }
}

优化视觉效果

为div添加边框、阴影、圆角等装饰性样式，使用CSS变量维护统一设计语言。通过过渡或动画增强交互体验。

#header {
    border-bottom: 2px solid #ff5722;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 0 0 5px 5px;
}

.content {
    transition: all 0.3s ease;
}

.content:hover {
    background-color: #e9e9e9;
}

:root {
    --primary-color: #3498db;
}

.sidebar {
    border-left: 1px dashed var(--primary-color);
}