Шаблон верхней части сайта 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; } /*********/ |
Поделиться в социальных сетях
Материал разместил
Комментарии: 11 | |
| |