Загрузка данных
body {
font-family: Arial, sans-serif;
background-color: white;
margin: 0;
padding: 20px;
}
/* Общий главный контейнер, заменяющий table.main-table */
.main-container {
width: 850px;
margin: 0 auto;
background-color: #66ff00;
display: flex;
flex-direction: column;
}
/* Шапка */
.header-cell {
text-align: center;
padding: 15px;
}
.header-cell h1 {
margin: 0;
}
/* Контейнер для трех колонок (левая, центр, правая) */
.main-body {
display: flex;
flex-direction: row;
align-items: stretch; /* Чтобы все колонки были одинаковой высоты */
}
/* Левое меню */
.left-menu {
width: 100px;
background-color: #66ff00;
color: black;
padding: 15px;
display: flex;
flex-direction: column;
gap: 15px; /* Заменяет <br><br> */
}
.left-menu a {
text-decoration: none;
color: black;
font-weight: bold;
}
/* Центральный контент */
.content {
flex: 1; /* Занимает все оставшееся пространство */
padding: 20px;
background: white;
text-align: justify;
}
.content-title {
text-align: center;
margin-top: 0;
}
.sections-title {
text-align: center;
margin-top: 30px;
}
/* Сетка разделов вместо внутренней таблицы */
.sections-grid {
display: grid;
grid-template-columns: 1fr 1fr; /* Две равные колонки */
gap: 20px;
margin-top: 25px;
}
.section-item {
display: flex;
align-items: flex-start;
}
.icon-cell {
padding-right: 10px;
}
.icon-box, .icon-box2 {
width: 35px;
height: 35px;
background: #333;
object-fit: cover; /* Чтобы картинки не искажались */
}
/* Правое меню */
.right-menu {
width: 200px;
padding: 15px;
font-size: 12px;
background: white;
color: red;
}
.right-menu-title {
text-align: center;
margin-top: 0;
}
.book-item p {
margin: 0 0 15px 0;
}
/* Подвал */
.footer-cell {
border-top: 1px solid #000;
padding: 15px;
text-align: center;
font-size: 12px;
background: white;
}
.footer-link {
margin: 5px 0;
}
/* Копирайт в самом низу */
.bottom-copyright {
text-align: center;
font-size: 11px;
margin-top: 35px; /* Объединил с br br из старого кода */
}
/* Бегущая строка через блоки */
.marquee-block {
width: 100%;
background-color: #000000;
position: relative;
overflow: hidden;
white-space: nowrap;
height: 24px;
margin-top: 20px;
}
.marquee-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.marquee-inner {
display: inline-block;
white-space: nowrap;
animation: scroll-left 15s linear infinite;
}
.marquee-block.black-theme .marquee-inner span {
display: inline-block;
padding-right: 30px;
color: #ffffff;
background-color: #000000;
font-family: sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.marquee-inner:hover {
animation-play-state: paused;
}
@keyframes scroll-left {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-50%, 0, 0);
}
}
///////////////
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>3D Studio Max 5 (Блочная верстка)</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main-container">
<header class="header-cell">
<h1>3D Studio Max<sup>®</sup> 5</h1>
</header>
<div class="main-body">
<nav class="left-menu">
<a href="https://google.com">Главная</a>
<a href="https://google.com">Учебник</a>
<a href="https://google.com">Помощь</a>
<a href="https://google.com">Форум</a>
</nav>
<main class="content">
<h2 class="content-title">О чем и для кого эта книга</h2>
<p>В последнее время появилось очень много программ для моделирования анимации и визуализации трёхмерных миров. Каждая из них по-своему хороша, однако лучшее сочетание простоты управления и эффективности конечного результата удалось создать разработчикам из Discreet, Inc (ранее Kinetix)...</p>
<p>Из названия этой книги следует, что главный упор сделан на ознакомлении начинающего художника с основными возможностями 3D Studio Max и методами быстрой и эффективной работы.</p>
<h3 class="sections-title">Разделы книги:</h3>
<div class="sections-grid">
<div class="section-item">
<div class="icon-cell">
<img src="flag.jpg" alt="Иконка" class="icon-box">
</div>
<div class="section-text">
<b>Моделирование</b><br>
Раздел посвящен созданию и редактированию объектов сцен.
</div>
</div>
<div class="section-item">
<div class="icon-cell">
<img src="vv.jpg" alt="Иконка" class="icon-box2">
</div>
<div class="section-text">
<b>Анимация</b><br>
Существует для придания реализма и оживления миров.
</div>
</div>
</div>
</main>
<aside class="right-menu">
<h3 class="right-menu-title">Дополнительная литература</h3>
<div class="book-item">
<p><b>Филипп МИЛЛЕР и др.</b><br>«Внутренний мир 3D Studio Max 3»<br>ISBN 985-7393-49-8</p>
</div>
<div class="book-item">
<p><b>Тед БРОДМЭН</b><br>«Внутренний мир 3D Studio Max 3: Моделирование»<br>ISBN 985-7393-37-2</p>
</div>
<div class="book-item">
<p><b>Геннадий ТЕМИН</b><br>«3D Studio Max 3: Самоучитель»<br>ISBN 985-7393-37-2</p>
</div>
</aside>
</div>
<footer class="footer-cell">
<b>Дополнительные ссылки:</b>
<p class="footer-link">Проекты к книге доступны на сайте: www.dialoft.ru</p>
<p class="footer-link">Вопросы и замечания присылайте на e-mail: books@dialoft.ru</p>
</footer>
</div>
<div class="marquee-block black-theme">
<div class="marquee-wrapper">
<div class="marquee-inner">
<span>АНТОНЮК БОГДАНОВ АБДУЛЛАЕВ</span>
<span>АНТОНЮК БОГДАНОВ АБДУЛЛАЕВ</span>
</div>
</div>
</div>
<div class="bottom-copyright">
Создание сайта Москва цена
</div>
</body>
</html>