页面Footer无法固定底部、图片链接间距及响应式布局问题求助

直接给你梳理三个问题的核心原因，再上修正后的代码：

1. Footer无法固定底部 #

你CSS里把position拼成了postion，就算拼写对了，固定底部还得加bottom:0、left:0、right:0，同时要给body加padding-bottom预留footer高度，避免内容被遮挡。

2. 图片间距过大 #

别用float布局，直接给图片套个flex容器，用gap控制间距，比float稳定还能自适应窗口。你原来的padding:160没加单位，浏览器默认当px算，间距自然超大。

3. 窗口缩放布局乱 #

• h1设了固定width:900px，窗口一缩就溢出，改成max-width:900px+width:100%实现自适应
• 很多CSS属性没加单位（比如font-size:80、padding:2），浏览器解析会出问题，必须补全px
• font-weight是数值，不能加px，900px改成900就行
• HTML里header标签在body外面，不符合规范，移进去

修正后的CSS代码 #

html {
  background-image: url(https://wallpaperaccess.com/full/2510671.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 60px; /* 给footer预留高度 */
}

h1 {
  color: rgb(85, 13, 134);
  font-family: 'Patrick Hand', cursive;
  font-size: 80px;
  text-align: center;
  font-weight: 900;
  border: solid bisque;
  background-color: rgba(230, 181, 213, 0.726);
  border-radius: 10em;
  border-width: 3px;
  padding: 2px;
  max-width: 900px;
  width: 100%;
  height: 110px;
  margin: 30px auto 0;
  letter-spacing: 2px;
}

/* 图片容器用flex布局 */
.image-container {
  display: flex;
  justify-content: center;
  gap: 40px; /* 控制图片间距，可自行调整 */
  padding: 40px 20px;
  flex-wrap: wrap; /* 窗口缩小时自动换行 */
}

.image-container a {
  display: block;
}

img {
  height: 200px;
  width: 400px;
  object-fit: contain; /* 保持图片比例 */
}

footer {
  text-align: center;
  color: rgb(85, 13, 134);
  font-family: 'Patrick Hand', cursive, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(230, 181, 213, 0.726); /* 加背景避免被图片遮挡 */
  padding: 10px 0;
}

修正后的HTML代码 #

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
  <title>Cheatsheet</title>
</head>
<body>
  <header>
    <h1>HTML and CSS Cheatsheet</h1>
  </header>

  <!-- 用统一容器包裹图片 -->
  <div class="image-container">
    <a href="HTML /index.html">
      <img src="images/HTML logo.svg" alt="HTML Logo">
    </a>
    <a href="CSS Sheet/index.html">
      <img src="images/CSS Logo.svg" alt="CSS Logo">
    </a>
  </div>

  <footer>
    <p>Created by: Stephanie M.</p>
    <p>Connect with me: stephanie678@gmail.com</p>
  </footer>
</body>
</html>

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