Логотип html: html — Как вставить логотип на шапку сайта?

19.04.2021 alexxlab

Содержание

html — Как сделать, чтобы меню было слева, а логотип — на той же линии, но справа?

Вопрос задан 3 года 4 месяца назад

Изменён 3 года 4 месяца назад

Просмотрен 3k раза

[![введите сюда описание изображения][1]][1]
<ul>
  <li>Пункт1</li>
  <li>Пункт2</li>
  <li><img src="http://via.placeholder.com/50x50/33ff99/555555?text=L"></li>
</ul>

Надо, чтобы отступ у логотипа был в 15 пикселей от правого края страницы, а меню — отступ 20 пикселей от левого. Между меню и логотипом много свободного места.

html
css

ul {
  height: 50px;
}

ul li {
  height: inherit;
  display: inline-block;
  flex: 0 0 1;
}

ul li:first-child {
  margin-left: 20px;
}

ul li:not(:last-child){
  padding-top: 18px;
}

ul li:last-child {
  justify-content: flex-end;
  margin-right: 15px;
  float: right;
}

<ul>
  <li>Пункт1</li>
  <li>Пункт2</li>
  <li><img src="http://via. placeholder.com/50x50/33ff99/555555?text=L"></li>
</ul>

Если есть вопросы, задавайте.

Что касается выравнивания элементов по оси X или Y

с этим прекрасно справляется flex. Меньше стилей и получаем нужный результат. Что касается разброс элементов по противоположным сторонам, то за это отвечает justify-content: space-between;. При этом правила flex учитывают margin && padding как родительских элементов так и дочерних…

Так же можно использовать grid-Ы. grid-Ы даже круче flex

body {
  background: #272727;
  color: white;
}

body * {
  margin: 5px;
  padding: 5px;
}

header {
  display: flex;
  align-items: center;
  border: 1px solid red;
  justify-content: space-between;
}

menu {
  display: flex;
  border: 1px solid green;
  justify-content: space-between;
}

li {
  list-style-type: none;
}

.  logo-wrap {
  display: flex;
  align-items: center;
}

<header>
  <menu>
    <li>Пункт1</li>
    <li>Пункт2</li>
  </menu>
  <div>
    <img src="http://via.placeholder.com/50x50/33ff99/555555?text=L" />
  </div>
</header>

ul {
    margin: 0 15px 0 20px;
}
ul li {
    list-style: none;
    display: inline-block;
}
ul li:last-child {
  display: flex;
  justify-content: flex-end; 
}

<ul>
  <li>Пункт1</li>
  <li>Пункт2</li>
  <li><img src="http://via.placeholder.com/50x50/33ff99/555555?text=L"></li>
</ul>

Используйте justify-content: space-between

, чтобы между текстом и логотипом было много места.

div.test {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 15px;
}
ul {
  padding: 0;
}
li {
  display: inline-block;
  list-style-type: none;
}

<div>
  <div>
    <ul>
      <li>Пункт1</li>
      <li>Пункт2</li>
    </ul>
  </div>
  <img src="http://via.placeholder.com/50x50/33ff99/555555?text=L">
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Логотип и ссылки в строку

Задать вопрос

Вопрос задан 3 года 6 месяцев назад

Изменён 3 года 1 месяц назад

Просмотрен 272 раза

Хочу чтобы логотип и ссылки были в одну строку. Я хочу это сделать с помощью флексов или гридов. как это сделать на моем примере?

html,body{
   min-height: 5026px;
    padding: 0;
    margin: 0;
}


*, *::before, *::after {
    box-sizing: border-box;
  }

.container{
    width: 1060px;
    margin: 0 auto;
}


header{
   
}

nav li{
}
nav ul{
    margin: 0;
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: flex-end;
   
}



.main-navigation a{
   
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    color: #626262;
    text-decoration: none;
    font-size: 14px;
    padding-right: 20px;
}





#logo{
    font-family: 'Inconsolata', monospace;
    font-size: 30px;
    text-transform: uppercase;
    padding: 0;
    display: flex;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.  0">
        <link type="text/css" rel="stylesheet" href="css/style.css">
        <link href="https://fonts.googleapis.com/css?family=Inconsolata|Playfair+Display:400,400i,700,900" rel="stylesheet">
        <script type="text/javascript" href="js/script.js" defer></script>
    </head>
    <body>
            <div>
    <header>
            <h2 href="#">minimø</h2>
        <nav>
        <ul>
            
            <li><a href="#">lifestyle</a></li>
            <li><a href="#">photodiary</a></li>
            <li><a href="#">music</a></li>
            <li><a href="#">travel</a></li>
        </ul>
        </nav>
    </header>   
    
            </div>
    
    <div>
        <div>
        <img src="img/himg.   png" alt="" >
        </div>
    </div>
    </body>
</html>

как должно выглядеть

флоаты и инлайн блоки больше не юзаю

html
css

li{
  list-style: none;
}

header{
    position: absolute;
    height: 15vh;
	z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
	width: 80vw;
    left: 10%;
    background-color: #00a550;
}

nav.hMenu{
    display: flex;
    justify-content: center;
}
nav.hMenu a{
    padding: 7px 1vw;
    font-size: 16px;
    color: #fff;
}
nav.hMenu a:hover{
    box-shadow: 0 0 0 1px #fff;
    border-radius: 15px;
}

span.logo{
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
}

<header>
    <span>minimø</span>
    <nav>
        <li><a href="index. html">Hello</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
    </nav>
</header>

Прокачав свои скилы решил ответить на свой вопрос сам.

.container{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.logo{
display: flex;
align-items: center;
}


.menu{
    display: flex;
    padding: 0;
}
li{
    margin-left: 10px;
    list-style-type: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1. 0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link type="text/css" rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
   <div>
       <div>
           <img src="data:image/png;base64,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" alt="">
           <span>Logo</span>
       </div>
       <ul>
           <li><a href="">home</a></li>
           <li><a href="">about</a></li>
           <li><a href="">contact</a></li>
           <li><a href="">Call</a></li>
       </ul>
   </div>
</body>
</html>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Логотип W3C HTML5

Готов сейчас к будущему

Возьмите под свой контроль — ваш Интернет, ваш логотип

Логотип HTML5

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

Представляем логотип HTML5.

Использовать логотип

У вас в голове HTML5. Сказать миру.

Покажи немного любви

Этот логотип HTML5 используется под лицензией Creative Commons Attribution. 3.0 — все можно использовать бесплатно и переосмысливать по своему усмотрению.

HTML5 в дикой природе

Галерея логотипов HTML5 (ниже) демонстрирует творчество сообщества. Мы предложить вам представить свои наблюдения, будь то снимки экрана или фильмы или кексы.

Технология

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

Вы уже в нескольких секундах от своего потрясающего персонализированного значка. Запустите Конструктор значков 5000.

Ориентация

Боковая панель или нижний колонтитул? Стоя или лежа?

Горизонтальный Вертикальный

Что за технология?

Создайте логотип, демонстрирующий, что вы используете.

Технология HTML Классы

Автономный режим и хранилище
Доступ к устройству
Связь / Реальное время
Производительность и интеграция
Мультимедиа
Семантика
Графика, 3D и эффекты
CSS3 / Стиль

Построй, и они придут

Движение

Вы в восторге от HTML5; мы тоже. Вы уже не просто наслаждаетесь Интернетом на базе HTML5 — вы его создаете! По мере распространения и вдохновения веб-сообщество будет находить творческие способы применения HTML5 и связанных с ним технологий, определять тенденции и использовать передовой опыт. По мере нарастания импульса мы надеемся, что вы возьмете с собой этот логотип и раскрасите мир в оранжевый цвет.

ЛОГОТИП В ДЕЙСТВИИ

Вы знаете тот значок HTML5, который вы так идеально поместили в свой нижний колонтитул? Эта футболка с HTML5 привлекает внимание в офисе? Наклейки HTML5 на вашем ноутбуке и логотип HTML5, который вы выпилили у себя в голове? Мы хотим это видеть! Покажите нам свои скриншоты, фотографии и другие творческие начинания, и они могут оказаться прямо здесь, в нашей галерее HTML5ivers.

Сообщите в Твиттере о своих появлениях логотипа HTML5 с хэштегом #html5logo

Загрузки

Mark + Wordmark

SVG

Скачать

PNG

512px
256px
128px
64px
32px

Только отметка

SVG

Скачать

PNG

512px
256px
128px
64px
32px

Опорные элементы

SVG

Скачать

PNG

Стандартный размер
Маленький размер

Технологические классы

Набор иконок SVG

Скачать

PNG

512px
256px
128px
64px
32px

Одноцветные логотипы

SVG

Черный
Белый

PNG

Черный
Белый

Шаблоны наклеек

SVG

Скачать

PNG

Стандартный размер

Люди делают вещи!

Примеры наклеек!

Эти наклейки были доступны, когда мы впервые запустили логотип.

Хочешь? Получите их на Unixstickers!

НОСИТЕ ЭТО СЕЙЧАС ДЛЯ БУДУЩЕГО

Многие люди берут логотип HTML5 и украшают им все, от футболок до пижам. Вот краткий обзор:

РУБАШКА HTML5 — КУПИТЕ!

Каждый мужчина, женщина и ребенок могут показать свою гордость HTML5! Часть каждой продажи идет на разработку набора тестов W3C HTML5.