Преглед на урок

Създайте хоризонтален навбар с CSS

Създайте хоризонтален навбар с CSS




1.) Първо ще разпределим линковете :

Код
<div id="nav">
  <ul>
	<li><a href="http://skeletorscorpse.com/joomla/#">Home</a></li>
	<li><a href="http://skeletorscorpse.com/joomla/#">News</a></li>
	<li><a href="http://skeletorscorpse.com/joomla/#">About</a></li>
	<li><a href="http://skeletorscorpse.com/joomla/#">Services</a></li>
	<li><a href="http://skeletorscorpse.com/joomla/#">Links</a></li>
	<li><a href="http://skeletorscorpse.com/joomla/#" >Contact</a></li>
  </ul>
</div>

Не е задължително да използвате div, можете да го използвате и в таблица.
Просто така използваме "булети" с линковете.

2.) Първата частица CSS, която ще използваме е да добавим граница около целия div/td таг:

Код
#nav{
  border:1px solid #FFFFFF;
}

Аз използвам ID (забележете #), може още и да използвате "class"

3.) Сега малко CSS за форматиране на местоположението на ul тага:

Код
#nav ul{
  width:100%;
  background-color:#6699cc;
  padding-left:0;
  margin:0;
  float:left;
}

Така държим навигационния бар вляво и го разтягаме по цялата страница.

4.) Сега ще форматираме всеки li таг:

Код
#nav ul li{
  display:inline;
}

5.) Сега малко CSS за линковете в li таговете:

Код
#nav ul li a{
  float:left;
  color:#FFFFFF;
  padding:6px 12px 6px 12px;
  border-right:1px solid #FFFFFF;
}

6.) За да добавим и rollover трябва само още малко CSS:

Код
#nav ul li a:hover{
  background-color:#336699;
}

Така бекграунд цвета ще бъде тъмносин.

ВИЖТЕ РЕЗУЛТАТА

Превод : Fresh!
Източник : Skeletorscorpse.com

Ако урокът ви допада, споделете го в Twitter и Facebook или го запазете в Delicious.




Урокът е добавен от: Красимир!

Коментари

piter_m

Много искам да го науча този урок, обаче много ми е объркано.
Ако можеш да дадеш целият код на страницата която се получава.

SceneStyle

Код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
	font-family: Tahoma, Verdana, Arial;
	font-size: 12px;
	color: #000000;
}
body {
	background-color: #FFFFFF;
}
#nav{
border:1px solid #FFFFFF;
}
#nav ul{
width:100%;
background-color:#6699cc;
padding-left:0;
margin:0;
float:left;
}
#nav ul li{
display:inline;
}
#nav ul li a{
float:left;
color:#FFFFFF;
padding:6px 12px 6px 12px;
border-right:1px solid #FFFFFF;
}
#nav ul li a:hover{
background-color:#336699;
}
-->
</style></head>

<body>
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>	
<li><a href="#">About</a></li>

<li><a href="#">Services</a></li>
<li><a href="#">Links</a></li>
<li><a href="#" >Contact</a></li>	
</ul>
</div>
</body>
</html>

piter_m

Мерси много! :)

Добави коментар

Трябва да сте регистиран потребител за може да оставяте коментари! Направете своята безплатна регистрация още сега.