» »

Шаблон верхней части сайта uCoz

Шаблон верхней части сайта uCoz

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

HTML
Код
<div class="h_f"><div class="h_f_l"><div class="h_f_r">
<div class="h_t">
<div class="h_logo"><div class="h_log_img"><img src="/img/logo1.png" /></div></div>
<div class="h_t_menu">
<div class="h_t_m">
<div class="h_top_menu">
  <ul>
  <li><a href="#"><span>Главная страница</span></a></li>
  <li><a href="#"><span>Форум</span></a></li>
  <li><a href="#"><span>Новости портала</span></a></li>
  <li><a href="#"><span>Топ сайтов</span></a></li>
  <li><a href="#"><span>Топ сайтов</span></a></li>
  <li><a href="#"><span>Топ сайтов</span></a></li>
  </ul>
</div>
</div>
<div class="h_t_b">
<div style="padding-top:28px; margin: 0 auto;"><div class="h_banner"><img src="/img/5.png" /></div></div>
</div>
</div>
</div>
<div class="h_b">
<div class="h_p">
<div class="h_bottom_menu2">
  <ul>
  <li><a href="#">Войти на сайт</a></li>
  <li><a href="#">Регистрация</a></li>
  </ul>
</div>
</div>
<div class="h_b_m">
<div class="h_bottom_menu">
  <ul>
  <li><a href="#"><span>Главная страница</span></a></li>
  <li><a href="#"><span>Форум</span></a></li>
  <li><a href="#"><span>Новости портала</span></a></li>
  <li><a href="#"><span>Топ сайтов</span></a></li>
  </ul>
</div>
</div>
</div>
</div></div></div>


Style
Код
/* Css */
.h_top_menu { margin: 0px 0px 0 0; height: 40px;}
.h_top_menu ul { list-style:none; float:left; margin-top:7px; }
.h_top_menu ul li { display:inline; margin: 0 auto; height: 25px; float:left; }
.h_top_menu ul li a {line-height:23px;}
.h_top_menu a span, .h_top_menu a { float: left; height: 25px; text-transform: none; font-size: 11px; }
.h_top_menu a { color: #8fa547; display: block; background: url(/img/8.png) no-repeat 0 0; margin-left: 15px; line-height: 25px; padding: 0px 0px 0px 15px; }
.h_top_menu a span { color: #8fa547; float: left; background: url(/img/8.png) no-repeat 100% -25px; line-height: 23px; padding: 0px 15px 0px 0px;}
.h_top_menu a:hover { height: 25px; text-decoration:none; }
.h_top_menu a:hover span { color: #252525; }
.h_bottom_menu { margin: 8px 0px 0 0; height: 44px;}
.h_bottom_menu ul { list-style:none; float:left; }
.h_bottom_menu ul li { display:inline; margin: 0 auto; height: 44px; float:left; background: url(/img/7.png) no-repeat top right; }
.h_bottom_menu ul li a {line-height:44px;}
.h_bottom_menu a span, .h_bottom_menu a { float: left; height: 44px; text-transform: none; font-size: 11px; }
.h_bottom_menu a { color: #656761; display: block; margin-right: 3px; line-height: 44px; padding: 0px 15px 0px 15px; }
.h_bottom_menu a span { color: #656761; float: left; line-height: 44px; }
.h_bottom_menu a:hover { height: 44px; background: url(/img/6.png) no-repeat top center; text-decoration:none; }
.h_bottom_menu a:hover span { color: #93a945; }
.h_f { background: url(/img/1.png); height: 223px; }
.h_f_l { background: url(/img/3.png) no-repeat top left; height: 223px; }
.h_f_r { background: url(/img/2.png) no-repeat top right; height: 223px; display:block;}
.h_t { height:154px; display:block; }
.h_b { height:69px; display:block;}
.h_logo { float:left; width:530px; display:block; }
.h_t_menu { float:left; display:block; margin:0px;}
.h_t_m { height:40px; }
.h_t_b { height:114px; }
.h_p { height:69px; width:440px; float:left; }
.h_b_m { height:69px; float:left; }
.h_banner { width:476px; height:68px; display:block; background: url(/img/4.png) no-repeat; padding:8px 0px 0px 8px;}
.h_banner img { width:468px; height:60px; display:block; }
.h_log_img img { width:300px; height:50px; padding: 20px 0px 0px 20px;}

.h_bottom_menu2 { margin: 13px 0px 0 24px; height: 28px;}
.h_bottom_menu2 ul { list-style:none; float:left; }
.h_bottom_menu2 ul li { display:inline; margin: 0 auto; height: 28px; float:left; }

.h_bottom_menu2 ul li a {width:138px;float: left; height: 28px; background: url(/img/52.png) no-repeat top center;text-transform: none; font-size: 11px; color: #ffffff;text-align:center; display: block; margin-right: 19px; line-height: 28px; padding: 0px 0px 0px 0px; }
.h_bottom_menu2 ul li a:hover {width:138px; height: 28px; background: url(/img/51.png) no-repeat top center; text-decoration:none; }

/*********/
22.03.2017 Загрузок: 2 Просмотров: 696 Комментарий: (11)

Поделиться в социальных сетях

Материал разместил

Комментарий: 11
Kolinkor
Kolinkor 23.03.2017 00:151
0
Ух ты, мне вспоминается даже шаблон, но только он синий цвета был. Но не думаю что вверх сайта этот ставить будут, хотя все может быть.
avatar
_ParadoX_0667 23.03.2017 00:302
0
у меня только вверх остался с 2013 года)
Kolinkor
Kolinkor 23.03.2017 00:334
0
Но если рабочий что его в корзину выкидывать, может кто то будет строить и вверх такой понравиться ему.
Сафрон
Сафрон 23.03.2017 00:313
0
Может кому то пригодиться, хотя такой шаблон, или похожий, давно не встречал.
tsakonter
tsakonter 23.03.2017 00:375
0
Из каких складов этот вверх откопали. 11a
avatar
_ParadoX_0667 23.03.2017 01:056
0
У меня на жостком диске есть папка "Вёрстка", я туда с 2011 года кидаю идеи, картинки, зарисовки, а том по настроению верстаю. Там была картинка с этим верхом, вот сделал.
Tergran
Tergran 23.03.2017 01:177
0
А что, шаблон PDA не кто не отменял, и у многих он установлен на дизайн, который нарисован и не адаптируется под устройства.
Kolinkor
Kolinkor 23.03.2017 01:308
0
Но лучше шаблон адаптировать сразу под все мобильные настройки, чем шаблон ставить.
Scheme
Scheme 23.03.2017 01:359
0
Раньше шапка смотрелась, сейчас не думаю что вообще в сайт строительстве нужна.
KDes
KDes 21.04.2017 21:3810
0
Офигеть кто то сверстал мою работу столетней давности Weblancer
Kosten
Kosten 21.04.2017 21:4911
0
Но умельцев всегда хватало.
avatar