Привет, ребята, добро пожаловать в наш блог. В сегодняшнем блоге мы увидим, как создать панель навигации с логотипом с помощью HTML и CSS.

панель навигации с логотипом html css[/caption]

Что такое панель навигации?

панель навигации — это наиболее часто используемое слово на веб-сайтах. Когда вы посещаете веб-сайт, вы видите, что в заголовке веб-сайта есть меню, которое в кодировании называется меню, панелью навигации или панелью навигации.

Для чего используется панель навигации на веб-сайте?

на веб-сайте мы можем сказать, есть ли что-то важное, и это панель навигации, потому что, когда пользователь посещает веб-сайт, он хочет перемещаться по другим вашим страницам.

панель навигации содержит важные страницы веб-сайта, такие как контакты, о нас или любые сезонные ссылки, такие как лучшие предложения или лучшие предложения, поэтому надеюсь, что вы понимаете ценность панели навигации на веб-сайте.

Итак, давайте начнем с добавления исходных кодов в наш проект. Мы изначально используем HTML-код.

HTML-код для панели навигации с логотипом

Мы должны включить важные ссылки в раздел заголовка веб-сайта, прежде чем создавать макет панели навигации. теперь мы связываем файл Css с основным файлом html, потому что мы используем внешний файл Css, и мы связываем CDN Of Css Framework Bootstrap в файле Html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <title>navbar</title>
</head>
<nav class="navbar navbar-inverse " role="navigation">
 <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      
    </div>
    <a class="navbar-brand" href="#">Brand</a>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navbar-collapse-1">
     
      <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Menu</a></li>
        <li><a href="#">Menu</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
</div><!-- /.navbar-container -->
</nav>
<div class="row">
  <div class="container">
    <div class="col-md-12">
      <h2>Navbar Centered Logo</h2>
    </div>
  </div>
</div>

Во-первых, мы создаем тег nav и даем классу имя navbar navbar-inverse. мы создаем некоторый div с другим именем класса.

Теперь мы добавили навигационные ссылки в строку меню для адаптации к мобильным устройствам, и к ним были добавлены свойства HTML, такие как класс кнопки для щелчка строки меню, класс span для представления строки меню и т. д., а затем мы закрыли тег div.

Коды приведены ниже для пояснения выше.

<nav class="navbar navbar-inverse " role="navigation">
 <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      
    </div>

На этом шаге мы добавляем ссылки для панелей навигации, используя теги привязки и класс неупорядоченного списка, который содержит имена отдельных классов.

Основная часть заключается в том, что мы добавляем название «BRAND», которое здесь относится к логотипу. и это добавляется с тегом привязки. Затем мы закрыли все теги div и nav.

Теперь код для объяснения.

<a class="navbar-brand" href="#">Brand</a>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navbar-collapse-1">
     
      <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Menu</a></li>
        <li><a href="#">Menu</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
</div><!-- /.navbar-container -->
</nav>

Имена классов были добавлены как имена классов начальной загрузки, потому что это начальная загрузка. Просто запустите поиск Google для «панели навигации начальной загрузки» и скопируйте ссылку начальной загрузки внутри тега заголовка. Затем добавьте имена адаптивных классов, которые выполняют свертывание.

Сейчас все, что мы делаем, это добавляем содержимое веб-сайта с помощью класса div начальной загрузки.

<div class="row">
  <div class="container">
    <div class="col-md-12">
      <h2>Navbar Centered Logo</h2>
    </div>
  </div>
</div>

Добавлены спецификации для проекта по созданию панели навигации с логотипом. Теперь пришло время использовать CSS для центрирования логотипа на панели навигации.

HTML-вывод:

Код CSS для панели навигации с логотипом

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
}

в этом коде CSS мы можем разместить наш логотип на панели навигации.

Добавив исходные коды, мы смогли успешно завершить проект. В результате мы собираемся создать предварительный просмотр нашего проекта в области вывода ниже.

Теперь мы успешно создали нашу Панель навигации с логотипом с использованием HTML и CSS. Вы можете использовать этот проект для своих нужд персонала, и соответствующие строки кода приведены в разделе кода выше.

КОД ССЫЛКИ —Эрнан Малубай

АВТОР:Рагунатан С.