Ответственный заголовок

Я нашел этот сайт: https://www.picmonkey.com/ и хотел бы узнать, как была выполнена адаптивная навигационная техника. В полноэкранном режиме логотип, меню значков и знаковые бары имеют равномерное расстояние и при сжатии экрана до того, как меню будет полностью реагировать, три секции (логотип, меню значков и панель регистрации) сохраняют четный процент друг от друга.Ответственный заголовок

Я создал оболочку навигатора и задавался вопросом, является ли это всего лишь особенностью того, что эти элементы занимают определенные проценты экрана или это простой margin-left/float?

* 
 
{ 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#header 
 
{ 
 
    width: 100%; 
 
    min-height: 87px; 
 
    border-bottom: 1px solid #EFEFEF; 
 
} 
 

 
#header-fixedWidth 
 
{ 
 
    width: 92%; 
 
    min-height: 87px; 
 
    margin: 0 auto; 
 
} 
 

 
#picMonkeyLogo 
 
{ 
 
    margin-top: 23px; 
 
    margin-left: 5px; 
 
    margin-right: 50px; 
 
    float: left; 
 
} 
 

 
#icon-menu 
 
{ 
 
    min-height: 87px; 
 
    width: 300px; 
 
    float: left; 
 
    margin-left: 150px; 
 
    
 
} 
 

 
#icon-menu ul 
 
{ 
 
    list-style: none; 
 
} 
 

 
#icon-menu ul li 
 
{ 
 
    min-height: 87px; 
 
    float: left; 
 
    width: 70px; 
 
    font-family: 'Lato', sans-serif; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    color: rgb(76, 76, 76); 
 
} 
 

 
#icon-menu ul li img 
 
{ 
 
    margin-top: 10px; 
 
    margin-bottom: 5px; 
 
}

<div id="header"> 
 
      <div id="header-fixedWidth"> 
 
       <img src="Images/logo.png" alt="picMonkeyLogo" id="picMonkeyLogo" /> 
 
       <div id="icon-menu"> 
 
        <ul> 
 
         <li> 
 
          <img src="Images/iconMenu/edit.png" alt="editIcon" /> 
 
          <p>Edit</p> 
 
         </li> 
 
         <li> 
 
          <img src="Images/iconMenu/touchUps.png" alt="touchUpIcon" /> 
 
          <p>Touch Up</p> 
 
         </li> 
 
         <li> 
 
          <img src="Images/iconMenu/design.png" alt="designIcon" /> 
 
          <p>Design</p> 
 
         </li> 
 
         <li> 
 
          <img src="Images/iconMenu/collage.png" alt="collageIcon" /> 
 
          <p>Collage</p> 
 
         </li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </div>

источник

2016-11-29 Theodore Steiner

Просто интересно, если вы знаете о [Bootstrap] (http://getbootstrap.com/) –

Я думаю, что это может быть с помощью метода изложенных здесь, но я не уверен на 100%: https://css-tricks.com/equidistant-objects-with-css/#article-header-id-5 – Michelle

@WinterSoldier Aware, но я надеялся запутать медиа запросы немного больше –

Попробуйте

<!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"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link rel="icon" href="../../favicon.ico"> 

    <title>Fixed Top Navbar Example for Bootstrap</title> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    </head> 

    <body> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Project name</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li> 
       <li class="dropdown-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="../navbar/">Default</a></li> 
      <li><a href="../navbar-static-top/">Static top</a></li> 
      <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li> 
      </ul> 
     </div> 
     </div> 
    </nav> 

    <div class="container"> 
     <div class="jumbotron"> 
     <h1>Navbar example</h1> 
     <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> 
     <p>To see the difference between static and fixed top navbars, just scroll.</p> 
     <p> 
     </p> 
     </div> 

    </div> 
<style> 
body{ 
margin-top: 65px; 
} 
</style> 
    </body> 
</html>

источник

2017-02-27 12:17:16

Ответственный заголовок

ответ

Смежные вопросы