时间戳

首页 > 解决方案 > CSS - 如何定位这个“菜单”，就像我在 Figma 中所做的 UI 设计一样？

html - CSS - 如何定位这个“菜单”，就像我在 Figma 中所做的 UI 设计一样？

问题描述

正如你从标题中看到的那样，我想知道如何定位这个菜单，我将在我制作的这个 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 类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;
}

标签： htmlcssflexbox

解决方案

您的代码有几个问题

                <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 ">共享同一个类kvadrati。结果，它们都创建了一个 2x2 网格。您应该删除kvadrati4 个网格项目上的类。

.content__left_column p {
    margin-top: 69px;
    width: 40rem;
    color: #202336;
    font-size: 2.2rem;
    font-weight: 400;
}

在这部分代码中，你给<p>元素一个margin-top: 69px;. 这会导致<p>网格中的项目向下移动 69 像素。您可以使用类更改<p>Potraži svoj odmor na pravom mjestu!</p>为<h3>它的样式，这样它就不会影响其他<p>元素。

或者，由于您可能想要一个下拉列表，您可以通过使用<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>

推荐阅读