CSS - position 這個“菜單”就像我在 Figma 中所做的 UI 設計一樣？
[英]CSS - How to position this “menu” like on the UI design that I have made in Figma?
問題描述
正如你從標題中看到的那樣，我想知道如何在我制作的這個 UI 設計上向你展示這個菜單。
以下是示例：
這就是我嘗試做到的方式。
這是到目前為止的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div class="root flexbox">
<div class="navbar flexbox">
<div class="container flexbox align-center">
<img src="Slike/logo-avion.png" alt="">
<div class="right-column flexbox align-center">
<div class="navbar__navigation">
<a href="" class="active">Početna</a>
<a href="">Destinacija</a>
<a href="">O nama</a>
<a href="">Partner</a>
</div>
<div class="order-btn flexbox align-center">
<a href="">Prijavi se!</a>
</div>
<div class="konj flexbox align-center">
<a href="">Registriraj se!</a>
</div>
</div>
</div>
</div>
<div class="content">
<div class="container flexbox">
<div class="content__left_column">
<h2>Ostvarite svoje
putovanje iz snova!</h2>
<p>Potraži svoj odmor na pravom mjestu!</p>
<div class="linija">
<span class="linija crna-linija"></span>
</div>
<div class="kvadrati">
<div class="kvadrati prvi flexbox align-center ">
<p>Lokacija</p>
<img src="Slike/Vector.png" alt="">
</div>
<div class="kvadrati drugi flexbox align-center ">
<p>Aktivnost</p>
<img src="Slike/Vector.png" alt="">
</div>
<div class="kvadrati treci flexbox align-center ">
<p>Ocjena</p>
<img src="Slike/Vector.png" alt="">
</div>
<div class="kvadrati cetvrti flexbox align-center">
<p>Datum</p>
<img src="Slike/Vector.png" alt="">
</div>
</div>
</div>
<div class="content__right_column">
<img src="Slike/template_3_-_copy_dribble1dribble_1.png" alt="">
</div>
</div>
</div>
</div>
</body>
</html>
div class kvadrati用於制作此菜單。 我知道這可能看起來很復雜，但我希望你知道我問這個問題的意思。 我嘗試使用 flexbox 顯示和網格仍然失敗。 我不是 CSS 的初學者，但顯然這是我遇到的問題。
這是 CSS 代碼：
.prvi {
width: 22rem;
height: 5.2rem;
border-radius: 0.6rem;
border: 0.1rem solid #afb0b9;
}
編輯：這是所有 styles.css
html {
font-size: 10px;
}
* {
margin: 0;
padding: 0;
font-family: Inter;
}
.right-column {
margin-left: auto;
}
body {
background-color: #ffffff;
line-height: 3rem;
}
.container {
width: 1300px;
margin: auto;
}
.root {
font-size: 1.2rem;
flex-direction: column;
min-height: 100%;
}
.flexbox {
display: flex;
}
.align-center {
align-items: center;
}
a {
text-decoration: none;
}
html, body {
height: 100%;
}
.navbar {
margin-top: 20px;
}
.navbar__navigation a {
color: #b8becd;
display: inline-flex;
font-size: 1.5rem;
font-weight: 400;
margin-right: 20px;
}
.order-btn {
height: 4.4rem;
margin-left: 50px;
border-radius: 0.8rem;
border: 0.1rem solid #57d2a3;
margin-right: 15px;
}
.order-btn a {
padding: 21px 24px;
}
.navbar__navigation .active {
color: #202336;
}
.konj {
height: 4.4rem;
border-radius: 0.8rem;
background-color: #57d2a3;
}
.konj a {
color: #ffffff;
padding: 21px 24px;
}
.content__left_column {
margin-left: 20px;
margin-top: 200px;
}
.content__right_column {
margin-top: 90px;
margin-left: auto;
}
.content__left_column h2 {
width: 55.9rem;
color: #202336;
font-family: "Playfair Display";
font-size: 6.4rem;
font-weight: 700;
line-height: 8rem;
}
.content__left_column p {
margin-top: 69px;
width: 40rem;
color: #202336;
font-size: 2.2rem;
font-weight: 400;
}
.linija {
margin-top: 21px;
width: 3.2rem;
height: 0.3rem;
border-radius: 0.4rem;
background-color: #202336;
}
.kvadrati {
margin-top: 20px;
display: grid;
grid-template: 70px 70px / 226px 226px;
width: 226px;
height: 52px;
grid-gap: 20px;
padding: 16px;
}
.kvadrati div {
border-radius: 10px;
border: 1px solid gray;
}
1 個解決方案
解決方案1
2 已采納 2020-08-05 19:38:18
您的代碼有幾個問題
<div class="kvadrati">
<div class="kvadrati prvi flexbox align-center ">
<p>Lokacija</p>
<img src="Slike/Vector.png" alt="">
</div>
<div class="kvadrati drugi flexbox align-center ">
<p>Aktivnost</p>
<img src="Slike/Vector.png" alt="">
</div>
<div class="kvadrati treci flexbox align-center ">
<p>Ocjena</p>
<img src="Slike/Vector.png" alt="">
</div>
<div class="kvadrati cetvrti flexbox align-center">
<p>Datum</p>
<img src="Slike/Vector.png" alt="">
</div>
</div>
如您所見，網格 div <div class="kvadrati">和項目<div class="kvadrati drugi flexbox align-center ">共享相同的 class kvadrati 。 結果，它們都創建了一個 2x2 網格。 您應該刪除 4 個網格項目上的kvadrati class。
.content__left_column p {
margin-top: 69px;
width: 40rem;
color: #202336;
font-size: 2.2rem;
font-weight: 400;
}
在這部分代碼中，你給<p>元素一個margin-top: 69px; . 這會導致網格中的<p>項向下移動 69 像素。 您可以使用 class 將<p>Potraži svoj odmor na pravom mjestu!</p>更改為<h3>樣式，這樣它就不會影響其他<p>元素。
或者，由於您可能想要一個下拉列表，您可以通過使用<select>標記來避免這種情況。 有關創建自定義 select 的指南，請參見此處。
------------
這是一個關於如何使用網格創建 2x2 的簡單示例。
如果您需要有關如何使用 css 網格的更多信息，請閱讀w3schools或MDN
body { margin: 0; height: 80vh; width: 80vw; }.grid { display: grid; grid-template: 1fr 1fr / 1fr 1fr; width: 100%; height: 100%; grid-gap: 16px; padding: 16px; }.grid div { border-radius: 10px; border: 1px solid gray; }
<div class="grid"> <div></div> <div></div> <div></div> <div></div> </div>
如何在垂直CSS菜單的左側或右側放置一個下拉菜單？
[英]How would I position a dropdown to the left or right of a vertical CSS menu?
如何定位 img 使其看起來與 figma 文件中的相同？
[英]How do I position the img to look the same way it does in the figma file?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.