Меню в html
Горизонтальное и вертикальное меню в HTML странице
Списки в HTML
Чтобы создать меню на веб странице, используются теги списка <ul> и <li>
Синтаксис тегов списка
<ul>Название списка
<li> Первый пункт списка </li>
<li> Второй пункт списка </li>
...
</ul>
Пример списка HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Список</title>
</head>
<body>
<ul>Список
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
</body>
</html>
Горизонтальное меню в HTML
Чтобы создать горизонтальное меню на HTML странице, необходимо для списка создать специальный стиль горизонтального меню
ul {
list-style: none; /* Убираем маркеры списка */
margin: 0; /* Убираем отступ */
padding-left: 0; /* Убираем отступ слева*/
}
a {
text-decoration: none; /* Убираем подчеркивание ссылок */
}
li {
float:left; /* Чтобы пункты списка были горизонтальными */
margin-right:7px; /* Отступ */
}
В HTML документе для меню создаем свой блок div со своим id и внутри этого блока размещаем список меню. Для каждого пункта меню делаем ссылку на нужную страницу с помощью тега <a>. Например
<div id="menu"><ul>
<li><a href="http://itrobo.ru/">Главная</a></li>
<li><a href="http://itrobo.ru/code">Программирование</a></li>
<li><a href="http://itrobo.ru/robot">Робототехника</a></li>
</ul>
</div>
В файле таблицы стилей style.css прописываем для блока menu необходимые свойства. При этом перед каждым тегом нужно написать id.
#menu ul {
list-style: none; /* Убираем маркеры списка */
margin: 0; /* Убираем отступ */
padding-left: 0; /* Убираем отступ слева*/
}
#menu a {
text-decoration: none; /* Убираем подчеркивание ссылок */
font-size: 32pt;
}
#menu li {
float:left; /* Чтобы пункты списка были горизонтальными */
margin-right:7px; /* Отступ */
}
Пример горизонтального меню HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Шаблон простейшего сайта</title>
</head>
<body>
<div id="menu"><ul>
<li><a href="http://itrobo.ru/">Главная</a></li>
<li><a href="http://itrobo.ru/code">Программирование</a></li>
<li><a href="http://itrobo.ru/robot">Робототехника</a></li>
</ul>
</div>
</body>
</html>
Вертикальное меню в HTML
В статье Блочная вёрстка мы разобрали, как задавать основные области веб страницы, такие как шапка, основное содержание и футер. Чтобы создать вертикальное меню, необходимо создать область сайдбара слева или справа. Для сайдбара необходимо создать свой блок <div>. Внутри блока сайдбара задается меню с помощью тегов списка <ul> и <li>. Для каждого пункта меню размещается ссылка на нужную страницу
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Шаблон простейшего сайта</title>
</head>
<body>
<div id="header">Шапка сайта</div>
<div id="sidebar">Меню
<ul>
<li><a href="http://itrobo.ru/">Главная</a></li>
<li><a href="http://itrobo.ru/code">Программирование</a></li>
<li><a href="http://itrobo.ru/robot">Робототехника</a></li>
</ul>
</div>
<div id="main"> Основное содержимое</div>
<div id="footer">Футер</div>
</body>
</html>
В файле таблицы стилей style.css необходимо прописать стиль для сайдбара и в свойстве float необходимо указать left, чтобы колонка меню была слева, если укажем right, то колонка меню будет справа.
body{
background:#D3D3D3;
}
div{
margin: 5px;
border: 1px solid black;
font-size: 30px;
margin-right: 10%;
margin-left: 10%;
}
#header{
background-color: #0000CD;
color: #FFFFFF;
height: 100px;
}
#sidebar{
background-color: #ddd;
float: left;
width: 300px;
height: 800px;
}
#main{
background-color: #FFFFFF;
height: 800px;
}
#footer{
background-color: #000000;
color: #FFFFFF;
height: 400px; }
Вернуться к содержанию курса по HTML
Полезно : Регистрация домена и размещение сайта на хостинге
Поделиться
Нет комментариев. Ваш будет первым!