2016-11-10 7 views
2

私の最初のウェブサイトをコーディングしています。この部分にはまって、メニューの書き込みを正しくセンタリングし、イメージヘッドに合わせるためのヒント。事前に感謝htmlウェブサイトのメニューをナビゲートする方法

<!DOCTYPE html> 
<html> 
<head> 
    <title>A.Willi A.G</title> 
</head> 

<h1 align="center"> 
    <a href="index.html"><img src="logo.png" alt="A.Willi A.G" /></a> 
</h1> 

<body><link rel="stylesheet" href="index.css" type="text/css" /></body> 

<head> 
<style> 
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
    text-align: left; 
} 

li { 
    float: left; 


} 

li a, .dropbtn { 
    display: inline-block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

li a:hover, .dropdown:hover .dropbtn { 
    background-color: black; 
} 

li.dropdown { 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
    text-align: left; 
} 

.dropdown-content a:hover {background-color: #f1f1f1} 

.dropdown:hover .dropdown-content { 
    display: block; 
} 
</style> 
</head> 

<body> 

<ul> 
    <li><a href="kontakt.html">Kontakt</a></li> 
    <li class="dropdown"> 
     <a href="#" class="dropbtn">Bewerber</a> 
     <div class="dropdown-content"> 
     <a href="#">Info</a> 
     <a href="#">Jobs</a> 

    <li class="dropdown"> 
     <a href="#" class="dropbtn">Kunde</a> 
     <div class="dropdown-content"> 
     <a href="personalverleih.html">Personalverleih</a> 
     <a href="toolrental.html">Werkzeuge Mieten</a> 
     <a href="referenzen.html">Referenzen</a> 
     <a href="quali.html">Qulität, Sicherheit und Weiterbildung</a> 

    </li> 

</ul> 
</body> 
</html> 

答えて

1

これはいいですか?

<!DOCTYPE html> 
<html> 
<head> 
    <title>A.Willi A.G</title> 
</head> 

<h1 align="center"> 
    <a href="index.html"><img src="logo.png" alt="A.Willi A.G" /></a> 
</h1> 

<body><link rel="stylesheet" href="index.css" type="text/css" /></body> 

<head> 
<style> 
.menu_div{background-color: #333; width:100%;} 
ul { 
    list-style-type: none; 
    margin: 0 auto; 
    display:table; 
    padding: 0; 
    overflow: hidden; 
} 

li { 
    float: left; 


} 

li a, .dropbtn { 
    display: inline-block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

li a:hover, .dropdown:hover .dropbtn { 
    background-color: black; 
} 

li.dropdown { 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
    text-align: left; 
} 

.dropdown-content a:hover {background-color: #f1f1f1} 

.dropdown:hover .dropdown-content { 
    display: block; 
} 
</style> 
</head> 

<body> 

<div class="menu_div"> 
<ul> 
    <li><a href="kontakt.html">Kontakt</a></li> 
    <li class="dropdown"> 
     <a href="#" class="dropbtn">Bewerber</a> 
     <div class="dropdown-content"> 
     <a href="#">Info</a> 
     <a href="#">Jobs</a> 

    <li class="dropdown"> 
     <a href="#" class="dropbtn">Kunde</a> 
     <div class="dropdown-content"> 
     <a href="personalverleih.html">Personalverleih</a> 
     <a href="toolrental.html">Werkzeuge Mieten</a> 
     <a href="referenzen.html">Referenzen</a> 
     <a href="quali.html">Qulität, Sicherheit und Weiterbildung</a> 

    </li> 

</ul> 
</div> 
</body> 
</html> 
関連する問題