Шапка сайта css – Как сделать шапку сайта

Как сделать шапку сайта? — UMI

Сделать сайт максимально индивидуальным — очень важно при его создании, даже если сайт создан на готовом шаблоне. Особенно это актуально для коммерческих площадок и блогов. Основа популярности кроется в узнаваемости ресурса, а что может работать лучше, чем запоминающийся, оригинальный верхний блок? Как сделать красивую шапку сайта — вопрос, занимающий многих веб-мастеров.

Преимущества и содержание

Наличие уникальной шапки (header) дает немало плюсов:

  • узнавание фирменного логотипа, символики;
  • определение тематики площадки;
  • визуальное запоминание красивого фрагмента и заголовка;
  • солидность, демонстрация профессионального подхода к созданию ресурса в целом.

Для специалиста вопрос того, как сделать шапку для сайта в короткие сроки, является простым. Новичку же придется изучить приличное количество материала на эту тему. Если вы собираетесь всерьез освоить веб-строительство, создавать контент и графику, вам необходимо разобраться с HTML, CSS, научиться пользоваться Photoshop и другимм программами. На сервисе 1С-UMI эта задача уже решена ― в ассортименте сотни шаблонов с уже готовыми привлекательными шапками, достаточно разместить свой лого, слоган и изображения, можно добавить индивидуальности при помощи стилей.

Верхний блок должен содержать:

  • яркий, запоминающийся логотип компании, который будет хорошо заметен;
  • слоган с краткой сутью информационного наполнения;
  • контактные данные для предприятий и коммерсантов;
  • меню навигации;
  • рекламные блоки.

Не обязательно, чтобы все перечисленные пункты присутствовали в шапке. Ее главная цель — объединить элементы, различающиеся по стилю и цвету. Шапка должна соответствовать тематике и гармонировать с дизайном всего ресурса. Ее ширина и высота могут сильно разниться, наглядно видно это при открытии страниц на экранах с разной диагональю — мониторах, планшетах, смартфонах.

Как сделать шапку сайта?

Существует три способа выполнить задачу.

  1. С помощью специальных сервисов. Этот вариант самый элементарный, не требующий обучения работе с графическими редакторами. Надо отыскать в сети ресурсы, предоставляющие готовые шаблоны, и просто скачать понравившийся. Сервисы бывают платными и бесплатными.

  2. Xheader. Если вы — креативный человек, то получить индивидуальный продукт очень даже просто. Здесь предлагается вполне приемлемый набор инструментов или каталог с графическими образцами. В последнем присутствует удобная навигация — все примеры распределены по категориям, выбрать соответствующий тематике проекта не составит труда. Еще Xheader предлагает редактор картинок, где можно менять размеры, применять слои для распределения элементов в нужном порядке. Проекты сохраняются в формате XHF для обеспечения возможности редактирования, окончательный вариант имеет расширение JPG. Xheader обладает достаточными функциями для новичка, но веб-мастеру, решившему заняться разработкой на профессиональном уровне, следует все-таки обратиться к Photoshop.
  3. 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-image: url(images/имя файла)
    }

  • 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. Движок уже оснащен готовыми темами и блоками. Но есть возможность видоизменить их, добавить логотип, изображение. Как это осуществить?

  1. Откройте в консоли вкладку «Записи — Сделать новую».
  2. Переведите редактор в формат HTML, загрузите картинку, которую хотите добавить.
  3. После загрузки в редакторе появится код изображения. Скопируйте его, «Запись» удалите.
  4. Переместитесь во вкладку «Внешний вид — Редактор», откройте файл header.php для редактирования.
  5. В header.php найдите <div> и под этой строкой вставьте ранее скопированный код фотографии.
  6. Обновите файл и посмотрите, как теперь выглядит ваша шапка вместе со вставленным изображением.
  7. Если вам требуется передвинуть картинку, вернитесь в файловый редактор, добавьте в тег img в коде графического элемента запись style со значением margin. Пример:;
  8. Подвиньте фото туда, куда вам надо.

Первая страница с верхним блоком готова. После доработки деталей, поправки ошибок и прочего файл можно назвать 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

Отправить ответ

avatar
  Подписаться  
Уведомление о