当前位置：首页 > CSS

div css制作框架

2026-04-02 13:57:56CSS

使用DIV+CSS制作网页框架

通过DIV+CSS布局可以创建灵活、响应式的网页框架。以下是常见的布局方法和代码示例：

基本HTML结构

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DIV布局框架</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="header">页眉</div>
        <div class="nav">导航</div>
        <div class="main">
            <div class="content">主内容区</div>
            <div class="sidebar">侧边栏</div>
        </div>
        <div class="footer">页脚</div>
    </div>
</body>
</html>

CSS样式设计

/* 重置默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 容器样式 */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* 页眉样式 */
.header {
    background-color: #333;
    color: white;
    padding: 20px;
    text-align: center;
}

/* 导航样式 */
.nav {
    background-color: #444;
    padding: 10px;
}

.nav ul {
    list-style-type: none;
    display: flex;
}

.nav li {
    margin-right: 15px;
}

.nav a {
    color: white;
    text-decoration: none;
}

/* 主要内容区样式 */
.main {
    display: flex;
    min-height: 400px;
}

.content {
    flex: 3;
    padding: 20px;
    background-color: #f5f5f5;
}

.sidebar {
    flex: 1;
    padding: 20px;
    background-color: #ddd;
}

/* 页脚样式 */
.footer {
    background-color: #333;
    color: white;
    padding: 15px;
    text-align: center;
}

响应式布局实现

添加媒体查询使布局适应不同屏幕尺寸：

@media (max-width: 768px) {
    .main {
        flex-direction: column;
    }

    .nav ul {
        flex-direction: column;
    }

    .nav li {
        margin-bottom: 5px;
        margin-right: 0;
    }
}

常见布局变体

两栏布局

.two-column {
    display: flex;
}

.left-column {
    width: 30%;
    padding: 15px;
}

.right-column {
    width: 70%;
    padding: 15px;
}

三栏布局

div css制作框架

.three-column {
    display: flex;
}

.left-col {
    width: 20%;
    padding: 15px;
}

.middle-col {
    width: 60%;
    padding: 15px;
}

.right-col {
    width: 20%;
    padding: 15px;
}