当前位置：首页 > CSS

div css制作网页

2026-03-31 19:34:43CSS

使用 DIV 和 CSS 制作网页

基础结构

HTML 文件应包含基本的文档结构，使用 <div> 元素划分不同区域：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="header">页眉内容</div>
    <div class="nav">导航栏</div>
    <div class="main">
        <div class="content">主要内容区</div>
        <div class="sidebar">侧边栏</div>
    </div>
    <div class="footer">页脚内容</div>
</body>
</html>

CSS 样式设计

创建 styles.css 文件，为各个 DIV 区域添加样式：

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.header {
    background-color: #333;
    color: white;
    padding: 20px;
    text-align: center;
}

.nav {
    background-color: #444;
    padding: 10px;
}

.nav a {
    color: white;
    text-decoration: none;
    margin: 0 10px;
}

.main {
    display: flex;
    min-height: 500px;
}

.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) {
    .main {
        flex-direction: column;
    }

    .content, .sidebar {
        flex: 100%;
    }
}

浮动元素示例

使用浮动创建多列布局：

.float-box {
    float: left;
    width: 30%;
    margin: 1.5%;
    padding: 15px;
    background-color: #eee;
    box-sizing: border-box;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

定位技巧

使用相对和绝对定位创建特殊效果：

.relative-container {
    position: relative;
    height: 300px;
    border: 1px solid #ccc;
}

.absolute-box {
    position: absolute;
    top: 50px;
    right: 20px;
    width: 100px;
    height: 100px;
    background-color: #ff9900;
}

阴影和圆角

为 DIV 添加视觉效果：

.shadow-box {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
}

过渡动画

为 DIV 添加悬停效果：

div css制作网页

.hover-effect {
    transition: all 0.3s ease;
    background-color: #f8f8f8;
}

.hover-effect:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}