— Привет, меня зовут Максим Покровский. Вы находитесь в моем рабочем кабинете. Поскольку я фрилансер, будем считать, что именно так он и выглядит. Здесь я пишу много интересных вещей, и если вы почувствовали, что я именно тот человек, который вам нужен, то я всегда открыт для контакта.
Сделал за последнее время:
| Заказать мне работу |
| 25.02 | Структурируем HTML. Версия Покровского. |
Про чистый код я уже рассказывал. Теперь о красоте будем говорить.
— Первое правило – это соблюдение иерархии отступов. Для этого, диво как хорош notepad++ Вот, например, как выглядит хорошо структированный код в нем.
— Второе правило – это знать меру. Логика здесь такая. Мало оформления – пиши в строчку, много – блюди иерархию. Проиллюстирую:
Оформление контейнера
Нам нужно оформить контейнеру четыре уголка. Забьем пока болт на современные методы, благодаря которым можно оформить все в одном div
Красиво:
<!-- Содержимое -->
</div></div></div></div>
Некрасиво:
<div class="rt-bg">
<div class="lb-bg">
<div class="rb-bg">
<!-- Содержимое -->
</div>
</div>
</div>
</div>
Простой список
Красиво:
<li><a href="#">О нас</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Наши работы</a></li>
<li><a href="#">Наши партнеры</a></li>
</ul>
Некрасиво:
<li>
<a href="#">
О нас
</a>
</li>
<li>
<a href="#">
Услуги
</a>
</li>
<li>
<a href="#">
Наши работы
</a>
</li>
<li>
<a href="#">
Наши партнеры
</a>
</li>
</ul>
Сложный список:
Красиво:
<li>
<div class="lt-bg"><div class="rt-bg"><div class="lb-bg"><div class="rb-bg"> <!-- оформление -->
<a href="#">О нас</a>
</div></div></div></div>
</li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Наши работы</a></li>
<li><a href="#">Наши партнеры</a></li>
</ul>
Бррр…:
<li>
<div class="lt-bg">
<div class="rt-bg">
<div class="lb-bg">
<div class="rb-bg">
<a href="#">
О нас
</a>
</div>
</div>
</div>
</div>
</li>
<li>
<a href="#">
Услуги
</a></li>
<li>
<a href="#">
Наши работы
</a>
</li>
<li>
<a href="#">
Наши партнеры
</a>
</li>
</ul>
Простая таблица:
По аналогии с простым списком
<tr>
<td><a href="#">О нас</a></td>
<td><a href="#">Услуги</a></td>
<td><a href="#">Наши партнеры</a></td>
</tr>
</table>
Сложная таблица:
По аналогии со сложным списком
<tr>
<td>
<ul>
<li>
<div class="lt-bg"><div class="rt-bg"><div class="lb-bg"><div class="rb-bg"> <!-- оформление -->
<a href="#">О нас</a>
</div></div></div></div>
</li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Наши работы</a></li>
<li><a href="#">Наши партнеры</a></li>
</ul>
</td>
</tr>
</table>
Собственно вся наука.
Комментарии