Пополнить WebMoney
Вывод WebMoney
Обмен WebMoney
Кредит WebMoney

Горизонтальное меню на CSS с графикой



на главную nocrisise.ruназ к меню на CSS


скачать сборник меню для CSS - красивого и готового к работе

Для любителей CSS, я покажу пример как сделать простое горизонтальное меню, только используя CSS и графики. Хоть это горизонтальное меню простое в написании, но зато красивое, лёгкая для загрузки и смотрится шикарно.

Горизонтальное меню на CSS

просмотр горизонтального меню (пример) - просмотр горизонтального меню (пример)

скачать исходник меню для CSS- скачать исходник  меню для CSS

Скопируйте и вставьте

<html>
<head>

<style type="text/css">

body {font: 11px Arial, Helvetica, sans-serif;
}


#menu {font: 11px Arial, Helvetica, sans-serif;
background-image:url('images/bc_bg.png');
background-repeat:repeat-x;
height:30px;
line-height:30px;
color:#9b9b9b;
border:solid 1px #cacaca;
width:100%;
overflow:hidden;
margin:0px;
padding:0px;
}


#menu li {list-style-type:none;
float:left;
padding-left:10px;
}


#menu a {height:30px;
display:block;
background-image:url('
images/bc_separator.png');
background-repeat:no-repeat;
background-position:right;
padding-right: 15px;
text-decoration: none;
color:#454545;
}


.home {border:none;
margin: 8px 0px;
}


#menu a:hover{color: gray;
}


</style>

</head>


<body>

<div id="menu">
<ul>
<li><a href="#"><span>
Домой</span></a></li>
<li><a href="#"><span>
о нас</span></a></li>
<li><a href="#"><span>
работы</span></a></li>
<li><a href="#"><span>
партнёры</span></a></li>
<li><a href="#"><span>
Контакты</span></a></li>
</ul>

</div>


</body>
</html>

bc_separator.png – картинка прилагается к исходнику.чайник, HTML ДЛЯ ЧАЙНИКОВ

По теме:

CSS

меню для сайтов ucoz

 

 

 

 

 

Горизонтальное меню на CSS с графикой


Понравилась статья? - добавь ее себе!


 





сайт-визитка / шаблон сайта / обработка фотографий / дизайн афиши, обложки книг, журнал, флаеры и т.д.
 
 
Подробней





nocrisise.ru © 2009-2012