HTML и CSS
Оформление гиперссылок
12855 
1Оформление гиперссылок вещь ответственная. Посетитель должен четко знать, что является ссылкой, а что нет. Вообще оформлением ссылок обязан заниматься дизайнер, потому что отдавать это на откуп верстальщику опасно.
Если ссылка находится в тексте, то подчеркивание крайне желательно, потому что оно однозначно ассоциируется с гиперссылкой. Часто его и оставляют, ограничиваясь только заданием другого цвета. Как вы знаете, по умолчанию ссылки имеют синий цвет. Многие специалисты по юзабилити яростно советуют не изменять прекрасный и привычный синий цвет, но эстетический взгляд дизайнера не в силах смотреть на синие ссылки и всячески старается поменять цвет. В этом вопросе я с дизайнерами солидарен.
Обычно различные эффекты применяют при наведении мыши на ссылку: изменяют цвет и фон, убирают подчеркивание, задают рамки и т.п. Имеет смысл познакомиться с эффектами поближе.
Начнем с того, что в CSS имеется псевдо-класс hover, который позволяет задавать стили для состояния при наведении курсора мыши на элемент. Например, ссылки у нас черного цвета, а при наведении курсора мыши надо изменять цвет на оранжевый. Такое поведение реализуется двумя объявлениями...
Резиновая вёрстка: используем отрицательные поля
Я недавно столкнулся с задачей, в которой надо было создать двухколоночный макет страницы с "шапкой" и "подвалом", причём в коде страницы контент должен был быть расположен перед блоком боковой колонки. Я решил воспользоваться возможностью продемонстрировать малоизвестный приём CSS-вёрстки: отрицательные поля (negative margins). Отрицательные поля позволяют нам сместить область контента за границы окна браузера, освободив место для боковой колонки.
Постановка задачи
Итак, чтобы показать, как полезны могут быть отрицательные поля для создании резиновой вёрстки, давайте-ка сделаем резиновый двухколоночный макет с "шапкой" и "подвалом". Область основного содержимого (контента) будет слева, вторая колонка - справа. Сделать это, в общем-то, довольно просто, но мы пойдем немного другим путем, потому что по условиям задачи код страницы у нас будет иметь определенную структуру.
Зная, как работают "плавающие" блоки, проще всего было бы разместить боковую панель перед блоком контента, позволив ей обтекать (float) контент с правой стороны. Однако, раз уж нам так важно, чтобы в текстовых браузерах, программах для чтения с экрана и старых браузерах, не понимающих наши таблицы стилей, сначала был виден контент, а потом уже боковая панель, значит нам надо найти такое решение, которое бы позволило разместить контент в начале кода. Причем это решение должно ещё и работать в большинстве браузеров.
Выпадающие меню на HTML и CSS
Каждый, кто решил создать свой сайт, сталкивается с потребностью создания симпатичного меню для своего сайта. В этой статье я расскажу, как при помощи обычного HTML-кода и несложных CSS-правил, можно создать отличное выпадающее меню, которое легко менять и дополнять. И для этого нам не понадобится никакой JavaScript-код!
Давайте посмотрим какое меню у нас получится
Первым и самым важным этапом, при создании выпадающего меню, является создание его структуры. Лучше всего это делать, используя ненумерованные списки. Давайте создадим вот такое простое меню:
А Вы делали такие ошибки при создании сайта?
В данной статье пойдет речь об ошибках, которые я допустил при создании своего сайта. Дело в том, что я пользуюсь интернет браузером Opera и разрабатывал сайт на этом браузере.
Когда мой сайт был готов я решил его проверить, как он смотрится в других браузерах. Когда я открыл свой сайт браузером Mozilla, то особых различий не было, в отличии от браузера Internet Explorer
У меня возникло сразу 2 проблемы. И вот в чем они заключались:
Как создать таблицу с тенью средствами HTML
Сегодня я расскажу как создавать таблицы с тенью. Примером может служить вот такая таблица
|
Данная книга в первую очередь предназначена для начинающих Web-программистов, но также содержит некоторую информацию, полезную и для профессионалов. Этот учебник научит вас работать с HTML-кодом напрямую, без использования визуальных редакторов. Здесь все построено на примерах с подробными комментариями. |
Нашли ошибку в тексте
Простая CRM
