web-touristКрасиво меню за вашият сайт
Автор: stoqnski
Здравейте във този урок ще ви покажа как да си направите хубаво меню за сайта ви с помощта на CSS.
Започваме със index.html 🙂
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<div class="body">
<div id="menu">
<div id="items">
<a href="#" id="selected">Начало</a><a href="#">линк</a><a href="#">линк1</a><a href="#">линк2</a>
<a href="#">линк3</a><a href="#">линк4</a><a href="#">линк5</a><a href="#">линк6</a>
<a href="#">линк7</a><a href="#">линк8</a><a href="#">Край на ликовете</a>
</div>
</div>
<div align="right">Автор: stoqnski</div>
</body>След това : style.css
html, body
{
color: #8c909a;
font-family: Verdana, sans-serif;
font-size: 12px;
padding: 0;
margin: 0;
background: #1e1e1e;
}
.body
{
margin-left: auto;
margin-right: auto;
padding: 0;
width: 800px;
}
#menu
{
margin: 10px 0;
background: #aeff00 url("kartinki/back.gif");
height: 42px;
line-height: 42px;
}
#menu a
{
color: #000;
font-weight: bold;
border-right: 1px solid #5b9400;
display: block;
float: left;
padding: 0 10px;
}
#menu a:hover
{
background: #aeff00 url("kartinki/hover.gif");
}
#selected
{
background: #aeff00 url("kartinki/back.gif");
}
a
{
color: #fbaf32;
text-decoration: none;
}
a:hover
{
color: #f0e155;
}Забележка: Менюто се вижда еднакво под всички браузери 🙂
