当前位置：首页 > CSS

div css制作首页

2026-04-02 02:40:51CSS

HTML 结构设计

使用语义化标签构建基础框架，例如 <header>、<nav>、<main>、<footer>。通过 <div> 划分功能区块，如轮播图、内容区、侧边栏等。

div css制作首页

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header">
        <div class="logo">网站LOGO</div>
        <nav class="main-nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">产品</a></li>
                <li><a href="#">关于我们</a></li>
            </ul>
        </nav>
    </header>

    <main class="content">
        <section class="banner">
            <div class="slider">轮播图区域</div>
        </section>
        <article class="post-list">
            <div class="post-item">内容卡片1</div>
            <div class="post-item">内容卡片2</div>
        </article>
    </main>

    <footer class="footer">
        <div class="copyright">版权信息</div>
    </footer>
</body>
</html>

CSS 样式编写

采用 Flexbox 或 Grid 布局实现响应式设计。通过类选择器控制样式，注意盒模型和间距处理。

div css制作首页

/* 基础样式重置 */
body {
    margin: 0;
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
    background-color: #f8f9fa;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.main-nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.content {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.banner {
    height: 300px;
    background: #e9ecef;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.post-item {
    border: 1px solid #dee2e6;
    padding: 1rem;
    border-radius: 4px;
}

.footer {
    text-align: center;
    padding: 1rem;
    background-color: #343a40;
    color: white;
}

响应式处理

通过媒体查询适配不同屏幕尺寸，调整布局和字号。

@media (max-width: 768px) {
    .header {
        flex-direction: column;
        padding: 1rem;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 1rem;
    }

    .banner {
        height: 200px;
    }

    .post-list {
        grid-template-columns: 1fr;
    }
}

交互效果增强

添加悬停动画和过渡效果提升用户体验。

.main-nav a {
    text-decoration: none;
    color: #495057;
    transition: color 0.3s;
}

.main-nav a:hover {
    color: #0d6efd;
}

.post-item {
    transition: transform 0.3s, box-shadow 0.3s;
}

.post-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}