当前位置：首页 > CSS

dr制作div css

2026-04-02 08:33:48CSS

使用CSS创建DR（Design Responsive）布局

DR（Design Responsive）布局通常指响应式设计，确保网页在不同设备上都能良好显示。以下是使用DIV和CSS实现响应式布局的方法。

基础HTML结构

创建一个基本的HTML结构，使用DIV元素作为容器：

dr制作div css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Layout</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="header">Header</div>
        <div class="content">Main Content</div>
        <div class="sidebar">Sidebar</div>
        <div class="footer">Footer</div>
    </div>
</body>
</html>

基础CSS样式

在CSS文件中添加基本样式，确保布局具有响应性：

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
}

.header, .footer {
    background-color: #f4f4f4;
    padding: 20px;
    text-align: center;
}

.content {
    float: left;
    width: 70%;
    padding: 20px;
    background-color: #e2e2e2;
}

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

.footer {
    clear: both;
}

响应式设计

使用媒体查询（Media Queries）确保布局在不同屏幕尺寸下适配：

dr制作div css

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

弹性盒子布局（Flexbox）

使用Flexbox可以更灵活地控制布局：

.container {
    display: flex;
    flex-direction: column;
}

.main {
    display: flex;
    flex-wrap: wrap;
}

.content {
    flex: 70%;
}

.sidebar {
    flex: 30%;
}

@media screen and (max-width: 768px) {
    .main {
        flex-direction: column;
    }
    .content, .sidebar {
        flex: 100%;
    }
}

网格布局（CSS Grid）

CSS Grid提供了更强大的布局控制：

.container {
    display: grid;
    grid-template-areas:
        "header header"
        "content sidebar"
        "footer footer";
    grid-template-columns: 70% 30%;
    grid-gap: 10px;
}

.header {
    grid-area: header;
}

.content {
    grid-area: content;
}

.sidebar {
    grid-area: sidebar;
}

.footer {
    grid-area: footer;
}

@media screen and (max-width: 768px) {
    .container {
        grid-template-areas:
            "header"
            "content"
            "sidebar"
            "footer";
        grid-template-columns: 100%;
    }
}