Помогни ни да направим Uroci.net по - богат! Добави урок

CSS navigation bar

mariqnantonov   трудност:    видян: 156

За да създадете навигация е нужно да използвате 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> (може и външен файл)  , след това оформяме навигацията.

 <style type="text/css">

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*/ 

 



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


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: Национален Бизнес | Bomba.bg | IT Новини | Диплома.бг | TRAVEL туризъм | Реферати | AmAm.bg | Иде.ли | Курсови работи | Фото Форум | Spodeli.net | Фото-Култ | Atol.bg | Elmaz.com | MobileBulgaria.com | Казанлък.Com