добавив lo go рядом с меню навигации или посередине и создав закругленные углы для меню навигации - PullRequest
Новая
       23

добавив lo go рядом с меню навигации или посередине и создав закругленные углы для меню навигации

0 голосов
/ 23 апреля 2020

Привет, мне нужна помощь, чтобы поместить мой lo go между списками меню навигации ... это было бы дома, галерея, lo go изображение, о, контакт ... Я смотрел видео на YouTube, и он сделал не работает ... я бы также попытался положить lo go на боковой панели меню навигации, и это не сработало, так что если кто-нибудь может помочь мне с кодом для обоих вариантов, которые были бы хорошими, и закругления углов для навигации бар. Я следил за видео, и это не работает. я не знаю, что я делаю неправильно или отсутствует. 1. код для размещения изображения lo go между списками панели навигации (главная страница, галерея, изображение Lo go, о, контакт) 2. код lo go изображение плавает слева от панели навигации. 3. сделать закругления углов для панели навигации ..

Ответы [ 2 ]

0 голосов
/ 23 апреля 2020 

body {
  margin: 0;
  padding: 0;
  font-family: Arial; /* Change to any font you need */
}

nav {
  background-color: blue;
}

nav .nav-items {
  align-items: center;
  display: flex;
  justify-content: space-around;
  padding: 10px;
}

nav .nav-items a {
  color: white;
  margin: 0 25px;
  padding: 15px;
  text-decoration: none;
  transition: 0.3s ease-in-out;
}

nav .nav-items a:hover {
  background-color: darkblue;
}

nav .nav-items .logo {
  height: 35px;
  width: auto;
  margin: 0 25px;
}
<nav>

  <div class="nav-items">
    <a href="/">Home</a>
    <a href="/gallery">Gallery</a>
    <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png">
    <a href="/help">Help</a>
    <a href="/contact">Contact</a>
  </div>

</nav>
0 голосов
/ 23 апреля 2020 

.nav {
  background: blue;
  height: 80px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
}
.nav logo{
  width: 50px;
  flex: 0 0 20%;
}
.nav .menus {
  flex: 0 0 80%;
}
.nav .menus ul {
  display: flex;
  list-style: none;
  align-items: center;
}
.nav .menus ul li {
  flex-grow: 1;
}
.nav img {
  width: 50px;
}
<div class="nav">
  <div class="logo">
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png" />
  </div>
  <div class="menus">
    <ul>
      <li>Home</li>
      <li>Gallery</li>
      <li>
      <img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png" >
      </li>
      <li>Help</li>
      <li>Contact</li>
    </ul>
  </div>
</div>
...