Как сделать красивые блоки
Вёрстка страницы сайта
Вёрстка страницы представляет собой процесс разработки структуры html-документа, результатом которого является веб-страница. Структура веб-страницы определяется соответствующими html-тегами. Теги — прямоугольные блоки-контейнеры для содержимого — не отображаются в окне браузера. Они сообщают браузеру о типе контента, а браузер на основании этой информации выводит на экран их содержимое — текст или медиа-файлы.
Как создать структуру страницы с помощью блоков (блочная вёрстка)
1. Как разбить макет страницы на секции
Чтобы создать макет страницы, необходимо выделить основные разделы (секции) документа. Подробнее о секционных элементах вы можете прочитать в статье 1.11. HTML5 семантические элементы.
Стандартная веб-страница содержит следующие секции:
Рис. 1. Основные секции страницы
Рис. 2. Основные секции страницы с тегом-контейнером
и задать для него максимальную ширину, внутренние отступы, которые будут отделять контент от краёв экрана устройств с небольшим разрешением, а также внешние отступы, позволяющие выровнять контейнер по середине родительского блока:
Таким образом мы получили каркас для нашей страницы (высота секций в данном случае виртуальная, так как без содержимого секции имеют нулевую высоту).
2. Разметка шапки сайта и позиционирование её элементов
Приступим к разметке первой секции, так называемой шапки веб-страницы. Элемент предназначен для группировки вводной информации и навигационных средств по странице/сайту. Добавим внутрь тега логотип сайта и навигационные ссылки:
Рис. 3. Шапка сайта с добавленными логотипом и ссылками
Разместим логотип слева, а ссылки навигации — с выравниванием по правому краю шапки (для наглядности я добавила элементам белую границу):
Существует несколько способов разместить блочные элементы в строку. Все они приведены в уроке Горизонтальное меню для сайта.
Рис. 4. Эффект схлопывания блока-контейнера
Также добавим ему вертикальные отступы, отделяющие элементы внутри него от краёв шапки. В результате стили будут иметь следующие вид:
Рис. 5. Очистка потока
Рассмотрим ситуацию, когда в качестве логотипа выступает картинка. Она может быть добавлена непосредственно внутрь тега или же в качестве фонового изображения. Картинка будет иметь свою высоту, которая может сильно отличаться от высоты меню навигации, поэтому перед нами встанет проблема вертикального выравнивания элементов шапки.
Рис. 7. Выравнивание ссылок меню шапки
3. Создание сетки для основной части страницы
Рис. 7. Сетка основной части страницы
Чтобы отделить ряды друг от друга, можно добавить нижний внешний отступ:
Высота блоков сетки определяется высотой их содержимого, поэтому она может быть разная:
Рис. 8. Разная высота элементов сетки
Рис. 9. Фоновая подложка
Если основная секция страницы содержит только два блока, то дополнительный ряд-обёртку можно не добавлять:
4. Разметка подвала страницы
Подвал страницы, или нижний колонтитул, обычно содержит информацию о копирайте, дополнительные ссылки и т.п. Вся эта информация также размещается в столбцах, которые могут быть одинаковой или разной ширины.
Красивое оформление css блоков
Знание CSS позволяет оформить на сайте красивые элементы. Это блоки, таблицы, текст, формы, ники, меню, фон, рамки и другие веб-элементы. Я подготовила подборку готовых кодов css и онлайн сервисов, где есть готовые шаблоны или возможность сгенерировать в режиме онлайн любой красивый блок.
Для того, чтобы подключить файл стилей, нужно в код веб-страницы между head вставить следующую строку между скобками :
link href=»style.css» rel=»stylesheet» type=»text/css»
Готовые стили: красивое оформление блоков css. Сервис themeshock.com
Здесь представлены 25 готовых решений. Достаточно выбрать понравившийся и скопировать код для установки на свой сайт.
Онлайн сервис layerstyles.org
Экспериментируем с разными установками теней, обводок, размытия и т.д. в знакомом интерфейсе фотошоп. Результат получаем моментально. Остается скопировать код и вставить на сайт.
Заготовка блока с чистым CSS3 без использования изображений
Для старых версий браузеров это код не будет оптимальным. Но те, кто перешел на новые современные браузеры Firefox, Safari, Сhrome, кстати Opera тоже не отстает, смогут видеть данный блок без искажений.
Ваша работа заключается в том, чтобы изменить на свои такие свойства стилей, как border — границы, drop shadow — тени и gradient — градиента.
Готовый CSS блок — код, который пишется в файле стилей style.css:
Для того, чтобы видеть правильный результат используйте последние версии Firefox, Chrome и Safari.
Это современный подход для Firefox, Chrome, Opera, Safari. За ним будущее. И уже дело веб-мастера как поступить: использовать новые технологии, пожертвовав пользователями со старыми браузерами и идти в ногу с теми, кто использует современные программы или же плестись в хвосте веб технологий. В конце концов, ничего не обновляя пользователь сам добровольно отказался от просмотра красоты, не говоря о безопасности. Поэтому, этот метод перспективный и его есть смысл использовать уже сегодня.
Красивая форма css
Сгенерировать оригинальные стили для формы, кнопки, иконки легко в онлайн сервисах. Готовые стильные формы можно использовать на подписных страницах.
Как создать css форму обратной связи
Элемент предназначен для группирования элементов формы. Такая группировка облегчает работу с формами, содержащими большое число данных.
Объединяем form и fildset, чтобы разместить текстовое поле (в данном случае это дополнительный элемент) горизонтально, а другие элементы вертикально.
Определяем стили в файле style.css:
Для того, чтобы форма заработала еще понадобится php обработчик. В вордпресс легко создавать любые контактные формы при помощи плагинов.
С помощью CSS можно сделать необыкновенные эффекты. Когда я смотрю на результат, то каждый раз загораюсь разными идеями! В сложных конструкциях просто так не разобраться. Нужно понять логику и знать какие свойства за что отвечают.
Сss затемнение картинки при наведении мыши
Нам нужно изменить или добавить эффект для отображения аватара на сайте вордпресс или на любом другом движке. Для этого находим название класса, отвечающего за внешний вывод аватарки. Затем вносим изменения в файл стилей в строке нужного класса.
и мы добавляем далее в эту строку следующий код:
filter: alpha(opacity=80) black;
и еще добавляем с hover:
filter: alpha(opacity=100) black;
В итоге имеем затемнение или осветление картинки при наведении на нее указателя мыши самым простым и быстрым способом.
Готовые макеты блоков для веб-страниц на HTML и CSS
2014-06-25 / Вр:00:49 / просмотров: 127927
Всем привет!
Однажды я подумал: для чего постоянно прописывать один и тот же код для создания каких-либо сайтов, если можно создать заготовки и пользоваться ими. Это, во-первых, ускорит время создания сайтов. Во-вторых, если прописать сразу правильно макет, то ошибки в коде значительно уменьшатся. В-третьих, те, кто пользовался генераторами шаблонов, могут о них забыть.
Итак, существуют резиновые и фиксированные макеты.
Фиксированные макеты – это когда ширина блоков задается в пикселях (px), а это значит, что размер макета сайта будет фиксированным не зависимо от размера экрана.
Резиновые макеты – это когда ширина блоков задается в процентах (%), а это значит, что макет сайта будет полностью гибким и автоматически подстраиваться под любой размер экрана.
Макет может быть одноколоночным:
Одноколоночные макеты (веб-страницы)
○ Выравниваем блок с контентом по центру экрана.
Пример :
Такое размещение блока будет полезно и интересно для дизайна:
— точки входа на сайт или в админ-панель;
— сообщения об отправленном письме и т. д.
○ Макет одной колонки:
○ Еще один вариант одноколоночного макета:
Двухколоночные макеты (веб-страницы)
Фиксированные макеты
Частенько в сети интернет встречаются двухколоночные веб-страницы. Это самые распространенные варианты верстки сайтов, так как считаются самыми удобными и для создания. А также они хорошо воспринимаются пользователями. В правой колонке размещается меню, а в левой – контент. Или в правой колонке размещается контент, а в левой – меню.
○ Двухколоночный макет (слева меню, справа контент):
○ Двухколоночный макет (слева контент, справа меню):
Примечание: чтобы поменять местами блоки, достаточно поменять значение в строках 30, 33, 41:
(слева контент, справа меню)
float: right; /* Обтекание блока по левому краю */
margin-right: 130px; /* Отступ справа */
clear: right; /* Отменяем действие float */
(слева меню, справа контент)
float: left; /* Обтекание блока по правому краю */
margin-left: 130px; /* Отступ слева */
clear: left; /* Отменяем действие float */
○ Другие варианты фиксированного макета в две колонки. С левой стороны первый блок – это контент, с правой стороны второй блок – новости и под ними меню:
○ Другие варианты фиксированного макета в две колонки. С левой стороны первый блок – это контент, с правой стороны второй блок – новости и под ними меню:
Резиновый двухколоночный макет
Многие веб-мастера используют резиновые макеты сайтов. Это удобно, так как размер сайта автоматически подстраивается под размер монитора.
○ Резиновый двухколоночный макет (слева меню, справа контент):
○ Резиновый двухколоночный макет (справа меню, слева контент):
Чтобы поменять местами меню с контентом (справа меню, слева контент), достаточно в строке 22 (.sidebar) исправить значение leftна right :
float: right; /* Обтекание справа */
и в строке 29 (.content) заменить числовое значение 10px 5px 20px 25% на 10px 25% 20px 5px
margin: 10px 25% 20px 5px; /* Значения отступа от правого блока */
○ Другие варианты резинового макета в две колонки. С левой стороны первый блок – это контент, с правой стороны второй блок – новости и под ними меню:
○ Другие варианты резинового макета в две колонки. С левой стороны первый блок – это контент, с правой стороны второй блок – новости и под ними меню:
Триколоночные макеты (веб-страницы)
Фиксированный макет в три колонки
Частенько макет как в три колонки используют для создания блога.
○ В первой колонке размещается контент, во второй колонке может находиться реклама или новости и в третей колонке меню:
○ Следующий вариант фиксированного трехблочного макета, когда в первой колонке размещается меню, во второй колонке может находиться реклама или новости и в третей колонке контент:
○ Следующий самый распространенный вариант фиксированного трехблочного макета, когда в первой колонке размещается меню, во второй колонке может находиться контент и в третьей колонке реклама или новости:
Резиновый макет в три колонки
○ В первой колонке размещается контент, во второй колонке может находиться реклама или новости и в третьей колонке меню.
○ Следующий вариант резинового трехблочного макета, когда в первой колонке размещается меню, во второй колонке может находиться реклама или новости и в третьей колонке контент.
○ Следующий самый распространенный вариант резинового трехблочного макета, когда в первой колонке размещается меню, во второй колонке может находиться контент и в третьей колонке может находиться реклама или новости:
Постараюсь в следующей статье написать свои собственные макеты, может, мои решения вам покажутся лучше.