新手求助：如何将HTML/CSS匹配Figma布局并解决文本定位及按钮样式问题？

本人是HTML/CSS新手，正在尝试将Figma设计转换成网页代码，要求网站适配不同屏幕尺寸。目前已将图片调整到预期位置，但无法把文本放到正确位置，也不知道怎么修改按钮的大小与颜色。

原HTML代码 #

<docType html!>
<html>
<head>
<title>Arriving soon...</title>
<link rel=stylesheet href="Stylesheets/style.css">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<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=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="logo">
<img src="Transparent%20Logo.png">  
</div>
<div id="logo-text">
<p1>Split Shield</p1>
</div>
<div id="slogan">
<p>The next generation of internet security is arriving soon...</p>    
</div>
<div id="content-button">
<button>Check out our concept</button>  
</div>   

</body>

</html>
</docType>

原CSS代码 #

body {
    background-color: #2F2F41;
}

#logo:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

#logo img {
    max-width: 31.2%;
    vertical-align: middle;
    display: inline-block;
    margin-left: 8.6%;
}

#logo-text p1 {
    font-family: 'Open Sans', sans-serif;
    color: white;
    font-weight: 700px;
    font-size: 64px;
    display: flex;
}

#slogan p {
    font-family: 'Open Sans', sans-serif;
    color: white;
    font-weight: 400px;
    font-size: 32px;
}

#button {
    font-family: 'Open Sans', sans-serif;
    color: white;
    font-size: 24px;
    text-align: center; 
}

#button button {
    background-color: #FFCC00;
    
}

解决方案及修改后的代码 #

核心修改点 #

1. 修正基础语法错误：docType写法改为标准的<!DOCTYPE html>；移除自定义<p1>标签改用标准标签；修正font-weight单位（该属性为无单位数值，如700、400）。
2. 布局调整：用Flexbox实现页面整体居中，将logo与标题放入同一容器实现横向排列，解决文本位置偏移问题。
3. 按钮样式修复：匹配HTML中按钮父元素的ID选择器，通过padding调整按钮大小，补充边框、圆角等样式。
4. 响应式适配：使用clamp()函数实现字体随屏幕宽度自适应，添加全局盒模型重置避免默认样式干扰。

修改后的HTML代码 #

<!DOCTYPE html>
<html>
<head>
<title>Arriving soon...</title>
<link rel="stylesheet" href="Stylesheets/style.css">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<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=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 顶部logo与标题容器 -->
<div class="header">
  <div id="logo">
    <img src="Transparent%20Logo.png">  
  </div>
  <div id="logo-text">
    <h1>Split Shield</h1>
  </div>
</div>

<div id="slogan">
  <p>The next generation of internet security is arriving soon...</p>    
</div>

<div id="content-button">
  <button>Check out our concept</button>  
</div>   
</body>
</html>

修改后的CSS代码 #

* {
  /* 全局重置内外边距与盒模型 */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #2F2F41;
  min-height: 100vh;
  /* Flex实现页面内容垂直居中、水平对齐 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  gap: 2rem;
}

.header {
  /* 让logo和标题横向排列 */
  display: flex;
  align-items: center;
  gap: 1rem;
}

#logo img {
  max-width: 120px;
  width: 100%;
}

#logo-text h1 {
  font-family: 'Open Sans', sans-serif;
  color: white;
  font-weight: 700;
  /* 响应式字体：最小2rem，最大4rem，随屏幕宽度动态调整 */
  font-size: clamp(2rem, 5vw, 4rem);
}

#slogan p {
  font-family: 'Open Sans', sans-serif;
  color: white;
  font-weight: 400;
  font-size: clamp(1.2rem, 3vw, 2rem);
  text-align: center;
  max-width: 800px;
}

#content-button {
  text-align: center;
}

#content-button button {
  font-family: 'Open Sans', sans-serif;
  color: #2F2F41;
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 700;
  background-color: #FFCC00;
  /* 通过padding调整按钮大小 */
  padding: 1rem 2.5rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

#content-button button:hover {
  background-color: #ffd633;
  transform: translateY(-2px);
}

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