1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> #navbar { margin: 0; padding: 0; list-style-type: none; border: 2px solid #0066FF; border-radius: 20px 5px; width: 350px; text-align: center; background-color: #33ADFF; } #navbar li { display: inline; } #navbar a { color: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; } #navbar a:hover { border-radius: 20px 5px; background-color: #0066FF; } </style> </head> <body> <ul id="navbar"> <li><a href="#">Телеграмм</a></li> <li><a href="Ссылка>Вконтакте</a></li> </ul> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> #navbar { margin: 0; padding: 0; list-style-type: none; border: 2px solid #0066FF; border-radius: 20px 5px; width: 360px; text-align: center; background-color: #73c7ee; } #navbar li { display: inline; } #navbar a { color: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; } #navbar a:hover { border-radius: 20px 5px; background-color: #0066FF; } </style> </head> <body> |
@GEROME Чтобы выровнять меню по центру попробуйте
1 2 3 4 5 |
#navbar { margin: 0 auto; /* Центрирование по горизонтали */ text-align: center; /* Выравнивание текста внутри меню по центру */ /* Остальные стили */ } |