2017-09-01 29 views
4

我想制作一个页面,只是为了锻炼,而且我遇到了一个问题,所以如果您运行代码,徽标应位于中心的顶部,而不是在它的菜单为中心的..但它下降的背景下,帮助请 1.如何每三个菜单列表项下添加一个下拉列表,我可以添加一些文字,图片和位置Img属于背景,但它不应该

body { 
 
\t background-color:lightgray; 
 
\t font-family: Tahoma, Cambria; 
 
} 
 
#header { 
 
\t height: 300px; 
 
} 
 
#logo { 
 
\t position: absolute; 
 
    margin: auto; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
} 
 
#menu { 
 
\t position: relative; 
 
\t max-height:60px; 
 
\t font-family: Cambria; 
 
\t font-style: bold, italic; 
 
\t text-align: center; 
 
} 
 

 
#menu ul { 
 
\t list-style-type: none; 
 
\t margin: 0; 
 
    padding: 0; 
 
    float:none; 
 
} 
 

 
#menu li a { 
 
\t display:inline-block; 
 
\t color:#009CFF; 
 
\t padding: 10px 200px; 
 
\t overflow:hidden; 
 
\t transition: 0.3s; 
 
\t font-style:italic; 
 
\t font-weight: bold; 
 
\t text-decoration:none; 
 
\t margin: 0 0 0 0; 
 
} 
 
#menu li a:hover { 
 
    background-color: dimgray; 
 
    color: deepskyblue; 
 
} 
 

 
body { 
 
\t border: 2px solid dark-gray ; 
 
} 
 
l>
<!DOCTYPE html > 
 
<html> 
 
\t <head> 
 
\t \t <title></title> 
 
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> 
 
\t </head> 
 
\t <body> 
 
\t \t <header> 
 
\t \t \t <img src = "http://via.placeholder.com/350x150" id = "logo" alt = "Antomatik logo"/> 
 
\t \t </header> 
 
\t \t <div id = "menu"> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li class="onama"> 
 
\t \t \t \t \t \t <a href="antomatik/onama.html">O nama</a></li> 
 
\t \t \t \t \t <li class="povijest"> 
 
\t \t \t \t \t \t <a href="antomatik/povijest.html">Povijest</a></li> 
 
\t \t \t \t \t <li class="kontakt"> 
 
\t \t \t \t \t \t <a href="antomatik/kontakt.html">Kontakt</a></li> 
 
\t \t \t \t 
 
\t \t \t \t </ul> 
 
\t \t </div> 
 
\t \t <footer> 
 
\t \t 
 
\t \t </footer> 
 
\t </body> 
 
</html>

+0

请添加一个占位符或lorempixel图像 – mplungjan

回答

1

header而不是#header

body { 
 
\t background-color:lightgray; 
 
\t font-family: Tahoma, Cambria; 
 
} 
 
header { 
 
\t height: 100px; 
 
} 
 
#logo { 
 
\t position: absolute; 
 
    margin: auto; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
} 
 
#menu { 
 
\t position: relative; 
 
\t max-height:60px; 
 
\t font-family: Cambria; 
 
\t font-style: bold, italic; 
 
\t text-align: center; 
 
} 
 

 
#menu ul { 
 
\t list-style-type: none; 
 
\t margin: 0; 
 
    padding: 0; 
 
    float:none; 
 
} 
 

 
#menu li a { 
 
\t display:inline-block; 
 
\t color:#009CFF; 
 
\t padding: 10px 200px; 
 
\t overflow:hidden; 
 
\t transition: 0.3s; 
 
\t font-style:italic; 
 
\t font-weight: bold; 
 
\t text-decoration:none; 
 
\t margin: 0 0 0 0; 
 
} 
 
#menu li a:hover { 
 
    background-color: dimgray; 
 
    color: deepskyblue; 
 
} 
 

 
body { 
 
\t border: 2px solid dark-gray ; 
 
} 
 
l>
<!DOCTYPE html > 
 
<html> 
 
\t <head> 
 
\t \t <title></title> 
 
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> 
 
\t </head> 
 
\t <body> 
 
\t \t <header> 
 
\t \t \t <img src="http://via.placeholder.com/300x100" id = "logo" alt = "Antomatik logo"/> 
 
\t \t </header> 
 
\t \t <div id = "menu"> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li class="onama"> 
 
\t \t \t \t \t \t <a href="antomatik/onama.html">O nama</a></li> 
 
\t \t \t \t \t <li class="povijest"> 
 
\t \t \t \t \t \t <a href="antomatik/povijest.html">Povijest</a></li> 
 
\t \t \t \t \t <li class="kontakt"> 
 
\t \t \t \t \t \t <a href="antomatik/kontakt.html">Kontakt</a></li> 
 
\t \t \t \t 
 
\t \t \t \t </ul> 
 
\t \t </div> 
 
\t \t <footer> 
 
\t \t 
 
\t \t </footer> 
 
\t </body> 
 
</html>