如何使用HTML CSS划分网站板块？新手求助实现指定效果图

根据你提供的布局图，我写了一套新手能直接用的代码，包含HTML结构和CSS样式，对应图里的顶部导航、左侧侧边栏、右侧卡片内容区：

HTML 结构 #

<!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="style.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="top-nav">
        <div class="nav-logo">Logo</div>
        <div class="nav-links">
            <a href="#">首页</a>
            <a href="#">分类</a>
            <a href="#">关于</a>
        </div>
    </header>

    <div class="container">
        <!-- 左侧侧边栏 -->
        <aside class="sidebar">
            <div class="sidebar-item">菜单1</div>
            <div class="sidebar-item">菜单2</div>
            <div class="sidebar-item">菜单3</div>
            <div class="sidebar-item">菜单4</div>
        </aside>

        <!-- 右侧主内容区 -->
        <main class="main-content">
            <div class="card">
                <h3>卡片标题1</h3>
                <p>这里是卡片内容，可根据需求修改文本和样式。</p>
            </div>
            <div class="card">
                <h3>卡片标题2</h3>
                <p>这里是卡片内容，可根据需求修改文本和样式。</p>
            </div>
            <div class="card">
                <h3>卡片标题3</h3>
                <p>这里是卡片内容，可根据需求修改文本和样式。</p>
            </div>
        </main>
    </div>
</body>
</html>

CSS 样式 #

创建一个名为style.css的文件，把下面代码粘贴进去：

/* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* 顶部导航栏样式 */
.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #2c3e50;
    color: white;
    padding: 1rem 2rem;
}

.nav-links a {
    color: white;
    text-decoration: none;
    margin-left: 1.5rem;
}

.nav-links a:hover {
    text-decoration: underline;
}

/* 整体容器布局 */
.container {
    display: flex;
    height: calc(100vh - 60px); /* 减去导航栏高度 */
}

/* 左侧侧边栏样式 */
.sidebar {
    width: 200px;
    background-color: #34495e;
    color: white;
    padding: 1.5rem 0;
}

.sidebar-item {
    padding: 1rem 1.5rem;
    cursor: pointer;
}

.sidebar-item:hover {
    background-color: #2c3e50;
}

/* 右侧主内容区样式 */
.main-content {
    flex: 1;
    padding: 2rem;
    background-color: #ecf0f1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
}

.card {
    background-color: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card h3 {
    margin-bottom: 1rem;
    color: #2c3e50;
}

使用说明 #

1. 把HTML代码保存为index.html，和style.css放在同一个文件夹里
2. 打开index.html就能看到和图里一致的布局
3. 可以直接修改文字、颜色、卡片数量等，比如把Logo换成你的网站标志，修改sidebar-item里的菜单名称，替换卡片里的内容

内容的提问来源于stack exchange，提问作者Fateme