|
|
Каталог файлов
|
|
|
|
Внимание: Материал скопирование с сайта ucozon.ru ,ссылка на наш сайт строго обязательна! При нарушение этого, последует наказание. |
|
Красивая стильная шапка для сайта, Красивая стильная синея шапка для
сайта сделал и понял что промазал в цвете, делаю для сайта ucozon.ru, у
меня опять ядовитый цвет получился, с белым фоном не котируется ,
придется искать другой цвет, и общий цвет тональности, тональность
сайта.
Установка шапки:
Код самой шапки вставляем в верхний контейнер если он у вас имеется и редактируем ссылки под свой сайт
Code
<table class="top_bg2" border="0" cellpadding="0" cellspacing="0" width="1100"><tbody><tr>
<td align="left"><ul id="nav">
<li class="top"><a href="/" id="main" class="top_link"><span>Главная</span></a></li>
<li class="top"><a href="/forum" id="forum" class="top_link"><span>Форум</span></a></li>
<li class="top"><a href="/load" id="файлы" class="top_link"><span>Файлы</span></a></li>
<li class="top"><a href="/publ" id="forum" class="top_link"><span>Статьи</span></a></li><a href="/publ/" id="forum" class="top_link"></a>
<li class="top"><a href="/dir/" id="gb" class="top_link"><span>ТОР сайтов</span></a></li></ul>
</td>
<td style="" align="right">
<div class="searchForm"><form onsubmit="this.sfSbm.disabled=true" method="get" style="margin: 0pt;" action="/search/"><div class="schQuery" align="center"><input name="q" maxlength="30" size="20" class="queryField" type="text"></div>
<div class="schBtn" align="center"><input class="searchSbmFl" name="sfSbm" value="Найти" type="submit"></div></form></div></td></tr></tbody></table><table>
</table><table class="head" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td align="left"><img alt="" src="http://test.ucozon.ru/img/headd1.png"></td>
<td style="padding-right: 15px;" align="right"><a href="/"><img src="http://test.ucozon.ru/img/no_banner.png" border="0"></a></td></tr></tbody></table><table>
</table><table class="top_bg1" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td align="left"><!--IF--><table>
</table><table class="top_bg2" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr></tr><tr><td align="left">
<ul id="nav">
<li class="top"><a href="http://ucozon.ru/load/dlja_ucoz/21" id="main" class="top_link"><span>Всё для ucoz </span></a><br></li>
<li class="top"><a href="http://ucozon.ru/load/vse_dlja_photoshop/35" id="forum" class="top_link"><span>Всё для photoshop</span></a><br></li>
<li class="top"><a href="http://ucozon.ru/soft_i_programmy/27" id="forum" class="top_link"><span>Развлечения</span></a><br></li>
<li class="top"><a href="http://ucozon.ru/vsjo_dlja_gta/77" class="top_link"><span class="down">Всё для Ucoz </span></a></li>
<li class="top"><a href="http://ucozon.ru/counter_strike_1_6/1/" id="gb" class="top_link"><span>Всё для Ucoz</span></a></li>
<li class="top"><a href="http://ucozon.ru/counter_strike_source/45" id="main" class="top_link"><span>UcozOn</span></a></li>
<li class="top"><a href="http://ucozon.ru/load" id="main" class="top_link"><span>Многое другое<br></span></a></li>
<li class="top"><a href="http://ucozon.ru/load/"><span class="top_link"></span>
<span class="catName"></span></a></li></ul>
</td><td style="" align="right"></td>
</tr></tbody>
</table>
</td></tr>
</tbody>
</table> В таблицу стилей вставляем данный код стиля шапки.
Code .top_bg2 {border:1px solid #2352A2;height:30px;font-family:verdana,arial,helvetica;font-size: 8pt;color:#fff;background: url('http://test.ucozon.ru/img/menu_top_bg.png') repeat-x;}
.head {border:1px solid #2352A2;border-top:0px;height:120px;width:100%;background:#4574C2;}
#nav {padding:0; margin:0; list-style:none; height:30px;
background:#2E609B url(http://test.ucozon.ru/img/menu_top_bg.png);
position:relative; z-index:500;font-family:verdana, arial, helvetica;}
#nav li.top {display:block; float:left; height:30px;}
#nav li a.top_link {display:block; float:left; height:23px;
line-height:23px; color:#cccccc; text-decoration:none; font-size:11px;
font-weight:none; padding:2px; cursor:pointer;}
#nav li a.top_link span {float:left; display:block; padding:0 8px 0 8px; height:23px; background:url('http://test.ucozon.ru/img/menu_top_bg2.png'); border:1px solid #2352A2; color:#fff;;}
#nav li a.top_link span.down {float:left; display:block; padding:0 8px 0 8px; height:23px; background:url('http://test.ucozon.ru/img/menu_top_bg2.png'); border:1px solid #2352A2; color:#fff;}
#nav li:hover a.top_link,
#nav li.iehover a.top_link {background:url() no-repeat right top; }
#nav li:hover a.top_link span,
#nav li.iehover a.top_link span {float:left; display:block; background:url('http://test.ucozon.ru/img/menu_top_hover.png'); border:1px solid #0F3E8E; color:#ffffff; }
#nav li:hover a.top_link span.down,
#nav li.iehover a.top_link span.down {float:left; display:block; background:url('http://test.ucozon.ru/img/menu_top_hover.png'); border:1px solid #2352A2; color:#ffffff;}
#nav li:hover {position:relative; z-index:200; cursor:pointer;}
#nav li:hover ul.sub {left:2px; top:27px; background:#4e4e4e;
padding:0px; border:1px solid #2352A2; white-space:nowrap; width:140px;
height:auto; z-index:300; cursor:pointer;}
#nav li:hover ul.sub li
{display:block; height:22px; position:relative; float:left; width:100%;
font-weight:normal; cursor:pointer;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:22px; line-height:22px;
text-indent:5px; color:#fff; text-decoration:none; cursor:pointer;}
#nav li ul.sub li a.fly {background:#4e4e4e 140px 6px no-repeat; cursor:pointer;}
#nav li:hover ul.sub li a:hover {background:#3e3e3e; color:#ffffff; cursor:pointer;}
#nav li:hover ul.sub li a.fly:hover {background:#3e3e3e 100px 6px no-repeat; color:#ffffff; cursor:pointer;}
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul {left:99px;
top:-4px; background:#3e3e3e; padding:3px; border:1px solid #000;
white-space:nowrap; width:120px; z-index:400; height:auto;}
#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul {position:absolute;
left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0;
list-style:none;}
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#999998 100px 6px no-repeat; color:#fff; border:1px solid
#000;}
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly {background:#999998;
100px 6px no-repeat; color:#fff; border:1px solid #000;}
.searchForm {float: right;width: 154px;height: 20px;position: relative; right: 45px;top: 0px;}
.schQuery {float: left; width: 0px; position: relative; right: 0px;}
.schBtn {float: right; width: 0px;}
input.queryField {height: 19px;width: 150px;color: #CCC;line-height:
28px;font-size:
8pt;font-weight:normal;font-family:verdana,arial,helvetica;background:
#4371C0;border: 1px solid #2352A2;}
input.searchSbmFl {width:
41px;height: 19px;color: #fff;border: none; font-size:
8pt;padding-bottom: 2px;background: #4371C0;border: 1px solid
#2352A2;position: absolute; top: 0px;}
input.searchSbmFl:hover
{width: 41px;height: 19px;color: #999;border: none; font-size:
8pt;padding-bottom: 2px;background: #4371C9;border: 1px solid
#2352A2;position: absolute; top: 0px;}
Все ссылки на картинки в стиле и коде изменяем и заливаем на свой сайт, так как картинки могу удалить со временем.
сайт автора: www.ucozon.ru
|
|
|
|
|
|
Статистика
Онлайн всего: 1 Гостей: 1 Пользователей: 0
|
| | |
