CSS - 样式化标题/导航

Question

我正在尝试为网站标题/导航的样式证明有点棘手。我有一个PSD图像它需要如何看 -

我很好的标志，但我正在努力与如何适应所有其他元素在彼此的右侧。通常我只有徽标和导航链接。下面的代码 -

HTML

<header> 
     <h1 id="logo"> 
      <img src="images/Logo.png"> 
     </h1> 
     <div id="phoneandemail"> 
      <h3> 
       <img src="images/phone.png" alt="phone" > 
       <p>0113 220 5265</p> 
      </h3> 
      <h3> 
       <img src="images/email.png"> 
       <p>hello@featuremedia.co.uk</p> 
      </h3> 
     </div> 

      <nav> 
      <a href="index.html">HOME</a> 
      <a href="portfolio.html">PORTFOLIO</a> 
      <a href="products.html">PRODUCTS</a> 
      <a href="about.html">ABOUT</a> 
      <a href="contact.html">CONTACT</a> 
      <a href="blog.html">BLOG</a> 
      </nav> 

     <h3> 
      <i class="fa fa-facebook" aria-hidden="true"></i> 
      <i class="fa fa-twitter" aria-hidden="true"></i> 
      <i class="fa fa-instagram" aria-hidden="true"></i> 
      <i class="fa fa-youtube-play" aria-hidden="true"></i> 
      <i class="fa fa-linkedin" aria-hidden="true"></i> 
     </h3> 


    </header> 

我使用重置&骨架CSS网格旁边我的CSS。这里就是我这么远 -

CSS

header { 
    background: #ffffff; 
    height: 100px; 
    position: fixed; 
    width: 100%; 
    top: 0; 
    box-shadow: 0 0 10px rgba(0,0,0,0.25); 
    z-index: 10; 
} 

nav { 
    float: right; 
    line-height: 50px; 
    font-weight: 400; 
} 

nav a { 
    color: #bdc3c7; 
    text-decoration: none; 
    display: inline-block; 
    padding: 0 10px 0 10px; 
} 

#phoneandemail { 
    float: right; 
    height: 10px; 
    width: 200px; 
} 

h3 i { 
    float: right; 
} 

我需要把它们飘浮没事还是有一个更合适的方式将它们全部组合在一起，如PSD图片？我需要尽可能地接近它。

Answer 1

您可以很轻松地习惯这一点，这是如何： 做一个网格和每个div的颜色，所以你知道你在做什么。在获得所需的电网之前，请不要填写任何内容。因此，让我们的：

首先作出这样的左浮动，所以你有你的网格的第一部分两个div：

<header> 
    <div class="left-header"></div> 
    <div class="right-header"></div> 
</header> 

现在你已经得到的第一部分（左侧为标志，右侧面导航等）。其次给他们的颜色，让你知道你在改变什么，你在做什么。在那旁边给他们需要像宽度的所有选项，花车等

.left-header { background:red; width:100px; float:left; height:50px; } 
.right-header { background:blue; max-width:200px; float:left; height:50px; } 

注：我也用“高”，在这个例子中，只是为了确保出现什么。如果你不给高度/宽度，你将看不到屏幕上出现任何东西。但不要忘记最后去除高度。内容会产生你的身高。

请记住：我给他们一个宽度，但你应该检查在Photoshop应该是什么宽度。我想它应该是响应式的，所以给左边的div一个宽度（因为它有一个固定宽度的图像）和右侧的最小宽度和/或最大宽度，所以你的导航将保持响应。当你想保持它的响应时，宽度是不好的。所以只能用在真正需要的地方。

您的第一部分完成：“左标题”只需要一个图像呢。但等到你完成你的网格。其次，我们必须完成你的“右头”部分。

再一次：有两个div需要。顶部div（用于电话和邮件）和导航和社交图标的底部div。

<header> 
    <div class="left-header"></div> 
    <div class="right-header"> 
     <div class="right-header-top"></div> 
     <div class="right-header-bottom"></div> 
    </div> 
</header> 

再次给他们的颜色。高度是没有必要的。内容将做到这一点。但是由于我们还没有内容，现在就为这些元素添加一些高度。 现在底部是两个div;左侧和右侧（左侧为导航，右侧为社交图标）。等等...

请注意：有很多具有这种网格的框架。但要了解它是如何工作的，你应该尝试一下。如果您对自己制作的网格感到满意，那就像是应该那样，然后移除颜色并添加内容。这部分的

例子：

<header> 
    <div class="left-header"></div> 
    <div class="right-header"> 
     <div class="right-header-top"></div> 
     <div class="right-header-bottom"> 
      <div class="right-header-bottom-left"></div> 
      <div class="right-header-bottom-right"></div> 
     </div> 
    </div> 
</header> 

<style> 
    .left-header { background:red; width:100px; float:left; height:50px; } 
.right-header { background:blue; max-width:200px; float:left; height:50px; } 

.right-header-top { background:green; width:100px; height:25px; } 
.right-header-bottom { background:orange; width:100px; height:25px; } <!-- You won't see this as it's behind the blue and gray part. --> 

.right-header-bottom-left { float:left; height:25px; width:50%; background:blue;} 
.right-header-bottom-right { float:left; height:25px; width:50%; background:gray; } 
</style>