CSS - Как расположить это «меню», как на дизайне пользовательского интерфейса, который я сделал в Figma? - PullRequest
Новая
       51

CSS - Как расположить это «меню», как на дизайне пользовательского интерфейса, который я сделал в Figma?

0 голосов
/ 05 августа 2020

Как видно из заголовка, я хочу знать, как расположить это меню, которое я покажу вам, как в этом дизайне пользовательского интерфейса, который я сделал.

Вот примеры: enter image description here

And here is how I tried to do it.

enter image description here

This is the code so far:

<!DOCTYPE html>
  Документ
Početna Destinacija O nama Партнер Prijavi se! Зарегистрируйтесь!

Оставьте свое путешествие из снова!

Потражи свой путь на правом месте!

Локация

Активность

Очена

Дата

Класс div kvadrati используется для создания этого меню. Я знаю, что это может показаться сложным для описания, но надеюсь, вы понимаете, что я имел в виду, задав этот вопрос. Я попытался использовать дисплей flexbox, но сетка все равно не удалась. Я не новичок в CSS, но ясно, что это то, с чем у меня проблемы.

Вот код CSS: 

.prvi {
    width: 22rem;
    height: 5.2rem;
    border-radius: 0.6rem;
    border: 0.1rem solid #afb0b9;
}

РЕДАКТИРОВАТЬ: Вот все стили. 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 Ответ

2 голосов
/ 05 августа 2020

Пара проблем с вашим кодом 

                <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. Вы должны удалить класс kvadrati из 4 элементов сетки. 

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

И в этой части кода вы задаете элементам <p> a 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>
...