Стилизация CSS без использования z-index, абсолютного и относительного позиционирования

Я хочу оформить веб-страницу в таком стилеЧто бы я хотел сделать

Все, о чем я мог думать, это z-индексация, абсолютное и относительное позиционирование. Итак, вот что я сделал:

Сначала я попробовал нарисовать таблицу, но на фоне были пробелы.

<!DOCTYPE html>
<html>
<head>
    <style>
        .section2{
            width:100%;
            background-color:#f5f5f5;
            height:750px;
            position: relative;
            z-index:0;
        }
        .square1{
            width:300px;
            height:300px;
            background-color:#969696;
            position: relative;
            z-index:1;
        }
        .text1{
            width:300px;
            height:260px;
            position: absolute;
            top: 0px;
            left:370px;
            z-index: -1;
        }
        .text2{
            width:300px;
            height:260px;
            position: relative;
            z-index:1;
            top: 50px;
            left:0px;
        }
        .square2{
            background:#969696;
            width:300px;
            height:300px;
            position: absolute;
            top: 350px;
            left:370px;
            z-index: -1;
        }

        .button {
            display: block;
            width: 115px;
            height: 20px;
            background: #969696;
            padding: 5px;
            text-align: center;
            border-radius: 5px;
            color: white;
            font-weight: bold;
            line-height: 25px;
        }
    </style>
</head>
<body>
    <div class = "section2">
        <div class = "square1"></div>
        <div class = "text1">
            <h2 style = "color:#7a7a7a">Heading</h2>
            <h1 style = "color:#707070">Title</h1>
            <p style = "color:#707070">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</p>
            <a class = "button">LINK</a>
        </div>
        <div class = "square2"></div>
        <div class = "text2">
            <h2 style = "color:#7a7a7a">Heading</h2>
            <h1 style = "color:#707070">Title</h1>
            <p style = "color:#707070">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</p>
            <a class = "button">LINK</a>
        </div>
      </div>
</body>
</html>

Что хорошо работает само по себе.

Я настроил его для ширины экрана 100%, размера квадрата шириной 650 пикселей и высоты 425 пикселей и верхних 530 пикселей для второго квадрата и подключил его к своему коду. Это портит существующий код: элементы div переплетаются, а код переполняется в следующий элемент div.

Кто-нибудь знает, как достичь цели, не делая того, что сделал я. Я ищу совершенно другой подход и нестандартное решение.

Посмотрите на flexbox и/или grid. (хотя для этого, вероятно, уже подойдет flexbox.)

— 30.08.2024 14:12

Привет, не могли бы вы опубликовать код, который делает то, что показано на изображении?

— 30.08.2024 14:16

Когда я говорю «изучите», это должно побудить вас в первую очередь проявить некоторые усилия. Здесь не для того, чтобы просто делать за вас вашу работу.

— 30.08.2024 14:33

сделаю это, спасибо

— 30.08.2024 14:41

html css styling

30.08.2024 14:09

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я реализовал использование сетки; Надеюсь, это поможет.

.section2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 4fr 1fr 4fr;
  background-color: #969696;
}
.square1 {
  grid-column-start: 1;
}
.text1 {
  background-color: #f5f5f5;
  padding: 4rem;
  grid-row: 1 / 3;
  grid-column: 2/3;
}

.square2 {
  grid-column-start: 2;
}

.text2 {
  grid-column- start: 1;
  grid-row: 2 / 4;
  background-color: #f5f5f5;
  padding: 4rem;
  
}

.button {
  display: block;
  width: 115px;
  height: 20px;
  background: #969696;
  padding: 5px;
  text-align: center;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  line-height: 25px;
}

<body>
    <div class = "section2">
        <div class = "square1"></div>
        <div class = "text1">
            <h2 style = "color:#7a7a7a">Heading</h2>
            <h1 style = "color:#707070">Title</h1>
            <p style = "color:#707070">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</p>
            <a class = "button">LINK</a>
        </div>
        <div class = "square2"></div>
        <div class = "text2">
            <h2 style = "color:#7a7a7a">Heading</h2>
            <h1 style = "color:#707070">Title</h1>
            <p style = "color:#707070">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</p>
            <a class = "button">LINK</a>
        </div>
      </div>
</body>

Возможно, использование классов будет чище, чем style.

— 30.08.2024 14:50

Точно, но поскольку он предоставил код в виде встроенного стиля, я не хотел его менять.

— 30.08.2024 14:54

30.08.2024 14:49