Студопедия

Главная страница Случайная страница

КАТЕГОРИИ:

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






Урок№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.

 

<== предыдущая лекция | следующая лекция ==>
Урок№4. Как поменять шапку сайта на ucoz.ru | Как поменять верхнее меню на ucoz

mylektsii.ru - Мои Лекции - 2015-2018 год. (0.014 сек.)Пожаловаться на материал