Html CSS-如何定位此“文件”；菜单“；比如我在Figma做的UI设计？_Html_Css_Flexbox

Html CSS-如何定位此“文件”；菜单“；比如我在Figma做的UI设计？

html css

Html CSS-如何定位此“文件”；菜单“；比如我在Figma做的UI设计？,html,css,flexbox,Html,Css,Flexbox,正如你从标题中看到的，我想知道如何定位这个菜单，我将在我制作的这个UI设计中向你展示以下是一些例子：下面是我如何尝试的这是迄今为止的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic

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

编辑：这里是所有的style.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;
}

您的代码有几个问题

                <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>

在这部分代码中，你给

元素一个

边距顶部：69px。这会导致网格中的
项向下移动69像素。你可以改变你的生活

到

使用类对其进行样式设置，这样它就不会影响其他

元素

或者，由于您可能需要一个下拉列表，因此可以使用

标记来避免这种情况。有关创建自定义选择的指南，请参见

------------

下面是一个关于如何使用网格创建2x2的简单示例

如果您需要更多关于如何使用css网格的信息，请阅读或

正文{
保证金：0；
高度：80vh；
宽度：80vw；
}
.电网{
显示：网格；
网格模板：1fr 1fr/1fr 1fr；
宽度：100%；
身高：100%；
栅隙：16px；
填充：16px；
}
.grid分区{
边界半径：10px；
边框：1px纯色灰色；
}