Как вставить логотип в html: Как вставить картинку в HTML – База знаний Timeweb Community

Разное 

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

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

Вопрос задан

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

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

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

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

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

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

Почта

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

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

Почта

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

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

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

[![введите сюда описание изображения][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

2 

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>

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

1

Что касается выравнивания элементов по оси 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>

4 

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>

2

Используйте 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

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

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

Почта

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

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

Почта

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

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

favicon — Как вставить логотип с заголовком HTML-страницы?

спросил

Изменено 11 месяцев назад

Просмотрено 171 тысяч раз

Поскольку у stackoverflow. com есть логотип с названием, как это можно сделать для любого обычного сайта? Какой код для этого нужен?

  • HTML
  • Фавикон

1

Вы имеете в виду фавикон?

Загрузите значок 16x16px на свой сайт и дайте ссылку на него в разделе head .

Существует множество сайтов, которые также помогают конвертировать изображения в формат .ico. Это просто первое, что я увидел в Google. http://www.favicon.cc/

Да, вы правы, и я просто хочу, чтобы это было понятно для полных новичков.

  1. Создайте файл favicon.ico, который должен отображаться рядом с вашим URL-адресом на вкладке браузера. Вы можете сделать это онлайн. Я использовал http://www.prodraw.net/favicon/generator.php, он отлично работал.
  2. Сохраните сгенерированный файл ico в корневом каталоге вашего веб-сайта /images (yourwebsite/images) под именем favicon. ico.
  3. Скопируйте этот тег и далее без каких-либо изменений между открывающим тегом и закрывающим тегом .
  4. Сохраните изменения в файле html и перезагрузите браузер.

1

Это называется фавикон. Их легко сделать.

Поместите это в раздел :

Сохраните файл изображения с именем «favicon.ico». Вам придется поискать в Интернете генератор файлов .ico.

Это называется фавикон. Он вставляется так:

У меня тоже была такая же проблема, но на самом деле это файл favicon.ico, который вы можете получить. Генератор favicon.ico Google и либо загрузите готовые значки, либо создайте свои собственные. А затем вставьте следующий код:

внутри тега head.

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

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html — Как сделать логотип моего веб-сайта изображением значка на вкладках браузера?

спросил

Изменено 1 год, 6 месяцев назад

Просмотрено 531 тысяч раз

Изображение рядом с заголовком страницы на вкладке браузера — как здесь можно связать изображение?

  • HTML
  • Фавикон

2

Это изображение называется ‘favicon’ и представляет собой небольшой квадратный файл . ico , который является стандартным типом файла для значков. Вы можете использовать .png или .gif тоже, но вы должны следовать стандарту для лучшей совместимости.

Чтобы установить его для своего сайта, вам необходимо:

  1. Сделать квадратное изображение вашего логотипа (желательно 32×32 или 16×16 пикселей, насколько я знаю, нет максимального размера*) и преобразовать его в .ico файл. Вы можете сделать это в Gimp, Photoshop (с помощью плагина) или на веб-сайте, таком как Favicon.cc или RealFaviconGenerator.

  2. Тогда у вас есть два способа настройки:

    A) Разместите его в корневой папке /каталоге вашего веб-сайта (рядом с index.html ) с именем favicon.ico .

    или

    B) Ссылка на него между тегами каждого файла .html на вашем сайте, например:

     <голова>
   ico" />

Если вы хотите увидеть фавиконку с любого сайта, просто напишите www.url.com/favicon.ico и вы (вероятно) его увидите. Фавикон Stackoverflow имеет размер 16×16 пикселей, а размер Википедии — 32×32.

*: Тут даже проблема с браузером без ограничения размера. Вы можете легко сломать браузер с очень большим фавиконом, больше информации здесь

0

Он называется « favicon », и вам нужно добавить приведенный ниже код в раздел заголовка вашего веб-сайта.

Просто добавьте это в раздел .

1

Это фавикон, пояснение по ссылке.

напр. из W3C

No related posts.
Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *