响应式HTML/CSS落地页布局错乱、资源缺失及适配问题修复求助

问题修复说明 #

• 问题1（顶部内容堆叠）：原header设置了display:flex默认横向排列所有子元素，你将标题、问候语和导航栏都直接作为header的子元素，所以会横向挤在一起。修复方式是将标题、问候语移到content区域，header只保留导航模块，符合页面语义的同时解决堆叠问题。
• 问题2（主体段落竖排）：原CSS里.content的max-width被误写为65px，宽度过窄导致文字只能逐字换行。修改为650px即可正常横向排布。
• 问题3（背景图不显示/头像位置不对）：背景图不显示是因为background: url(bg.jpg)的文件路径和实际存放路径不匹配，确保bg.jpg和你的CSS文件在同一目录，文件名大小写、后缀完全一致即可；头像已经写在p标签后面，修复content宽度问题后会自动排在段落下方。
• 问题4（响应式逻辑）：核心是通过CSS媒体查询@media判断当前设备的屏幕宽度，针对不同宽度区间设置不同的样式规则，比如屏幕宽度小于768px时隐藏常规导航、显示汉堡菜单，缩小字号和页面边距，适配移动端显示。

修正后代码 #

CSS代码（style.css）

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

section{
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: url(bg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}

header{
    position: relative;
    top: 0;
    width: 100%;
    padding: 30px 100px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

header .navigation a{
    color: #000;
    background: #fff;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 2px 15px;
    border-radius: 20px;
    transition: 0.3s;
    transition-property: background;
} 

header .navigation a:not(:last-child){
    margin-right: 30px;
}

header .navigation a:hover{
    opacity: 0.8;
}

/* 汉堡按钮默认隐藏，移动端显示 */
header label{
    display: none;
    color: #fff;
    font-size: 25px;
    cursor: pointer;
}

#check{
    display: none;
}

.content{
    max-width: 650px;
    margin: 60px 100px;
}

.content .info h2{
    color: #fff;
    font-size: 55px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 60px;
    margin-bottom: 10px;
}

.content .info .greeting{
    color: #fff;
    font-size: 20px;
    margin-bottom: 30px;
}

.content .info .intro{
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 40px;
}

.content .info img{
    display: block;
    border-radius: 8px;
}

.media-icons{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto auto 30px auto;
}

.media-icons a{
    position: relative;
    color: #fff;
    font-size: 25px;
    transition: 0.3s;
    transition-property: transform;
}

.media-icons a:not(:last-child){
    margin-right: 60px;
}

.media-icons a:hover{
    transform: scale(1.5);
}

/* 响应式规则：屏幕宽度小于768px时生效 */
@media (max-width: 768px){
    header{
        padding: 30px 20px;
    }
    /* 隐藏常规导航 */
    header .navigation{
        display: none;
    }
    /* 显示汉堡按钮 */
    header label{
        display: block;
    }
    /* 勾选汉堡按钮后显示导航 */
    #check:checked ~ header .navigation{
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 80px;
        right: 20px;
        background: rgba(255,255,255,0.9);
        padding: 20px;
        border-radius: 8px;
        gap: 20px;
    }
    .content{
        margin: 30px 20px;
        max-width: 100%;
    }
    .content .info h2{
        font-size: 35px;
        line-height: 40px;
    }
}

HTML代码

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <script src="https://kit.fontawesome.com/35552f1379.js" crossorigin="anonymous"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Landing Page</title>
        <link rel="stylesheet" href="style.css">
        
    </head>
<body dir="ltr">
    <section>
        <input type="checkbox" id="check">
        <header>
            <div class="navigation">
                <a href="#">Contact</a>
                <a href="#">My Linkedin Page</a>
            </div>
            <label for="check">
                <i class="fas fa-bars menu-btn"></i>
                <i class="fas fa-times close-btn"></i>
            </label>
        </header>
        <div class="content">
            <div class="info">
                <h2>Welcome, I'm Boaz Kaplan</h2>
                <p class="greeting">Thanks for visiting my website!</p>
                <p class="intro">A student for QA studies at INT college, experienced in the fields of customer service and sound engineering. I have good interpersonal relations, always tends to look at the "big picture", and sustains high work ethics. Looking for a first chance to prove myself in the field of quality assurance, highly motivated to learn and evolve as much as I can.</p>
                <img src="תמונת פרופיל.jpg" width="106" height="69" alt="头像">
            </div>
        </div>
        <div class="media-icons">
            <a href="#"><i class="fab fa-linkedin"></i></a>
        </div>
    </section>
</body>
</html>

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