1. Гость, мы просим Вас ознакомиться с Правилами Форума и Отказом от ответственности!

[цикл: web для новичков] пишем меню

Тема в разделе 'HTML и CSS', создана пользователем Botchal, 14 апр 2010.

  1. TopicStarter Overlay
    Botchal

    Botchal MMORPG-DEVS.RU Пользователи

    Сообщения:
    182
    Лайки:
    66
    Репутация:
    0
    Для написания меню используем CSS.

    для начала нам потребуются 2 картинки. например эти  menu1.png   menu2.png

    Далее в html документе создаём новый div, придадим ему класс sitemenu, в div запихнём ссылки

    Код:
    <html>

<head>

<style></style>

</head>

<body>

<div class="sitemenu">

<a href="http://mmorpg-devs.ru/">Страница1</a>
<a href="http://mmorpg-devs.ru/">Страница2</a>
<a href="http://mmorpg-devs.ru/">Страница3</a>
<a href="http://mmorpg-devs.ru/">Страница4</a>
<a href="http://mmorpg-devs.ru/">Страница5</a> 


</div>

</body>

</html>
    Далее надо в CSS описать вид ссылок внутри именно этого div (sitemenu)

    Все ссылки бывают активными(ссылка на страницу на которой вы уже находитесь) простой, уже посещённой и ссылкой на которую наведён курсор. a:active, a:link, a:visited, a:hover соответственно. Поскольку ссылки находятся внутри дива, то в css это пишется так: 

    .moremenu a:active, .moremenu a:link, .moremenu a:visited, .moremenu a:hover  

    нам нужно чтобы ссылки были на фоне картинок, а при наведении картинка менялась пишем

    Код:
    <html>

<head>

<style>

.sitemenu a:link {
background: url(menu1.png);
padding-top: 0px;
color: #ffffff;
width: 140px;
height: 30px;
float: right;
margin: 0;
font: 11px/25px georgia, verdana, palatino, times new roman, serif;
text-decoration: none;
font-weight: bold;
letter-spacing: 1px;
text-align: center;
}

.sitemenu a:active {
background: url(menu1.png);
padding-top: 0px;
color: #ffffff;
width: 140px;
height: 30px;
float: right;
margin: 0;
font: 11px/25px georgia, verdana, palatino, times new roman, serif;
text-decoration: none;
font-weight: bold;
letter-spacing: 1px;
text-align: center;
}

.sitemenu a:visited {
background: url(menu1.png);
padding-top: 0px;
color: #ffffff;
width: 140px;
height: 30px;
float: right;
margin: 0;
font: 11px/25px georgia, verdana, palatino, times new roman, serif;
text-decoration: none;
font-weight: bold;
letter-spacing: 1px;
text-align: center;
}

.sitemenu a:hover {
background: url(menu2.png);
padding-top: 0px;
color: #000000;
width: 140px;
height: 30px;
float: right;
margin: 0;
font: 11px/25px georgia, verdana, palatino, times new roman, serif;
text-decoration: none;
font-weight: bold;
letter-spacing: 1px;
text-align: center;
}


</style>

</head>

<body>

<div class="sitemenu">

<a href="http://mmorpg-devs.ru/">Страница1</a>
<a href="http://mmorpg-devs.ru/">Страница2</a>
<a href="http://mmorpg-devs.ru/">Страница3</a>
<a href="http://mmorpg-devs.ru/">Страница4</a>
<a href="http://mmorpg-devs.ru/">Страница5</a> 


</div>

</body>

</html>
    написанное нами css говорит о том что у ссылок есть задний фон с размерами 140 на 30 в виде картинки, у a:link, a:active, a:visited фон и цвет шрифта один а у a:hover он другой

    Посмотреть вложение sitemenu.rar
    Botchal, 14 апр 2010
    #1
    4 пользователям это нравится.
  2. kline

    kline Пользователи

    Сообщения:
    25
    Лайки:
    0
    Пол:
    Мужской
    Репутация:
    0
    Спасибо для новичков очень полезно=)
    kline, 4 июн 2010
    #2
Черновик сохранён Черновик удалён

Поделиться этой страницей