Урок№5. Как поменять нижнюю часть сайта на ucoz.ru

В предыдущем уроке, Вы узнали, как изменить шапку сайта на ucoz. В этом уроке мы примерно таким же образом поменяем нижнюю часть сайта. Для фона футера мы будем использовать всё тот же файл fon.gif.

Зайдите в раздел: Дизайн -> Управление дизайном (CSS).

В таблице стилей нам нужно найти строчку:

#footer {border-top: 5px solid #6B6B6B; padding: 10px; text-align: center; border-bottom: 5px solid #000000; }

Это стиль для нижней части сайта для шаблона #844.

Вместо того кода, который был приведён выше напишите следующее:

#footer {
border-top: 2px solid #000000;
padding: 10px;
text-align: center;
border-bottom: 2px solid #000000;
background: url('/fon.gif'); }

, где
border-top: 2px solid #000000; — верхнее подчёркивание сплошной (solid) чёрной (#000000) линией толщиной в 2px.
border-bottom: 2px solid #000000; — нижнее подчёркивание сплошной (solid) чёрной (#000000) линией толщиной в 2px.
background: url('/fon.gif'); — означает, что фоном нижней части сайта будет картинка fon.gif, размноженная в горизонтальной и вертикальной плоскости.
padding: 10px; — это внутренний отступ в 10px со всех сторон.
text-align: center; — устанавливает по центру все элементы, которые находятся внутри блока < div id=" footer" > < /div>, т.е. внутри нижней части сайта.

Нажмите «Сохранить». Теперь низ нашего сайта выглядит так:

Нам осталось поменять цвет ссылок в нижней части сайта, т.к. на данный момент ссылки сливаются с фоном футера.

Я предлагаю заменить цвет ссылок на белый. Для этого на следующей строчке в таблице стилей нужно написать следующие коды:

#footer a {text-decoration: underline; color: #ffffff; }
#footer a: hover {text-decoration: none; color: #ffffff; }

, где
#footer a {text-decoration: underline; color: #ffffff; } — означает, что цвет неактивной ссылки будет белый (color: #ffffff;), а сама ссылка будет подчёркнута (text-decoration: underline;)
#footer a: hover {text-decoration: none; color: #ffffff; } — означает, что цвет ссылки при наведении на неё будет белый (color: #ffffff;), а сама ссылка не будет подчёркнута (text-decoration: none;)

Нажмите «Сохранить». Как видим, ссылки больше не сливаются с фоном нижней части сайта.

Попробуйте навести курсор мышки на одну из ссылок, и Вы увидите, что нижнее подчёркивание исчезает.

В целом теперь наш сайт выглядит вот так.

Нам осталось доработать верхнее, левое и правое меню. Изменить цвет ссылок и цвет заголовка в содержимом сайта. И всё, наш сайт будет готов!

В следующем уроке Вы узнаете, как поменять меню сайта на ucoz.ru.