Элегантная шапка для вашего сайта - Сайт вебмастера
Меню сайта
Для Веб-Мастера Скрипты для сайта Онлайн игры Видео онлайн Картинки Заказать рекламу О нашем сайте Правила нашего сайта Обратная связь Карта сайта XML
Реклама
Наш опрос
Кому на Руси жить хорошо?
Всего ответов: 869
Статистика


Онлайн всего: 2
Гостей: 1
Пользователей: 1

Гости Пользователи
Дополнительно
Главная » Скрипты для сайта » Шапки для сайта

Элегантная шапка для вашего сайта

Хочешь сказать спасибо? Кликни на рекламный баннер.

07.12.2013, 22:51
Красивая шапка на сайте привлекает и удерживает внимание посетителей и остается в их сознании еще долго после того, как они покинули сайт. Шапка привлекают внимание горящим огнём в камине и выглядит довольно просто и элегантно. Хороший и светлый дизайн шапки обязательно понравиться Вам и Вашим пользователям.
Приступим к установке:
Это в CSS:
Код
body {
  font-family: Georgia, serif;
  background: url("http://megascripts.ru/demo/head_komfort/images/main-bg.png") left top;}

img {border: none;}

.header .inner .sub-inner {
  margin: 0 auto;
  width: 1023px;
  height: 304px;}

.header, .header .inner { height: 304px;}

.header {
  background: url("http://megascripts.ru/demo/head_komfort/images/header-bg-bottom.png") left bottom repeat-x;}

.header .inner {
  background: url("http://megascripts.ru/demo/head_komfort/images/header-bg-center.png") center bottom no-repeat;}

.header .logo-ru {
  float: left;
  margin: 20px 0 0 4px;
  width: 154px;
  height: 149px;
  background: url("http://megascripts.ru/demo/head_komfort/images/logo-ru.png") left top no-repeat;
  text-indent: -9999px;}

.header .logo-en {
  float: left;
  margin: 20px 0 0 4px;
  width: 154px;
  height: 149px;
  background: url("http://megascripts.ru/demo/head_komfort/images/logo-en.png") left top no-repeat;
  text-indent: -9999px;}

.header .switch-languages-main {
  position: absolute;
  margin: 239px 0 0 58px;}

.header .switch-languages-main ul {
  margin: 0;
  padding: 0;
  list-style-type: none;}

.header .switch-languages-main ul li {
  float: left;}

.header .switch-languages-main ul li a {
  display: block;
  padding: 29px 0 0 0;
  width: 50px;
  font-size: 9px;
  color: #000000;
  text-decoration: none;
  text-align: center;}

.header .switch-languages-main ul li.lang-item-ru a {
  background: url("http://megascripts.ru/demo/head_komfort/images/flag-ru.png") center top no-repeat;}

.header .switch-languages-main ul li.lang-item-en a {
  background: url("http://megascripts.ru/demo/head_komfort/images/flag-en.png") center top no-repeat;}

.header .slogan-ru {
  float: left;
  margin: 14px 0 0 241px;
  width: 219px;
  height: 55px;
  background: url("http://megascripts.ru/demo/head_komfort/images/slogan-ru.png") left top no-repeat;
  text-indent: -9999px;}

.header .slogan-en {
  float: left;
  margin: 14px 0 0 241px;
  width: 219px;
  height: 55px;
  background: url("http://megascripts.ru/demo/head_komfort/images/slogan-en.png") left top no-repeat;
  text-indent: -9999px;}

.header .contacts {
  float: right;
  margin: 27px 0 0 0;}

.header .contacts .caption {
  display: block;
  margin: 0 0 6px 0;
  font-size: 13px;
  color: #CC221C;
  font-style: italic;}

.header .contacts .phones {
  margin: 0 0 22px 0;}

.header .contacts .phone {
  margin: 0 0 4px 0;
  font-size: 13px;
  color: #4C4C4C;
  font-style: italic;
  line-height: 17px;}

.header .contacts .phone span {
  margin: 0 0 0 8px;
  font-size: 24px;
  font-weight: bold;}

.header .social-networks ul {
  margin: 0;
  padding: 0;
  list-style-type: none;}

.header .social-networks ul li {
  float: left;
  margin: 0 0 0 2px;
  padding: 0;}

.header .social-networks ul li a {
  display: block;
  width: 30px;
  height: 25px;
  text-indent: -9999px;}

.header .social-networks ul li.odnoklassniki {
  background: url("http://megascripts.ru/demo/head_komfort/images/social-networks-odnoklassniki.png") left top no-repeat;}

.header .social-networks ul li.vkontakte {
  background: url("http://megascripts.ru/demo/head_komfort/images/social-networks-vkontakte.png") left top no-repeat;}

.header .social-networks ul li.facebook {
  background: url("http://megascripts.ru/demo/head_komfort/images/social-networks-facebook.png") left top no-repeat;}

.header .social-networks ul li.twitter {
  background: url("http://megascripts.ru/demo/head_komfort/images/social-networks-twitter.png") left top no-repeat;}

.header .wifi-ru {
  clear: both;
  float: right;
  margin: 50px -8px 0 0;
  width: 169px;
  height: 46px;
  background: url("http://megascripts.ru/demo/head_komfort/images/wifi-ru.png") left top no-repeat;
  text-indent: -9999px;}

.header .wifi-en {
  clear: both;
  float: right;
  margin: 50px -8px 0 0;
  width: 169px;
  height: 46px;
  background: url("http://megascripts.ru/demo/head_komfort/images/wifi-en.png") left top no-repeat;
  text-indent: -9999px;}

.fire, .fire img {
  width: 76px;
  height: 62px;}

.fire {
  position: absolute;
  left: 50%;
  margin: -160px 0 0 -35px;}


Разметка шапки:
Код
<div class="header">
  <div class="inner">
  <div class="sub-inner">
  <a class="logo-ru" href="ВАША ССЫЛКА">ВАШЕ ОПИСАНИЕ</a>
  <div class="slogan-ru">Комфорт по разумной цене!</div>
  <div class="contacts">
  <div class="phones">
  <span class="caption">Наши телефоны:</span>
  <div class="phone">+7<span>123-457-89-10</span></div>
  <div class="phone">+7 (1234)<span>56-78-90</span></div>
  <div class="phone">+7 (1234)<span>56-78-90</span></div>
  </div>
  <div class="social-networks">
  <span class="caption">Мы в социальных сетях:</span>
<ul>
<li class="odnoklassniki"><a href="ВАША ССЫЛКА НА Одноклассники">Одноклассники</a></li>
<li class="vkontakte"><a href="ВАША ССЫЛКА НА Вконтакте">Вконтакте</a></li>
<li class="facebook"><a href="ВАША ССЫЛКА НА Facebook">Facebook</a></li>
<li class="twitter"><a href="ВАША ССЫЛКА НА Twitter">Twitter</a></li>
</ul>
</div>
</div>
<div class="wifi-ru">Wi-Fi интернет в каждой квартире</div>
<div class="switch-languages-main">
<ul>
<li class='lang-item lang-item-2 lang-item-ru current-lang'><a hreflang='ru' href='ВАША ССЫЛКА/ru/'>Русский</a></li>
<li class='lang-item lang-item-3 lang-item-en'><a hreflang='en' href='ВАША ССЫЛКА/en/'>English</a></li>
</ul>
</div>
</div>
</div>
<div class="fire"><img src="http://megascripts.ru/demo/head_komfort/images/fire.gif" alt="" /></div>
</div>


Вот и всё. И как обычно wink - всё необходимое находиться в архиве.





Если у Вас возникли вопросы по установке или работе скрипта, то задайте их в комментариях и мы постараемся вам помочь.

Источник материала: Неизвестен/Не указан
При коприровании материала просьба ставить ссылку на оригинальную статью.

Ссылка:
BB-код:
HTML-код:
Добавил: -angel- | Просмотров: 7592 | Загрузок: 536 | Рейтинг: 3.4/24
Теги: скрипт, шапка для сайта, Шапка, красивая шапка
Всего комментариев: 0
ВНИМАНИЕ !!!
Добавлять комментарии могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
А знаете ли Вы, что ...

На визитках Аль Капоне было написано, что он дилер старинной мебели.


Реклама
Популярные материалы
Наша кнопка
Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте:

Скрипты для сайта

Друзья сайта