Меню для навигации между страницами

13 февраля 2014 | Автор: | Категория: Уроки вёрстки

css стили Надеюсь в скором времени сменить дизайн своего блога, на днях столкнулся с вопросом: «Как организовать навигацию между страницами сайта?» Для WordPress есть хороший плагин — WP Page Numbers, но говорить сегодня мы будем не о нём. Я хочу рассказать о том, как при помощи CSS, можно сделать красивое навигационное меню для перехода между страницами сайта.

Итак, начнём…

1) Создаём файл стилей style.css

.nav {
    font-family: Tahoma;
}
 
.nav a {
	text-decoration:none;
	color: #FFFF85;
	border:1px solid #000000;
        background-color: #000000;
        background-image: url(fon1.gif);
	padding:2px 6px;
	font-size:11px;
	font-weight:bold;
}
 
.nav a:hover {
        background-color: #27570F;
        background-image: url(fon2.gif);	
	color:#ffffff;
	border-color: #27570F;
}
 
#bord {
    width:480px;
    height:200px;
    background-color: #C9C9C9;
}
 
h3{
color: #000095;
}

2) Создаём html-файл, в котором будет размещена основа нашего навигационного меню. Я его назвал example3.html

<html>
<head>
<title>Навигация между страницами</title>
<link href=style.css” rel=”stylesheet” type=text/css” />
</head>
<body>
<center>
<div id=”bord” align=”center”>
<div class=”nav”><br />
<h3>Меню для навигации между страницами</h3>
<br /><br /><br />
<a href=”#”>← Назад</a> <a href=”#”>1</a> <a href=”#”>2</a> <a href=”#”>3</a> <a href=”#”>4</a> <a href=”#”>5</a> <a href=”#”>Вперёд →</a>
</div>
</div>
</center>
</body>
</html>

3) Сохраняем файлы и смотрим на результат.

Для оформления меню навигации я использовал два фоновых рисунка fon1.gif и fon2.gif. Можете использовать их, либо создать свои, подходящие под дизайн Вашего сайта.

Пояснения по коду:

font-family: Tahoma; — шрифт для текста и цифр;

text-decoration:none; — отмена подчёркивания ссылок;

color: #FFFF85; — цвет текста;

background-color: #000000; — цвет блока (на случй, если картинка не будет найдена);

border:1px solid #000000; — ширина границ и их цвет;

background-image: url(fon1.gif); — фоновое изображение;

padding:2px 6px; — отступы (для формирования блоков меню навигации);

font-size:11px; — размер шрифта;

font-weight:bold; — полужирный шрифт.

Результат работы — Меню для навигации между страницами.

Скачать Example3.zip

Для этой страницы комментарии закрыты.