嘗試將我的 HTML/CSS 與我的 Figma 布局相匹配
[英]Trying to match my HTML/CSS to my Figma layout
問題描述
我對 CSS/HTML 還很陌生，但是我正在嘗試使用我的 Figma Design 並為其編寫代碼。 我需要網站能夠響應不同的屏幕尺寸。 我將圖像放置在我認為正確的位置，但是我似乎無法將文本放置在正確的位置，而且我不知道如何更改按鈕大小或顏色。
我已經包含了我的 Figma Design 和我的代碼。
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 個解決方案
解決方案1
0 2023-01-26 23:44:13
有很多方法可以實現您的目標，其中之一是使用網格，所以在這種情況下，我將向您展示如何使用網格模板 go，以及如何使您的代碼與 figma 設計相同。
但您需要閱讀更多有關 HTML5 和 CSS 的信息，以便將來處理更多，
至少我會關注你犯的一些錯誤，首先，HTML5聲明是這樣使用的<,doctype HTML>，第一個感嘆號，並且沒有關閉標簽。 所以你只需在第一、第二處聲明文檔類型。 您需要在您的 css 代碼中正確定位您的父母/孩子。
無論如何，這是一個通過 go 的例子
body { background-color: #2F2F41; }.grid-container { display: grid; grid-template: "ab" auto "ac" auto "ad" auto; } #logo { grid-area: a; display: flex; position: relative; justify-content: center; align-items: center; } #logo-text { grid-area: b; } #slogan { grid-area: c; } #content-button { grid-area: d; } #logo img { max-width: 100%; vertical-align: middle; } #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 { background-color: #FFCC00; width:80%; display:flex; border-radius:15px; height:3rem; justify-content:center; align-items:center; }
<head> <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 class="grid-container"> <div id="logo"> <img src="https://i.ibb.co/j5hXXVP/imgbin-macos-virtual-private.network-computer-icons-apple-png.png" alt="imgbin-macos-virtual-private.network-computer-icons-apple-png" border="0"> </div> <div id="logo-text"> <p1>Split Shield</p1> </div> <div id="slogan"> <p>The next generation of inte.net security is arriving soon...</p> </div> <div id="content-button"> <div id="button">Check out our concept</div> </div> </div> </body>
將 figma 轉換為 html 和 css
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.