Добавление и размещение изображений на панели навигации - PullRequest
Новая
       64

Добавление и размещение изображений на панели навигации

0 голосов
/ 06 августа 2020

Мне нужно переместить свой ESPN в крайнее левое положение на панели навигации, и мне нужно добавить значок сканирования в панель навигации, как это изображение. Я рисую ту же картинку, но не смогу добавить значок сканирования и добавить 3 полосы сразу после вкладки программирования. Я создаю ту же картинку в HTML, но не могу избавиться от этих 2–3 вещей. Любая помощь действительно приветствуется.

после этого изображения

Это мой код: 

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/icons.css">
    <link rel="stylesheet" href="css/responsee.css">
    <link rel="stylesheet" href="owl-carousel/owl.carousel.css">
    <link rel="stylesheet" href="owl-carousel/owl.theme.css">     
    <link rel="stylesheet" href="css/template-style.css">
    <link href='https://fonts.googleapis.com/css?family=Playfair+Display&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>      
  </head>
  
  <body class="size-1140">
    <header role="banner" class="position-absolute">    
      
      <nav class="background-transparent background-transparent-hightlight full-width sticky">
        <div class="s-20 l-2">
          <a href="index.html" class="logo">
           
           
          </a>
        </div>
        
        <div class="top-nav s-20 l-20">
            
          <p class="nav-text"></p>
          <ul class="right chevron">
          
          <a style="text-align:right;">ESPN</a>
            <li><a style="text-align:right;">HOME</a></li>
            <li><a style="text-align:right;">SCHEDULE</a></li>
            <li><a>PROGRAMMING</a>
              <ul>
              </ul>
            </li>
            <li><a >ABOUT</a></li>
            <li><a >NEWS</a></li>
            <li><a >CONTACT</a></li>
            <li><a>SELECTLANGUAGE</a>
              <ul>
                
              </ul>
            </li>
          </ul>
        </div>
      </nav>
    </header>
    
    <!-- MAIN -->
    <main role="main">    
      <!-- Main Header -->
      <header>
        <div class="carousel-default owl-carousel carousel-main carousel-nav-white background-dark text-center">
          <div class="item">
            <div class="s-12">
              <img src="img/header.jpg" alt="">
              <div class="carousel-content">
                <div class="content-center-vertical line">
                  <div class="margin-top-bottom-80">
                    <!-- Title -->
                    <h1 class="text-white margin-bottom-30 text-size-60 text-m-size-30 text-line-height-1">ESPN SPORTS<br> PROGRAMMING</h1>
                    <div class="s-12 m-10 l-8 center"><p class="text-white text-size-14 margin-bottom-40">Welcome to ESPN's catalog of sports content available for broadcast worldwide.<br> Every year we distribute more than 6000 hours of live events, highlight series, <br> studio and scripted media to broadcasters across the globs.</p></div>
                    <div class="line">
                      <div class="s-10 m-10 l-3 center">
                        <a class="button button-white-stroke s-6" style="background-color:red;" href="/">+CONTACT US</a>
                        <a class="button button-white-stroke s-6" style="background-color:black;" href="/">WATCH DEMO</a>
                      </div>       
                    </div>  
                  </div>
                </div>
              </div>
            </div>
          </div>              
        </div>               
      </header>
      
      
      
    <script type="text/javascript" src="js/responsee.js"></script>
    <script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>
    <script type="text/javascript" src="js/template-scripts.js"></script>
  </body>
</html>

мой результат

Ответы [ 2 ]

0 голосов
/ 07 августа 2020

Я думаю, вы разбиты не на ту часть. Разделы lo go и nav, которые необходимо разделить, легче настроить. 

nav {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    ul {
        display: flex;
        align-items: center;
        justify-content: space-between;
        list-style: none;
        flex: 2;
    }

    p img {
        width: 100px;
    }
    p {
        flex: 1;
    }
<nav>
        <p><img src="https://cdn.iconscout.com/icon/free/png-256/espn-282356.png"></p>
        <ul>
            <li>HOME</li>
            <li>SCHEDULE</li>
            <li>PROGRAMMING</li>
            <li>ABOUT</li>
            <li>NEWS</li>
            <li>CONTACT</li>
            <li>SELECTLANGUAGE</li>
        </ul>
    </nav>
0 голосов
/ 06 августа 2020

Вы можете сделать это:

поместите это в заголовок 

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

поместите это там, где вы хотите, чтобы ваш значок появился 

<a><i class="material-icons">menu</i></a>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...