如何在CSS中添加图片底部的浅蓝色装饰区域？

你说的底部浅蓝色区域叫做页脚（Footer），完全可以不用JavaScript，只用HTML和CSS实现，下面给你最适合新手的简单方案：

1. 搭建HTML结构 #

用语义化标签划分页面的头部、主体内容和页脚，结构清晰易懂：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>页面示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 页面头部 -->
    <header class="page-header">
        <h1>你的头部标题</h1>
    </header>

    <!-- 页面主体内容 -->
    <main class="main-content">
        <p>这里放你已经做好的页面内容</p>
    </main>

    <!-- 底部浅蓝色区域（页脚） -->
    <footer class="page-footer">
        <p>页脚内的文字或其他元素</p>
    </footer>
</body>
</html>

2. 编写CSS样式 #

先重置浏览器默认样式避免干扰，再分别设置各区域的样式，重点实现页脚的效果：

/* 重置浏览器默认的边距和内边距，统一盒模型 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 头部样式，根据你的需求调整颜色、内边距 */
.page-header {
    background-color: #f5f5f5;
    padding: 20px;
    text-align: center;
}

/* 主体内容区：设置最小高度，确保内容少的时候页脚也能贴在底部 */
.main-content {
    padding: 20px;
    /* 100vh是浏览器视口高度，减去头部和页脚的总高度，你可以根据实际尺寸调整数值 */
    min-height: calc(100vh - 110px);
}

/* 页脚样式：设置浅蓝色背景，调整内边距和文字样式 */
.page-footer {
    background-color: #cceeff; /* 这个是示例浅蓝色，你可以用取色器从目标图里取准确颜色 */
    padding: 15px;
    text-align: center;
    color: #333;
    width: 100%; /* 确保页脚占满页面宽度 */
}

关键细节说明 #

• 用<footer>标签是语义化写法，比普通<div>更规范，当然你坚持用div也可以，把<footer>换成<div class="page-footer">就行。
• calc(100vh - 110px)的作用是让主体内容区占满视口剩余空间，这样不管页面内容多少，页脚都会处于页面底部；如果你的头部和页脚高度变化，记得调整这个数值。
• 之前用div没效果，大概率是没给div设置background-color、padding，或者浏览器默认的边距导致布局混乱，上面的*选择器重置样式能解决这类问题。

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