Суббота, 05.07.2025, 17:37
Приветствую Вас Гость | RSS
Меню сайта
Форма входа
Категории раздела
Скрипты для ucoz [52]
Шаблоны для ucoz [58]
Иконки для ucoz [17]
Кнопки для ucoz [18]
Видео уроки по ucoz [42]
Поиск
Наш опрос
Оцените мой сайт
Результаты | Архив опросов
Всего ответов: 62
Мини-чат
200
Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
    • Статистика
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0

    .

    Главная Регистрация Вход

    файлы

    Главная » Файлы » Все для ucoz » Скрипты для ucoz
    Элегантная шапка для вашего сайта
    04.03.2014, 10:53
    Красивая шапка на сайте привлекает и удерживает внимание посетителей и остается в их сознании еще долго после того, как они покинули сайт. Шапка привлекают внимание горящим огнём в камине и выглядит довольно просто и элегантно. Хороший и светлый дизайн шапки обязательно понравиться Вам и Вашим пользователям.
    Приступим к установке:
    Это в 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>
    Категория: Скрипты для ucoz | Добавил: fakovv09
    Просмотров: 493 | Загрузок: 0 | Рейтинг: 0.0/0
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    Copyright MyCorp © 2025
    Сделать бесплатный сайт с uCoz