Блог

Я пытался создать этот макет уже несколько недель, но, похоже, у меня просто не получается сделать это таким образом вообще!

Итак, если вас не затруднит, может кто-нибудь попытаться дать мне ссылку или что-то в этомроде, чтобы я мог продолжить работу со своим сайтом.

Вот шаг в (надеюсь) правильном направлении.

ДЕМОНСТРАЦИЯ

Здесь следует иметь в виду некоторые очень важные вещи:

основы позиционирования

установка абсолютного положения элемента позволит вам свободно размещать его на основе координат пикселей, но обычно хорошей идеей является поместить его в контейнер, чтобы ограничить его. Вы создаете контейнер для абсолютно позиционированных элементов, создавая родительский элемент с относительным положением (или любым другим, кроме статического по умолчанию).

используйте значения переменных (в процентах)

Кроме того, вы хотите расположить элементы с процентами, чтобы их можно было изменять и обеспечивать центрирование. Вы можете присвоить элементу % ширины или высоты, и это будет % от ширины или еще чего-то его первого нестатического родительского элемента.

позиционирование элементов

Затем вы можете расположить элементы на основе процентных значений, используя свойства left и top. Слева для позиции: абсолютные элементы указывают «некоторое значение с левого края первого нестатического родительского элемента». Аналогично для верхнего, нижнего и правого.

центрирование элемента

чтобы разместить элемент с абсолютным позиционированием в середине его первого нестатического родительского элемента, вы присваиваете ему левое значение 50% и верхнее значение 50%. (50% ширины родительского элемента от левого края этого родительского элемента и 50% его высоты сверху). Это позволит расположить верхний левый угол элемента посередине по отношению к родительскому. чтобы полностью центрировать элемент, вам нужно сместить его на половину ширины и высоты. Для этого можно использовать значения margin-left и margin-right с отрицательными значениями.

С этого момента вы можете просто настраивать по мере необходимости, как я делал в предоставленной демонстрации. Изучите код (также вставленный ниже для дальнейшего использования) и посмотрите, как расположены элементы и какие свойства там используются.

HTML

 <div class="container">

    <div class="block tl"></div>
    <div class="block t"></div>
    <div class="block tr"></div>
    <div class="block l"></div>
    <div class="center"></div>
    <div class="block r"></div>
    <div class="block bl"></div>
    <div class="block b"></div>
    <div class="block br"></div>

</div>
  

CSS

 .container
{
    width: 300px;
    height: 300px;
    position:relative;
    margin:100px;
}

.block, .center
{
    width:25%;
    height:25%;
    background:#5aa;
    border-radius:10px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-12%;
    margin-top:-12%;
}

.center
{
    width:30%;
    height:30%;
    margin-left:-15%;
    margin-top:-15%;
}

.center
{
    border-radius:100%;
}

.tl
{
    left:20%;
    top:20%;
}
.tr
{
    left:80%;
    top:20%;
}
.br
{
    left:80%;
    top:80%;
}
.bl
{
    left:20%;
    top:80%;
}
.t
{
    top:10%;
}
.r
{
    left:90%;
}
.b
{
    top:90%;
}
.l
{
    left:10%;
}