Панели навигации в CSS
Перемещаться между разными разделами сайта проще с панелью навигации, поэтому она является важной частью веб-дизайна.
Обычно её можно найти в верхней части или сбоку веб-страницы; она строится из элементов списка HTML <ul> и <li>, а затем оформляется с помощью CSS.
Панель навигации = список ссылок
По сути, панель навигации — это список ссылок, поэтому <ul> и <li> так хорошо для неё подходят.
Базовый список ссылок
Prompt
Создайте базовую панель навигации, используя неупорядоченный список с четырьмя ссылками: Главная, Новости, Контакты и О нас. Без стилизации CSS — только необработанный HTML-список ссылок.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Bar - List of Links</title>
</head>
<body>
<h2>Navigation Bar</h2>
<p>A navigation bar is basically a list of links:</p>
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
</body>
</html>
Удаление маркеров и отступов
Начните с того, что уберите маркеры у элемента <ul> и сбросьте его отступы margin и padding до нуля.
Примечание: На этом коде строятся как вертикальные, так и горизонтальные панели навигации.
Prompt
Создайте панель навигации, используя неупорядоченный список с четырьмя ссылками: Главная, Новости, Контакты и О нас. Уберите маркеры с помощью list-style-type: none и сбросьте margin и padding в 0 у элемента ul.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Bar - Remove Bullets</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h2>Navigation Bar</h2>
<p>A navigation bar with no bullets, margins, or padding:</p>
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
</body>
</html>