Как сделать шапку сайта? — UMI
Сделать сайт максимально индивидуальным — очень важно при его создании, даже если сайт создан на готовом шаблоне. Особенно это актуально для коммерческих площадок и блогов. Основа популярности кроется в узнаваемости ресурса, а что может работать лучше, чем запоминающийся, оригинальный верхний блок? Как сделать красивую шапку сайта — вопрос, занимающий многих веб-мастеров.
Преимущества и содержание
Наличие уникальной шапки (header) дает немало плюсов:
- узнавание фирменного логотипа, символики;
- определение тематики площадки;
- визуальное запоминание красивого фрагмента и заголовка;
- солидность, демонстрация профессионального подхода к созданию ресурса в целом.
Для специалиста вопрос того, как сделать шапку для сайта в короткие сроки, является простым. Новичку же придется изучить приличное количество материала на эту тему. Если вы собираетесь всерьез освоить веб-строительство, создавать контент и графику, вам необходимо разобраться с HTML, CSS, научиться пользоваться Photoshop и другимм программами. На сервисе 1С-UMI эта задача уже решена ― в ассортименте сотни шаблонов с уже готовыми привлекательными шапками, достаточно разместить свой лого, слоган и изображения, можно добавить индивидуальности при помощи стилей.
Верхний блок должен содержать:
- яркий, запоминающийся логотип компании, который будет хорошо заметен;
- слоган с краткой сутью информационного наполнения;
- контактные данные для предприятий и коммерсантов;
- меню навигации;
- рекламные блоки.
Не обязательно, чтобы все перечисленные пункты присутствовали в шапке. Ее главная цель — объединить элементы, различающиеся по стилю и цвету. Шапка должна соответствовать тематике и гармонировать с дизайном всего ресурса. Ее ширина и высота могут сильно разниться, наглядно видно это при открытии страниц на экранах с разной диагональю — мониторах, планшетах, смартфонах.
Как сделать шапку сайта?
Существует три способа выполнить задачу.
- С помощью специальных сервисов. Этот вариант самый элементарный, не требующий обучения работе с графическими редакторами. Надо отыскать в сети ресурсы, предоставляющие готовые шаблоны, и просто скачать понравившийся. Сервисы бывают платными и бесплатными.
- Xheader. Если вы — креативный человек, то получить индивидуальный продукт очень даже просто. Здесь предлагается вполне приемлемый набор инструментов или каталог с графическими образцами. В последнем присутствует удобная навигация — все примеры распределены по категориям, выбрать соответствующий тематике проекта не составит труда. Еще Xheader предлагает редактор картинок, где можно менять размеры, применять слои для распределения элементов в нужном порядке. Проекты сохраняются в формате XHF для обеспечения возможности редактирования, окончательный вариант имеет расширение JPG. Xheader обладает достаточными функциями для новичка, но веб-мастеру, решившему заняться разработкой на профессиональном уровне, следует все-таки обратиться к Photoshop.
- Adobe Photoshop. Эта программа предоставляет большие возможности для работы с графическим контентом. Здесь вы можете создавать полностью уникальные блоки, менять параметры, подбирать тон, обыгрывать контрасты, использовать нулевой градиент (он придаст необычные переливы). В ваших руках расположение элементов, внедрение в графику логотипа, слогана, применение различных шрифтов (только не переусердствуйте, лаконичность в таком случае важна). В общем, это наилучший инструмент в настоящее время для воплощения самых смелых и креативных идей. Как сделать шапку сайта в Фотошопе? Если вы мало работали с такой программой, посмотрите видеоуроки и поищите онлайн-пособия. Необходимо лишь понять, что делают разные инструменты, и приступить к выполнению задачи.
Как разместить блок?
Вы сделали элемент, но это только часть работы. Теперь его нужно интегрировать в структуру ресурса. Если у вас сайт на 1С-UMI, перейдите в режим редактирования и кликните по блоку с шапкой, загрузите и вставьте нужную картинку. При необходимости изменить дизайн поработайте со стилями в CSS.
Пример, как сделать шапку сайта CSS:
-
В описании #header удалите имеющиеся значения и обозначьте ширину и высоту вашего изображения.
#header{
width: ширина px;
height: фон px;
background-color: #25B33f; — фон
margin-bottom: отступ снизу px;
} -
Вставьте картинку.
#header{
width: ширина px;
height: высота px;
background-color: #25B33f;
margin-bottom: отступ снизу px;
} - Background-color используется, если изображение не отобразится в каком-либо браузере. Фиксация фотографии (во избежание ее смещения) осуществляется путем прописывания position: fixed.
Как сделать шапку сайта HTML:
-
В тег body вставьте div, идентифицировав его с двумя заголовками h2 и h4, которые являются названием и описанием соответственно.
<div>
<h2>название</h2>
<h4>описание</h4>
</div> -
Придайте вид заголовку и тексту — создайте для них два описания и укажите такие свойства:
h2{
color:#цвет заголовка;
font: размер px шрифт;
margin-left: отступ слева px;
}
h4{
width: ширина px;
color: #цвет;
font-style: стиль шрифта;
margin: расположение px;
} - Ширина h4 не должна быть большой, иначе текст займет все пространство картинки. Отступы регулируются в зависимости от того, где конкретно планируете расположить текст.
Размещение на WordPress
Поскольку большинство блогов базируются на платформе WordPress, многие веб-мастера интересуются, каким образом установить блок на этой CMS. Движок уже оснащен готовыми темами и блоками. Но есть возможность видоизменить их, добавить логотип, изображение. Как это осуществить?
- Откройте в консоли вкладку «Записи — Сделать новую».
- Переведите редактор в формат HTML, загрузите картинку, которую хотите добавить.
- После загрузки в редакторе появится код изображения. Скопируйте его, «Запись» удалите.
- Переместитесь во вкладку «Внешний вид — Редактор», откройте файл header.php для редактирования.
- В header.php найдите <div> и под этой строкой вставьте ранее скопированный код фотографии.
- Обновите файл и посмотрите, как теперь выглядит ваша шапка вместе со вставленным изображением.
- Если вам требуется передвинуть картинку, вернитесь в файловый редактор, добавьте в тег img в коде графического элемента запись style со значением margin. Пример:;
- Подвиньте фото туда, куда вам надо.
Первая страница с верхним блоком готова. После доработки деталей, поправки ошибок и прочего файл можно назвать index.html и выложить его на ваш хостинг. В дальнейшем шаблон пригодится для создания остальных страниц, меню и т.д.
Работа на конструкторе
Не все владельцы ресурсов имеют необходимые навыки для самостоятельного создания сайтов и их элементов. В таких случаях лучше всего создать сайт на конструкторе и доработать готовый шаблон, чтобы сделать его непохожим на типовые сайты. На сервисе 1С-UMI это можно сделать самостоятельно. В библиотеке сервиса предусмотрено более 500 готовых шаблонов, поэтому вам понадобится всего лишь пара минут, чтобы сделать полноценную верхнюю часть ресурса. Обратите внимание: здесь нет возможности рисовать элемент с нуля. Однако в шаблонах доступно изменение текста, шрифта, картинки, а также стилизация готовых элементов через CSS. Преимущества такого исполнения: вы тратите минимальное количество времени, но получаете результат, который полностью подходит и соответствует требованиям.
Если нет возможности дорабатывать дизайн самостоятельно, поручите это специалистам в рамках услуги «Сайт за вас». Они оформят шапку и сайт по вашим желаниями, напишут контент, подберут изображения, наполнят и запустят сайт, настроят для продвижения.
umi.ru
Заголовок HTML-страницы | HTML/xHTML
1.2KШапка сайта HTML является контейнером для метаданных, который размещается между тегами <html> и <body>. Метаданные – это информация о HTML-документе. Они не выводятся на страницу.
Метаданные определяют заголовок документа, кодировку, стилизацию, а также используются для размещения ссылок и другой информации.
К метаданным относятся следующие теги: <title>, <style>, <meta>, <link>, <script>, и <base>.
Тег <title> отвечает за заголовок документа, и обязателен для всех документов HTML/XHTML.
Элемент <title>:
- Задаёт заголовок вкладки в браузере;
- Задаёт заголовок страницы, добавленной в «Избранное»;
- Выводит заголовок страницы в выдаче поисковой системы.
Пример:
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> Содержимое документа… </body> </html>
Посмотреть демо
Перед тем, как сделать шапку сайта HTML, нужно знать, что тег <style> используется для стилизации отдельной веб-страницы:
Пример:
<style>
body {background-color: powderblue;}
h2 {color: red;}
p {color: blue;}
</style>Посмотреть демо
Элемент <link> предназначен для указания ссылок на внешние файлы CSS.
Пример:
<link rel="stylesheet" href="mystyle.css">
Посмотреть демо
Перед тем, как написать шапку сайта в HTML, помните, что <meta> используется для указания кодировки, описания страницы, перечисления ключевых слов, автора материала и других метаданных.
Метаданные используются браузерами как инструкция по выводу данных, поисковыми системами (ключевые слова), а также другими веб-сервисами.
Определяем используемую кодировку:
Вносим описание веб-страницы:
<meta name="description" content="Free Web tutorials">
Указываем ключевые слова для поисковых систем:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
Указываем автора материала:
<meta name="author" content="John Doe">
С помощью шапки сайта и ее HTML кода устанавливаем обновление страницы каждые 30 секунд:
<meta http-equiv="refresh" content="30">
Пример метатегов:
Пример:
<meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="John Doe">
Посмотреть демо
В HTML5 с помощью тега <meta> можно контролировать область просмотра (viewport) в окне браузера.
Область просмотра – это часть веб-страницы, видимая для пользователей. Она может отличаться в зависимости от используемого устройства – то есть, на мобильных устройствах она будет меньше, чем на ПК:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Этот элемент шапки сайта HTML даёт браузеру инструкции о размерах области просмотра.
Фрагмент width=device-width отвечает за ширину страницы, которая должна соответствовать ширине экрана устройства.
Фрагмент initial-scale=1.0 устанавливает исходный уровень увеличения при загрузке страницы в браузере.
Взгляните на пример веб-страницы без метатега viewport, и той же страницы с указанным тегом viewport.
Совет: если вы читаете статью на смартфоне или планшете, можете перейти по ссылкам, приведённым под картинками:
Пример без метатега viewport
Пример с метатегом viewport
Тег шапки сайта HTML CSS позволяет выполнять код JavaScript на стороне клиента. В примере ниже Javascript выводит «Hello JavaScript!» в HTML-элемент через id=»demo»:
Пример:
<script>
function myFunction {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>Посмотреть демо
Элемент определяет базовый URL и цель для всех ссылок на странице:
Пример:
<base href="https://www.w3schools.com/images/" target="_blank">
Посмотреть демо
Согласно стандарту HTML5, теги <html>, <body> и <head> можно опустить.
<!DOCTYPE html> <title>Page Title</title> <h2>This is a heading</h2> <p>This is a paragraph.</p>
Посмотреть демо
Примечание: Мы не рекомендуем опускать теги <html> и <body>. Это может негативно сказаться на работе DOM и XML, а также вызвать ошибки отображения веб-страниц в устаревших браузерах (например, IE9).
Тег Описание
<head> Предоставляет информацию о документе.
<title> Задаёт заголовок документа.
<base> Определяет основной адрес и цель для всех ссылок на странице.
<link> Отвечает за связь между документом и внешними ресурсами.
<meta> Определяет метаданные документа.
<script> Позволяет использовать скрипты на стороне клиента.
<style> Определяет стилизацию документа.
Данная публикация представляет собой перевод статьи «HTML Head» , подготовленной дружной командой проекта Интернет-технологии.ру
www.internet-technologies.ru
Анимированная шапка для сайта
Здравствуйте уважаемые начинающие веб-мастера. Продолжаем экспериментировать с анимацией.
Вот некоторые идеи, для создания шапки сайта.
Можно использовать так как есть, а можно взять только некоторые действия и применить в разработке своего варианта оформления шапки или рекламного баннера.
Выплывающие заголовок и описание сайта.
Описание сайта Описание сайта
Описание сайта Описание сайта
Описание сайта Описание сайта
Код 1: Чтобы посмотреть работу этой анимации ещё раз — обновите страницу.
Астра
Код 2:
Звездопад
Название сайтаКод 3:
Смена дня и ночи
Код 4:
код 1
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
/* Шапка сайта */
.main-header {
/* Задаём относительное позиционирование */
position: relative;
/* Размер шапки сайта */
width: 100%;
height: 250px;
overflow: hidden;
/* Фон шапкм сайта */
background: steelblue;
/* Подключаем анимацию */
animation: main-hed 15s linear;
}
/* Название сайта */
.main-title{
/* Позиционируем абсолютно, относительно блока main-header */
position: absolute;
left: -2em;
right: -2em;
top: 30%;
/* Оформляем шрифт */
color: #fff;
font-family: Monotype Corsiva;
letter-spacing: 0.3em;
text-align: center;
text-transform: uppercase;
/* Подключаем анимацию */
animation: main-titl 15s linear;
}
/**/
.main-description{
/* Позиционируем абсолютно, относительно блока main-header */
position: absolute;
right: -2em;
left: -2em;
top: 50%;
/* Оформляем шрифт */
color: #fff;
font-family: Georgia;
font-size: 16px;
letter-spacing: 0.2em;
text-align: center;
font-style: italic;
/* Подключаем анимацию */
animation: main-descript 15s linear;
}/* Анимация фона шапки сайта */
@keyframes main-hed {
0% {
/* Начальный цвет */
background: #28014D;
}
/* Конечный цвет */
100% {
background: steelblue;
}
}
/* Анимация названия сайта */
@keyframes main-titl{
0% {
/* Полная прозрачность */
opacity: 0;
/* Масштабируется по вертикали и горизрнтали с нуля */
transform: scale(0);
}
100% {
/* Полная непрозрачность */
opacity: 1;
/* Конечный масштаб 1 х 1 */
transform: scale(1);
}
}
/* Анимация описания сайта */
@keyframes main-descript {
0% {
/* Начало анимации в точке внизу шапки сайта */
transform: translateY(6em);
/* Полная прозрачность */
opacity: 0;
}
/* Возрастание непрозрачности */
50% {
opacity: 0.1;
}
75% {
opacity: 0.3;
}
100% {
/* Завершение анимации в точке позиционирования */
transform: translateY(0);
/* Полная непрозрачность */
opacity: 1;
}
}
</style>
</head>
<body>
<div>
<h2>Название сайта</h2>
<p>Описание сайта Описание сайта
Описание сайта Описание сайта
Описание сайта Описание сайта</p>
</div>
</body>
</html>
В этом примере обратите внимание на то, что анимация описания сайта начинается за пределами блока main-header.
По такому же принципу можно сделать выплывающим любой блок — картинку, меню и т.д.
Код 2
Идею этой анимации я нашёл на сайте css.yoksel.ru. Вот уж кладезь экспериментов с CSS.
CSS
.man-header {
margin: 0;
overflow: hidden;
/* Цвет фона в формате hsl, радиальный градиент */
background: radial-gradient(white 80px, hsl(30, 100%, 60%) 50em);
position: relative;
height: 200px;
width: 600px;
}
/* Позиционируем эффект по центру*/
.astra {
position: absolute;
left: 50%;
top: 50%;
/* Убираем маркеры списка */
list-style: none;
/* Подключаем анимацию вращения */
animation: 30s rotate infinite linear;
}
/* Границы с тенью при помощи псевдоэлементов */
.luh,
.luh:before,
.luh:after {
position: absolute;
border: 0 solid transparent;
border-width: 2em 20em;
width: 0px;
height: 0px;
box-shadow: 0 0 2em .5em white;
}
/* Разбег лучей */
.luh {
left: -20em;
top: 50%;
margin-top: -2em;
transform: rotate(.3deg);
}
/* Длина лучей зависит от позиции*/
.luh:before,
.luh:after {
left: -20em;
top: -2em;
display: block;
content: "";
}.luh:before {
transform: rotate(60deg);
}
.luh:after {
transform: rotate(-60deg);
}
/* Добавляем смещение для каждой группы лучей с помощью псевдокласса */
.luh:nth-child(2){
transform: rotate(15deg);
}
.luh:nth-child(3){
transform: rotate(30deg);
}
.luh:nth-child(4){
transform: rotate(45deg);
}
@keyframes rotate {
100% {
transform: rotate(90deg);
}
}
.name {
z-index: 1;
position: absolute;
left: 27%;
top: 20%;
z-index: 1;
font: bold 40px 'Monotype Corsiva';
color: hsl(70, 100%, 70%);
text-align: center;
/* Обводка текста тенями */
text-shadow: -1px -1px #EE8A08,
-2px -2px #EE8A08,
-1px 1px #EE8A08,
-2px 2px #EE8A08,
1px 1px #EE8A08,
2px 2px #EE8A08,
1px -1px #EE8A08,
2px -2px #EE8A08,
}
HTML
<div>
<p>Название сайта</p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
Код 3
Код очень простой, поэтому я не стал перегружать его комментариями. Если что кому-то не понятно спросите к комментах.
CSS
.space {
width: 600px;
height: 200px;
/* Фон - размноженная картинка */
background-image: url(images/129a.jpg);
position: relative;
}
/* Мигающие и падающие звёзды */
.stars1,
.stars2,
.stars3,
.stars4,
.stars5,
.stars6,
.stars7,
.stars8,
.stars9,
.stars10 {
position: absolute;
border-radius: 50%/50%;
background-image: -webkit-radial-gradient(white, black);
width: 3px;
height: 3px;
}
/* Позиционируем звёзды по верху блока */
.stars1 {
top: 8%;
left: 3%;
/* Подключаем анимации с разным временем срабатывания */
animation: stars1 4s 3s linear infinite;
}
.stars2 {
top: 3%;
left: 10%;
animation: stars2 2s linear infinite;
}
.stars3 {
top: 15%;
left: 25%;
animation: stars3 5s 1s linear infinite;
}
.stars4 {
top: 12%;
left: 35%;
animation: stars4 6s 2s linear infinite;
}
.stars5 {
top: 23%;
left: 47%;
animation: stars5 2.5s 1s linear infinite;
}
.stars6 {
top: 11%;
left: 60%;
animation: stars6 7s linear infinite;
}
.stars7 {
top: 20%;
left: 70%;
animation: stars7 2s 1s linear infinite;
}
.stars8 {
top: 12%;
left: 80%;
animation: stars8 4s linear infinite;
}
.stars9 {
top: 30%;
left: 90%;
animation: stars9 3s 2s linear infinite;
}
.stars10 {
top: 7%;
left: 98%;
animation: stars10 6s linear infinite;
}.name {
position: absolute;
left: 27%;
top: 20%;
z-index: 1;
font: 30px Impact;
color: hsl(240, 20%, 15%);
letter-spacing: 4px;
text-transform: uppercase;
text-align: center;
/* Обводка текста тенями */
text-shadow: -1px -1px hsl(50, 50%, 50%),
-2px -2px hsl(50, 50%, 50%),
-1px 1px hsl(50, 50%, 50%),
-2px 2px hsl(50, 50%, 50%),
1px 1px hsl(50, 50%, 50%),
2px 2px hsl(50, 50%, 50%),
1px -1px hsl(50, 50%, 50%),
2px -2px hsl(50, 50%, 50%);
}
/* Мигающие */
@keyframes stars2 {
0% {
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes stars5 {
0% {
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes stars7 {
0% {
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes stars9 {
0% {
opacity: 1;
}
100%{
opacity: 0;
}
}
/* Падающие */
@keyframes stars1 {
0% {
width: 1px;
}
7% {
width: 6px;
opacity: 1;
transform: translate(150px, 150px);
}
8% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars3 {
0% {
width: 3px;
}
12% {
width: 10px;
opacity: 1;
transform: translate(-200px, 200px);
}
13% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars4 {
0% {
width: 3px;
}
10% {
width: 10px;
opacity: 1;
transform: translate(200px, 300px);
}
11% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars6 {
0% {
width: 3px;
}
10% {
width: 10px;
opacity: 1;
transform: translate(-400px, 300px);
}
11% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars8 {
0% {
width: 3px;
}
10% {
width: 10px;
opacity: 1;
transform: translate(-300px, 300px);
}
11% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars10 {
0% {
width: 3px;
}
10% {
width: 10px;
opacity: 1;
transform: translate(-600px, 200px);
}
11% {
opacity: 0;
}
100% {
opacity: 0;
}
}
HTML
<div>
<p>Название сайта</p>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Код 4
CSS
.panorama{
width: 900px;
height: 300px;
left: 0;
top: 0;
overflow: hidden;
background: #4FC3F7;
position: relative;
animation: main-layout 40s linear infinite;
}
.ground { /* Полоска земли */
display: block;
position: absolute;
width: 100vw;
height: 40px;
left: 0;
bottom: 0;
background: #F4511E;
z-index: 10;
}
.sun { /* Солнышко */
position: absolute;
width: 150px;
height: 150px;
top: 250px;
left: 750px;
background: #FFF;
border-radius: 50%;
z-index: 1;
animation: main-sun 40s linear infinite;
}
.selen{ /* Луна */
position: absolute;
top: 0;
left: 800px;
width: 80px;
height: 80px;
border-radius: 50%;
background: #fff;
animation: main-selen 40s linear infinite;
}
.selen::before { /* Затемнение для плумесяца */
content: "";
position: absolute;
left: -5px;
top: -5px;
width: 80px;
height: 80px;
border-radius: 50%;
background: #030104;
}
.safari,
.africa,
.egipet { /* Слова на пирамидах */
font-family: Impact;
position: absolute;
color: #fff;
transform: rotate(40deg);
z-index: 5;
text-shadow: 1px 1px #050505,
2px 2px #050505,
3px 3px #050505,
4px 4px #050505;
}
.safari{
top: 150px;
left: 310px;
font-size: 35px;
letter-spacing: 0.4em;
z-index: 5;
}
.africa {
top: 190px;
left: 630px;
font-size: 30px;
letter-spacing: 0.3em;
z-index: 5;
}
.egipet {
top: 205px;
left: 105px;
font-size: 22px;
letter-spacing: 0.3em;
z-index: 5;
}
.shadow { /* Тени пирамид */
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 8%;
left: -50%;
background: #333;
transform: rotate(30deg);
}
.pyramid { /* Блоки пирамид */
display: block;
position: absolute;
width: 950px;
height: 300px;
left: 50%;
bottom: 10px;
transform: translate(-50%, 0px);
z-index: 2;
}
.pr1,
.pr2,
.pr3 { /* Грани пирамид */
display: block;
position: absolute;
background: #F4511E;
overflow: hidden;
transform: rotate(45deg) translate(50%, 50%);
}
.pr1 {
width: 500px;
height: 500px;
bottom: 30px;
left: 20%;
z-index: 2;
}
.pr2 {
width: 400px;
height: 400px;
bottom: 0px;
right: 20px;
z-index: 3;
}
.pr3 {
width: 300px;
height: 300px;
bottom: 0;
left: 30px;
z-index: 4;
}
/* Анимации */
@keyframes main-sun{
0% {
transform: translateY(-10px);
background: #FF5F00;
}
25%{
transform: translateY(-260px);
background: #fff;
width:80px;
height:80px;
}
35%{
transform: translateY(-260px);
}
40% {
background: #fff;
}
60%{
transform: translateY(10px);
width:150px;
height:150px;
background: #FF5F00;
}
}
@keyframes main-layout{
0% {
background: #333333;
}
10%{
background: #4FC3F7;
}
40%{
background: #4FC3F7;
}
50% {
background: #333333;
}
55% {
background-image: url(images/129a.jpg);
}
100% {
background-image: url(images/129a.jpg);
}
}
@keyframes main-selen {
0% {
opacity: 0;
}
55% {
opacity: 0;
}
60% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
HTML
<div>
<div>Safari</div>
<div>Africa</div>
<div>Egypt</div>
<div></div>
<div></div>
<div></div>
<div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
</div>
<div></div>
</div>
О том как сделать смену фоновых изображений в шапке сайта, читайте в следующей статье: Слайдер CSS.
Желаю творческих успехов.
Рекомендую: Готовые HTML шаблоны на русском
starper55plys.ru
Верстаем сайт motive – стили для шапки сайта (часть2)
В прошлой части мы сделали разметку для нашей шапки сайта. В данной статье мы оформим с помощью css стилей.
Если вы не читали первую часть статьи, то вот на нее ссылка.
За cтили у нас отвечает файл style.css.
В начале мы начнем с некоторых сбросов стилей. Для этого уберем все отступы, обтекания, черную точку для маркированного списка.
style.css
* { margin: 0; padding: 0; } /* убирает отступы */
clr { clear: both; } /* убираем обтекание (для чего это нужно будет объяснено позже) */
ul li { list-style: none; } /* убираем черные точки у маркированных списков */
Подготовительные работы закончены, далее начинаем описывать нашу шапку сайта.
Без стилей наш index.html выглядит следующим образом:
Начнем описание стилей с главного контейнера для шапки header, для него нам прописать следующие стили:
style.css
header{
overflow: hidden; /* управляет блочным элементов если он полностью не помещается в область заданных размеров*/
width: 1139px; /* ширина нашего макета */
margin: 0 auto 50px auto; /* снизу отступ 50px слева и справа вычисляется автоматически (auto) */
}
Наша логотип, меню и форма поиска будет находиться в блоке header-center. Пропишем для него стили. Нам нужно добавить отступы сверху и снизу.
style.css
.header-center{
overflow: hidden;
margin:50px 0px 105px 0px;
}
В данном свойстве сверху отступ 50px, а снизу 105. Свойство overflow описывал для блока header.
Теперь посмотрим на результат в браузере:
Теперь начнем описывать все блоки, которые находятся внутри header-center.
Стили для логотипа
Начнем описание с логотипа. Для него мы укажем свойство float: left. За счет него логотип будет прижат к левому краю, а все остальные элементы будут обтекать его справа.
style.css
.logo{
float: left;
}
Стили для меню
Далее мы начнем описывать наше меню. Оно представляет собой маркированный список. В самом начале статьи мы указали свойство list-style: none, т.е. за счет него мы убрали черные точки по – умолчанию. Первой, что нам следует сделать для меню, это сделать отступы сверху и слева. Для этого пропишем следующие стили.
style.css
.menu {
float: left; /* за счет данного свойства форма поиска будет обтекать меню справа */
margin: 30px 0px 0px 294px; /* отступ сверху 30px и слева 294px */
}
Теперь каждый пункт меню находится на новой строчке, нам нужно сделать переместить пункты меню в одну строку, и сделать небольшой отступ справа:
style.css
.menu li {
float: left;
margin: 0px 23px 0px 0px;
}
Результат
Теперь нам нужно поработать над шрифтом нашего меню:
style.css
.menu li a {
font-size: 15px; /* размер шрифта */
color:#565656; /* цвет шрфита */
font-family: "Open Sans Semibold"; /* семейство шрифта */
text-decoration: none; /* убираем подчеркивание текста */
}
.menu li a:hover { /* описываем стили при наведенном мышки на пункт меню */
/* для этого нам надо добавить нижнию линию и отступит от текста снизу 15px */
border-bottom: 1px solid #565656;
padding: 0 0 15px 0;
}
Результат
В следующей части мы продолжим верстать нашу шапку сайта. Нам осталось сделать форму поиска, логотип и добавить черную линию.
rusweb24.ru
Как закрепить шапку сайта при скролле
Всем привет. Сегодня посмотрел статистику поисковых запросов, по которым люди переходят на блог и обнаружил, что есть несколько совсем не релевантных. Нет, не блогу, а статьям.
Один из них как зафиксировать шапку сайта? Я тут же решил исправить положение и написать статью, так как тема актуальная, и есть вопросы в данной области.
Вообще, существует несколько способов того, как закрепить шапку сайта при прокрутке страницы. Можно воспользоваться javascript, но я не очень силен в этой теме и только изучаю ее. Поэтому, пока, будем обходиться css. Слава Богу, зафиксировать шапку сайта (да и не только шапку, а любой другой элемент), можно «малой кровью» 🙂
На самом деле, метод фиксации элемента при прокрутке страницы очень простой, и вы удивитесь, как просто решается данная проблема.
Фиксация шапки при прокрутке страницы
Для того, чтобы зафиксировать шапку, придется создать два блока. Один — для того, чтобы была возможность центрировать шапку. А в нем дочерний, который и будет фиксироваться. Начнем…
<div> <div> </div> </div>
Вот такая простая html структура! Теперь добавим стили!
#headerMain {
width:920px;
height: 195px;
margin:0px auto;
z-index:0;
}
#header {
width:920px;
height: 195px;
background: url(../img/bg-header.jpg) no-repeat;
position: fixed;
z-index: 9999;
}
Теперь шапка будет зафиксирована вверху экрана и будет неподвижна при прокрутке.
Скачать исходник
Вот такая маленькая статья получилась сегодня. Если будут вопросы – пишите их в комментариях. Постараюсь помочь. До встречи на смартлендинг
smartlanding.biz