В този урок ще видите как се прави лесно и опростено css меню.
1.Отваряте вашия текстов редактор и правите 2 файла index.html и menu.css
2.В index.html въведете този код:
- <html>
- <head>
- <title>Menu</title>
- <link type="text/css" rel="stylesheet" href="menu.css">
-
- </head>
- <body>
- <div id="menu">
- <a href="#">Nachalo</a>
- <a href="#">Galeriq</a>
- <a href="#">Kontakti</a>
- <a href="#">Forum</a>
- </div>
- </body>
- </html>
3.В menu.css пишете стила на менюто
- #menu {
- background: #32323a;
- border-radius: 7px;
- padding: 15px;
- }
- #menu a {
- color: #fff;
- text-decoration: none;
- word-spacing: 15px;
- padding: 15px;
- }
- #menu a:hover {
- background: #141414;
- }
Сега да поясним кода .
С border-radius: заобляме краищата на менюто.
text-decoration: none; показва нормален текст, като премахва всички ефекти от текста (например премахва подчертаването на връзките).
С word-spacing: Задавате разстояние между бутоните .
