Я хочу оформить веб-страницу в таком стилеЧто бы я хотел сделать
Все, о чем я мог думать, это 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.
Кто-нибудь знает, как достичь цели, не делая того, что сделал я. Я ищу совершенно другой подход и нестандартное решение.
🤔 А знаете ли вы, что...
С помощью HTML можно создавать упорядоченные и неупорядоченные списки.
Я реализовал использование сетки; Надеюсь, это поможет.
.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>