Большинство навигационных стержней расположены горизонтально, как показано на рисунке ниже, так как это достигается? Фактически, в основном он использует горизонтальное расположение LI в теге <ul>. Вот пример, чтобы подробно объяснить, как он реализован.
1. Напишите горизонтальное меню HTML -код схемы<ul id = menu> <li> <a href = http: //www.baidu.com> baidu.com </a> </li> <li> <a href = // www.vevb.com> jb51.net </a> </li> <li> <a href = http: //ww.yahoo. <li> <a href = http: //www.google.com class = last> google.com </a> </li> </ul>2Writing CSS -код
<1> Установите общий стиль
<стиль типа = текст/css> #menu {font: 12px verdana, arial, sans-serif; /* Установить размер текста и стиль шрифта*/ ширина: 100%; } #menu, #menu li {list-style: none; / * Удалить символ списка по умолчанию */ padding: 0; / * Удалить внутреннюю маржу по умолчанию */ рентабель: 0; / * Удалить внешний край по умолчанию */ float: слева; /* Плавать слева*/ дисплей: block;}<2> Установить стиль ссылки
<style type = text/css> #menu li a {display: block; /* Установите ссылку на элемент уровня блока*/ ширина: 150px; /* Установите ширину*/ высота: 30px; /* Установить высоту*/ line-height: 30px; /* Установите высоту строки, установите одинаковое значение для высоты и высоты строки, чтобы одна строка текста была центрирована вертикально*/ text-align: center; /* Центр выровненного текста*/ фон:#3A4953; /* Установить цвет фона*/ color: #fff; /* Установите цвет текста*/ текстовое декорация: нет; /* Удалить подчеркивание*/ граница правая: 1px solid #000; / * Добавить разделитель слева */} </style><3> Эффект наказания ссылок
<style type = text/css> #menu li a: hover {fourene: #146c9c; /* Изменить цвет фона*/ color: #ffff; /* Изменить цвет текста*/} </style><4> Снимите правую коробку самой левой навигационной панели
<стиль типа = текст/css> #menu li a.last {граница прайт: 0; /* Снимите левую границу*/} </style>3 Полный код
<! Doctype html> <html> <head> <meta charset = utf-8> <Title> эффект подсказки изображения </title> <script src = ../jquery-3.3.1.min.js> </script> <стиль типа = текст/css> #menu {font: 12px verdana, arial, sans-serif; /* Установить размер текста и стиль шрифта*/ ширина: 100%; } #menu, #menu li {list-style: none; / * Удалить символ списка по умолчанию */ padding: 0; / * Удалить внутреннюю маржу по умолчанию */ рентабель: 0; / * Удалить внешний край по умолчанию */ float: слева; /* Float Left*/ Display: Block; } #menu li a {display: inline block; /* Установите ссылку на элемент уровня блока*/ ширина: 150px; /* Установите ширину*/ высота: 30px; /* Установить высоту*/ line-height: 30px; /* Установите высоту строки, установите одинаковое значение на высоту и высоту линии, чтобы одна строка текста была центрирована вертикально*/ text-align: center; /* Центр выровненного текста*/ фон:#3A4953; /* Установить цвет фона*/ color: #fff; /* Установите цвет текста*/ текстовое декорация: нет; /* Удалите подчеркивание*/ граница правая: 1px sold #000; / * Добавить разделитель слева */} #menu li a: Hover {founale: #146c9c; /* Изменить цвет фона*/ color: #fff; /* Изменить цвет текста*/} #menu li a.last {граница-право: 0; /* Удалить левую границу*/} </style> </head> <body> <ul id = menu> <li> <a href = http: //www.baidu.com> baidu.com </a> </li> <li> <a href = // www.vev.com> jb51. href = http: //www.yahoo.com> yahoo.com </a> </li> <li> <a href = http: //www.google.com class = last> google.com </a> </li> </ul> </body> </html>Запустить онлайн
Совет: сначала вы можете изменить код, а затем запустить его
Короче говоря, самое необходимое, чтобы сделать его горизонтальным, это: основной стиль тега <UI> - Balock;
Основным стилем <li> отображается: inline-balock, float: left, list-style: none;
Это статья о примере реализации Li Horizontal Manchement в тегах в HTML. Для получения более связанного содержимого HTML Li Horizontal Arangement, пожалуйста, найдите предыдущие статьи wulin.com или следующие связанные статьи. Я надеюсь, что все будут поддерживать wulin.com в будущем!