Код вашей страницы

<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a.nav
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a.nav:hover {background-color:#ff3300;}
li {display:inline;}
</style>
</head>

<body>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Славная</a></li>
<li><a href="#">Забавная</a></li>
<li><a href="#">Не главная</a></li>
</ul>

<p>

Мы создадим горизонтальное меню на CSS.
Мы позволили элементам ul и a выровняться по левому краю.
Элемент li будет отображаться как строчный. Это позволит нам разместить ссылки меню (пункты списка) на одной строке.
Элемент ul имеет ширину 100%, а ссылки имеют ширину 6em (6 размеров текущего шрифта).
Мы добавили цвета и границ, чтобы это было похоже в конце концов на меню.
</p>

</body>
</html>

Результат в окне браузера

Мы создадим горизонтальное меню на CSS. Мы позволили элементам ul и a выровняться по левому краю. Элемент li будет отображаться как строчный. Это позволит нам разместить ссылки меню (пункты списка) на одной строке. Элемент ul имеет ширину 100%, а ссылки имеют ширину 6em (6 размеров текущего шрифта). Мы добавили цвета и границ, чтобы это было похоже в конце концов на меню.

К примерам CSS >> В раздел CSS >> На главную >>


HTML-верстка: инструменты и приемы профессиональной front-end разработки