Html 在徽标下方添加导航_Html_Css

Html 在徽标下方添加导航

html css

Html 在徽标下方添加导航,html,css,Html,Css,我需要有在屏幕的顶部中心标志。在徽标下，我需要导航栏我有以下css： * { margin: 0; padding: 0; } body { background: url(images/bg_image.jpg); background-size: 100%; font-size: 14px; font-family: Verdana; color: #ffffff; } #header { bac

我需要有在屏幕的顶部中心标志。在徽标下，我需要导航栏

我有以下css：

    * {
    margin: 0;
    padding: 0;
}

body {
    background: url(images/bg_image.jpg);
    background-size: 100%;      
    font-size: 14px;
    font-family: Verdana;
    color: #ffffff;
}
    #header {
    background: url(images/logo2.png);    /* THIS IS LOGO IMAGE IN CENTER*/     
    background-repeat:no-repeat;
    background-position: center 20px;    /* CENTERING AND TOP MARGIN IS 20PX*/
    height: 180px;      
}
/* NAVIGATION BAR */
#top-nav{       
    border:0px solid #ccc;      
    list-style:none;    
    /*margin-top:135px;*/
    padding: 0;
    text-align:center;              
    background-color: #000000;
}

#top-nav li {       
    display:inline;
    width:130px;
}

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

#top-nav a:hover{
    background: url(images/selected_menu.png);      
    background-repeat:repeat-x; 
}

和HTML

   <body>

    <div id="header">           
        <ul id="top-nav">
            <li><a href="">Home</a></li>
            <li><a href="">Home</a></li>
            <li><a href="">Home</a></li>
            <li><a href="">Home</a></li>
            <li><a href="">Home</a></li>
            <li><a href="">Home</a></li>
        </ul>           
    </div>
            ....










....

这使我在中心和顶部的标志。但导航栏上的标志。我需要它的标志下（它应该是从屏幕顶部135px）。如果我将边距添加到#top nav margin top:135px，则徽标也将移动135px。解决这个问题的正确方法是什么

我想这是一个简单的问题，但这是我第一次将psd切片为html

在Header div元素中添加padding，例如

padding top:135px

您应该将您的徽标与导航分开，如下所示

<header>
   <div id="logo"></div>
  <ul id="top-nav">
     <li><a href="">Home</a></li>
     <li><a href="">Home</a></li>
     <li><a href="">Home</a></li>
     <li><a href="">Home</a></li>
     <li><a href="">Home</a></li>
     <li><a href="">Home</a></li>
   </ul>  
</header>

并给出你的徽标

宽度：100%

和背景图像