» »

Низ сайта для uCoz с функциями в нем


Низ сайта для uCoz с функциями в нем

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

В нем есть 4 раздела, но это вы можете поместить как ссылки или один убрать и под баннеры сделать, просто код сам не сложный и все самому можно развернуть как вам нужно. На тестовом сайте установил его на темно серый оттенок, также в CSS добавил, чтоб можно верхнее углы закруглить.

Как мы видим, он у нас фиксирован:

Красивый низ сайта для uCoz

Вот здесь давайте разберемся, так как по умолчанию, у него едет по обоим сторонам этот оттенок "http://zornet.ru/SKRIPT/Menu/fon.png" который в стилях в самом начале стоит, что пришлось убрать. Просто вы сможете по свой цвет сделать и он по обзору будет широкий, но это на всякий случай, чтоб знали.

Установка:

Но меняем весь низ на этот код:

Код
<div id="footer">
<div class="shell">
<div class="footer-cols">
<div class="col">
<h2>Меню сайта</h2>
<ul>
<li><a href="#">Шаблоны для uCoz</a></li>
<li><a href="#">Скрипты для uCoz</a></li>
<li><a href="#">Информеры для uCoz</a></li>
<li><a href="#">PSD Исходники</a></li>
<li><a href="#">CSS Элементы</a></li>
</ul>
</div>
<div class="col">
<h2>Партнеры</h2>
<ul>
<li><a href="#">InternetEmpire.Ru</a></li>
<li><a href="#">WebMaster-uCoz.Ru</a></li>
<li><a href="#">uGuide.Ru</a></li>
<li><a href="#">Zornet.Ru</a></li>
<li><a href="#">Свободно</a></li>
</ul>
</div>
<div class="col">
<h2>Блок</h2>
<ul>
<li><a href="#">Zornet.Ru</a></li>
<li><a href="#">Zornet.Ru</a></li>
<li><a href="#">Zornet.Ru</a></li>
<li><a href="#">Zornet.Ru</a></li>
<li><a href="#">Zornet.Ru</a></li>
</ul>
</div>
<div class="col">
<h2>Соц. сети</h2>
<p>Одноклассники: <a href="#">перейти</a></p>
<p>ВКонтакте: <a href="#">перейти</a></p>
<p>Facebook: <a href="#">перейти</a></p>
<p>Twitter: <a href="#">перейти</a></p>
</div>
<div class="cl"> </div>
</div>
<div class="footer-bottom">
<div class="footer-nav">
<ul>
<li><a href="/">Главная</a> <font color="#fff">»</font></li>
<li><a href="/forum">Форум сайта</a> <font color="#fff">»</font></li>  
<li><a href="/load">Каталог файлов</a> <font color="#fff">»</font></li>
<li><a href="/publ">Каталог статей</a> <font color="#fff">»</font></li>
<li><a href="/photo">Фотоальбом</a></li>
</ul>
</div>
<p class="copy"><a title="Лучшее для сайтов в системе uCoz" href="http://zornet.ru/" target="_blank">Zornet.Ru</a> 2014 год. <font color="#fff">|</font> $POWERED_BY$</p>
<div class="cl"> </div>
</div>
</div>
</div>


CSS:

Код
#footer { background: url() repeat 0 0;}
#footer a{ color: #717171; text-decoration: none;}
#footer a:hover{ color: #D5AC59; text-decoration: none;}
#footer .footer-cols { padding: 0 32px 26px; }
#footer .col { width: 212px; float: left; }
#footer .col + .col { padding-left: 22px; }
#footer h2 { font-size: 20px; margin-bottom: 10px;color: #828282; background: url(http://zornet.ru/SKRIPT/Menu/cols.png) repeat-x 0 bottom; padding-bottom: 10px; text-shadow: rgba(0,0,0,0.9) 1px 1px 1px; font-weight: 700; text-transform: uppercase;}
#footer .col ul { list-style: none; list-style-position: outside; margin: 0px -40px;}
#footer .col ul a{ color: #717171; text-decoration: none;}
#footer .col ul a:hover{ color: #D5AC59; text-decoration: none;}
#footer .col ul li { padding-left: 11px; background: url(http://zornet.ru/SKRIPT/Menu/ar.png) no-repeat 0 3px; padding-bottom: 7px; font-size: 11px; }
#footer .col p { font-size: 11px; color: #fff; }  
#footer .footer-bottom { background: url(http://zornet.ru/SKRIPT/Menu/cols.png) repeat-x 0 0; padding: 5px 32px 0; }
#footer .footer-bottom p.copy { float: right; line-height: 14px; font-size: 12px; color: #717171; }
#footer .footer-bottom p.copy a { color: #717171; text-decoration: none; }
#footer .footer-bottom p.copy a:hover { color: #D5AC59; text-decoration: none; }
#footer .footer-nav { float: left; margin: 0px -40px;}
#footer .footer-nav ul { list-style: none; list-style-position: outside; line-height: 11px; }
#footer .footer-nav ul li { float: left; padding: 0 2px; text-shadow: rgba(0,0,0,0.7) 0px 1px 1px; }
#footer .footer-nav ul li:first-child { padding-left: 0; }
#footer .footer-nav ul li a { color: #717171; text-decoration: none;}
#footer .footer-nav ul li a:hover { color: #D5AC59; text-decoration: none;}
#footer .shell { background: url(http://zornet.ru/SKRIPT/Menu/shell.png) repeat 0 0; padding: 20px 0;border-radius: 7px 7px 1px 1px;}
.shell { width: 980px; margin: -20px auto; }


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

Источник: http://internetempire.ru/
04.03.2016 Просмотров: 657 Комментарий: (31)

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

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

Комментарий: 30
Maryges
Maryges 04.03.2016 21:471
0
Что то не понял, как фон может влиять на низ сайта, но здесь пока не поставишь не узнашь, думаю если разберусь установлю его.
Kosten
Kosten 04.03.2016 21:482
0
Сейчас поставлю, как он по умолчанию идет.
Maryges
Maryges 04.03.2016 21:503
0
Давай, что голову ломать за зря.
Kosten
Kosten 04.03.2016 21:524
0
Вот я поставил ссылку, которую прописал в описание и ее установил в начале CSS и что мы видим по вверх там совершенно другой фон.

Zismo-vk
Zismo-vk 04.03.2016 21:576
0
Костя а как зделать под серый цвет сайта*?
Kosten
Kosten 04.03.2016 22:028
0
Тут сразу и не скажешь, но должно все получиться, ведь все на стилях и идет всего 4 ссылки, одну из которых убрал, но как видно, читаем ниже и с ней можно поставить.
Scheme
Scheme 04.03.2016 22:049
0
Zismo-vk, думаю вы много сайтов видели, где как на сером и на светлом стоит низ сайта, вот этот сайт пример, фон явно не светлый.
Траст
Траст 04.03.2016 21:565
0
Но можно все по уму сделать и поставить кв самый низ этот стиль.

Код
body { background-image: url(Ссылка на фон); }


И здесь просто берем изображение по сторонам которое стоит и все будет в одной гамме.
Kosten
Kosten 04.03.2016 22:007
+2
Все правильно, таким стилем можно уровнять и поменять все, теперь что по сторонам стояло, поставил ссылку на них, а там изображиние и вот смотрим, теперь все отлично.

FeStemBer
FeStemBer 04.03.2016 22:0910
+2
Красивый низ, дольше всего на адаптацию похоже, но не уверен, Но нужно было сразу настроить во всю ширину, хотя нужно в коде менять, так красивей под каталог сделан.
Maryges
Maryges 04.03.2016 22:1011
0
Костен, уже поставил, да только желтую кнопку сменить нужно, а фотошоп не очень мне нравиться и от также взаимно отвечает.
Kosten
Kosten 04.03.2016 22:1212
0
Но на форуме есть тема по помощи, хотя что из одной кнопки писать. Выйди в личку и скажи в какой оттенок.
Maryges
Maryges 04.03.2016 22:1614
0
Kosten, но ты же знаешь сайт, он почти такой как у тебя, но подбери что то, как сам видишь.
Kosten
Kosten 04.03.2016 22:2116
+3
Maryges, ты вообще служишь, постоянно в интернете.)
Держи бедолага, выберешь какую нужно.

http://zornet.ru/SKRIPT/Menu/ar-2.png
http://zornet.ru/SKRIPT/Menu/ar-1.png
Maryges
Maryges 04.03.2016 22:2518
0
Все легло как родное, с меня нарды как обещал.
Kosten
Kosten 04.03.2016 22:2820
0
Maryges, все не нужны мне нарды, пока ждал, на шашки присел плотно, в Чапая гоняю.)
frecsarg
frecsarg 04.03.2016 22:1413
0
Точно фон влияет на дизайн сайта, такой прозрачной пленнкой ложиться, круто, в первые такое вижу.
YaVi
YaVi 04.03.2016 22:1715
+3
Да, низ не плохой)
FeStemBer
FeStemBer 04.03.2016 22:2217
+2
Тоже понравился, еще немного переделаю, и то что нужно будет.
YaVi
YaVi 04.03.2016 22:2519
0
Просто всем лень его выкладывать)
Kosten
Kosten 04.03.2016 22:3021
+2
Скажу больше, просто лень кому то выдергивать или создавать, а копировать все умеют. Как то по стилям еще могу понять, вот коды даются сложнее, все цитаты выдернул, которые понравились.
YaVi
YaVi 04.03.2016 22:3022
+2
Полностью согласен)
Сопрано
Сопрано 04.03.2016 22:3825
0
Но копировать можно по всякому, кто то под корень все берет, даже не читая текста, есть там грамматические ошибки или нет. Просто дублирует, но все равно сказывается на выдачу, когда тот же материал гуляет по сети, но до того времени пока Пингвин сайт не посетит и потом бросают сайт. А uCoz пол года будет ждать, чтоб утвердиться, что ресурс не рабочий, а если на него будут заходить еще немного уникальных заходов, так вообще не уберет.
Kosten
Kosten 04.03.2016 22:3223
0
Тут второй админ, Горынычь немного объяснил, где то пропал, походу в армий в подложной лодке и не может на связь выйти.
Сопрано
Сопрано 04.03.2016 22:3424
0
Kosten, это тот который уроки по стилям начинал писать на форуме.
Kosten
Kosten 04.03.2016 22:4026
0
Trantel, все правильно, пытался что то создавать, он бы этот низ переделал вообще бы, но это можно самому сделать. К примеру оттенок поменять через браузер, все вывести и потом готовые стили скопировать и уже под другой гаммой.
1 2 »
avatar