CSS navigation bar

mariqnantonov трудност:

видян: 2472

За да създадете навигация е нужно да използвате HTML CSS

Така...

1.Сега ще използваме новия елемент <nav> и няколко линка (преди се използваше ul )

<a class="n1" target="_blank" href="http://mafi.com">Начало</a>

<a class="n1" target="_blank" href="http://mafi2.com">Продукти</a>

<a class="n1" target="_blank" href="http://mafi3.com">Контакт</a>

<a class="n1" target="_blank" href="http://mafi4.com">Информация</a>

</a>

2. Използваме <style> (може и външен файл) , след това оформяме навигацията.

nav {

left: 500px;

top: 10px;

text-align: center

}

/* We change the position of the nav element*/

.n1 {text-decoration: none;

color: rgb(76, 73, 73);

margin: 0px;

height: 37px;

width: 200px;

font-weight: bold;

background: -webkit-linear-gradient(rgb(253, 253, 253), rgb(200, 200, 200));

background: -o-linear-gradient (rgb(253, 253, 253), rgb(200, 200, 200));

background: -moz-linear-gradient (rgb(253, 253, 253), rgb(200, 200, 200));

background: linear-gradientn (rgb(253, 253, 253), rgb(200, 200, 200));

display: inline-block;

text-align: center;

font-family: Verdana, Arial;

}

/* Here we use gradients and set height, weigth...*/

.n1:hover {border-bottom: 5px solid rgb(50, 191, 232);

/*When we go with the mouse on the navigation there will be colored line*/

Регистрирайте се, за да добавите коментар