Решил Mercy- начать цикл постов о верстке. Для тех, кто этим занимается в достаточной степени — тому это совершенно не пригодится. Так же я не советую читать это тем, кто абсолютно не знает такие вещи, как HTML и CSS. Банальнейшие вещи я тут описывать не хочу и не буду. Лень, так сказать, да и в интернете это все можно найти. Чему можно будет научиться? Блочной кроссбраузерной верстке и написанию валидного кода. Но, опять же, какие-то сложные задачи я рассматривать не буду, ибо нет толку. К каждой задаче свой индивидуальный подход и всего не разобрать. Кроме того я ни слова не скажу о том, как нужно нарезать макет. Базовыми знаниями фотошопа, думаю, овладеете вы сами. Ну да ладно.
Теперь качаем макет (я нашел на одном из сайтов с бесплатными макетами) и приступаем !
Перед началом верстки нужно визуально разбить весь дизайн на блоки, дабы иметь представление, как все это верстать. Выразить мыслями это сложно, поэтому вот вам картинка: Будет что-то примерно вроде этого. Ну, т.к. мы знаем что будет и где, то можем подготовить место под содержимое, т.е. сначала сверстаем каркас всего этого. Значит создаем папочку «City Portal», в ней создаем папку «img», файл «index.html» и «style.css». И начинаем заполнять файл «index.html»
Сделали мы вот такую разметку и получилась у нас следующая вещь - http://shugich.ru/lesson/1/index.html . Не густо, верно, просто набор надписей в столбик. Теперь мы будем задавать всему этому делу стили, дабы все располагалось так, как мы хотим. Кстати, хочу заметить, что шабон у нас фиксированный с шириной 780 пикселей. Поэтому я засунул код в див (с id="all"), дабы все выровнять по центру и задать ширину. Для наглядности я задам цвет фона серым, а блока с дизайном белым
Code
/* Сброс */ * {margin: 0px; padding: 0px;} /* Убираем абсолютно все отступы. */ img {border: 0px} /* Теперь у картинки по умолчанию нет рамки. */
/* Основые стили */ html, body {background: #ccc;} #all {width: 780px; margin: 0px auto; background: #fff;} Подсветка кода от StudioAD
Показать выделенный код в новом окне
Теперь обработаем верх. Зададим пока что высоту в 50 пикселей, расположим часы по левому краю, а меню справа при помощи float. А так же зададим отступы от краев.
Code
: /* Верх */ #top {height: 50px;} #watch {float: left; padding: 10px 0px 0px 10px;} #top_menu {float: right; padding: 10px 10px 0px 0px;} Подсветка кода от StudioAD Показать выделенный код в новом окне