— Привет, меня зовут Максим Покровский. Вы находитесь в моем рабочем кабинете. Поскольку я фрилансер, будем считать, что именно так он и выглядит. Здесь я пишу много интересных вещей, и если вы почувствовали, что я именно тот человек, который вам нужен, то я всегда открыт для контакта.
Сейчас работаю над:
|
Заказать мне работу |
| 25.02 | Структурируем HTML. Версия Покровского. |
Где-то далеко, в горах, стоит храм, тропу к которому не каждый знает. Над храмом гордо светится гламурным розовым цветом три буквы: CSS. Из прохладного помещения доносится рускоязычная речь, что заставляет бросить странный взгляд на вывеску. Обычно там где слышится русская речь, имеют место быть совсем другие три буквы.
Внутри расхаживал бородатый монах, и раздовал мудрость своим ученикам.
— …ать! Нагородили блин. Да в вашем коде, леший заблудится, — монах отвесил еще одну порцию мудрости, которая приняла форму увесистого подзатыльника.
— За что? Все верно,правильно, кроссбраузерно, — послыщалось робкие возражения.
— Ну и что. Код он как одежда на человеке. Человек может быть хороший, но если как бомж одевается, то вряд ли путного в жизни добьется. Верстать надо красиво и чисто. Про чистый код я уже рассказывал. Теперь о красоте будем говорить.
— Первое правило - это соблюдение иерархии отступов. Для этого, диво как хорош 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>
Собственно вся наука.
| 20.01 | Переходим на em |
Сейчас мы за одну минуту перестанем указывать размеры шрифта в пикселях и станем указывать их в em. (давно вообщем то пора)
Итак, вот такая конструкция:
font-size:100.01%;
}
body{
font-size:62.5%;
}
font-size:100.01%; - установили шрифт стандартного размера (16px). Почему я написал 100.01%? Это из-за проблем округления в Opera и Safari. Незнаю может уже пофиксили, но я навсякий случай продолжаю так писать.
font-size:62.5%; - Что бы не мучаться с математикой устанавливаем размер шрифта в 10px. Один раз посчитали, и хватит
Как пользоваться:
Например, нам нужен размер заголовка 24px, тогда пишем так: font-size:2.4em;
т.е 24px = 2.4em. Визаульное сходство прослеживается?
На что надо обратить внимание:
EM наследуется! Поэтому добрый совет, прописывайте размер шрифта непосредсвенно тегу …
| 27.12 | Семантика или как же лучше |
Допустим мы имеем такую картинку
Распишем идеальную семантическую раскладку:
<div id="cabinet">Вы зашли как <a href="#">admin</a></div>
</div>
В данном чтобы панелька имела именно такой вид, мы подготовим три изображения. Левое закругление, правое и сам background. Левое мы назначим на #cabinet, правое на form, а bаckground …
| ! | Самое обсуждаемое |
- 16 признаков крутого верстальщика - 33
- Семантика или как же лучше - 28
- Переходим на em - 25
- Веб-дизайнер. Кто такой? - 22
- Убираем отступ у последнего элемента списка. - 19
- Контейнер для float - блоков - 19
- Прозрачность в шрифтах - 17
- Структурируем HTML. Версия Покровского. - 17
- Если б я менял работу - 16
- Меняем лицо - 16
— Люди делятся на заказчиков и тех, кто может ими стать.
(девиз успешного фрилансера)
Они читают меня, я читаю их