Пример адаптивной, частично сверстанной страницы в CSS и HTML с кодами.
Учусь CSS и HTML несколько дней. Верстаю в редакторе кода VSC и вам рекомендую.
Что получилось выложу на всеобщее обозрение.
2025-07-14_20-15-13.png 71,86К
0 Количество загрузок:
Код HTML
<!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="main.css">
<title>HTML + CSS</title>
</head>
<body>
<div class="wrapper">
<span class="knopka">
<a href="#">knopka</a>
</span> <span class="knopka">
<a href="#">knopka</a>
</span> <span class="knopka">
<a href="#">knopka</a>
</span> <span class="knopka">
<a href="#">knopka</a></span>
<span class="knopka">
<a href="#">knopka</a>
</span>
</div>
<div class="text-sleva"><p>
Искусственный интеллект давно перестал быть научной фантастикой и стал неотъемлемой частью
нашей повседневной жизни. С развитием технологий такие системы, как Джи Пи Ти
(Generative Pre-trained Transformer), стали активно внедряться в различные сферы деятельности
человека. Они помогают решать повседневные задачи, автоматизировать процессы и даже
создавать контент. Но что же такое Джи Пи Ти и почему он вызывает такой интерес?
</p>
</div><br>
<div class="kartinka">
<img src="image/v.png" alt="Картинка профиля">
</div>
<div class="text-sleva">
Искусственный интеллект давно перестал быть научной фантастикой и стал неотъемлемой частью
нашей повседневной жизни. С развитием технологий такие системы, как Джи Пи Ти
(Generative Pre-trained Transformer), стали активно внедряться в различные сферы деятельности
человека. Они помогают решать повседневные задачи, автоматизировать процессы и даже
создавать контент. Но что же такое Джи Пи Ти и почему он вызывает такой интерес?
</div>
</body>
</html>
Стили CSS
.text-sleva{
font-size: 18px;
max-width: 400px;
max-height: auto;
text-align: justify;
float: left;
margin-top: 10px;
margin-bottom: 10px;
}
.kartinka img{
max-width: 500px;
max-height: auto;
border-radius: 20px;
float: right;
vertical-align: top;
margin-right: 20px;
}
.knopka{
width: 100px;
height: 50px;
background-color: burlywood;
font-size: 24px;
margin-bottom: 20px;
border: 1px solid blue;
margin: 2px;
text-align: center;
padding-top: 20px;
}
a{
text-decoration: none;
}
.wrapper {
display: flex; /* вытягивает дивы в одну строку. нужно завернуть в общий див */
}
