シンプルな水平ボタン/メニューバーDreamweaver

私はちょうどHTMLとDreamweaverを使い始めています。基本的に、私はmouseoverと "browser resize"を使って単純な横のメニューバーを作成しようとしていますので、バーがブラウザウィンドウなどに広がるようにします。シンプルな水平ボタン/メニューバーDreamweaver

誰かがこのチュートリアル初心者の仕事。

私は「水平」という意味を知っているので、下の写真を貼り付けました。

出典

2011-12-30 Linuxmint

これは球場であなたを取得する必要があります。あなたは好みに少し微調整する必要があるかもしれません。しかし、基本的な概念はそこにあります。

<html> 
<head> 
<title></title> 
</head> 
<body> 

<style type="text/css"> 

#navbar { 
width:100%; 
height:40px; 
background-color:#000; 
} 

#navbar ul { 
width:80%; 
margin:0 auto 0 auto; 
} 

#navbar ul li { 
float:left; 
color:#CC0000; 
padding:0 20px 0 20px; 
border-right:1px solid #FFF; 
border-left:1px solid #FFF; 
height:40px; 
list-style:none; 
display:block; 
line-height:40px; 
text-align:center; 
cursor:pointer; 
} 

#navbar ul li:hover { 
background-color:#CCC; 
} 

</style> 
    <div id="navbar"> 

     <ul> 
      <li>Link 1</li> 
      <li>Link 2</li> 
      <li>Link 3</li> 
      <li>Link 4</li> 
      <li>Link 5</li> 
     </ul> 

    </div> 
</body> 
</html>

FIDDLE：以下に示すように

http://jsfiddle.net/xbf5xq3n/1/

出典

2011-12-30 21:17:03

あなたは未順序リストでそれを行う必要があります。

<ul class=".mynavul"> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="serviceappointment.html">Service appointment</a></li> 
     <li><a href="pools&amp;spas.html">Pools &amp; spas</a></li> 
     <li><a href="testimonials.html">Testimonials</a></li> 
     <li><a href="aboutus.html">About us</a></li> 
     <li><a href="contactus.html" class="active">Contact us</a></li> 
     <li><a href="links.html">Links</a></li> 


     </ul>

、それは水平

/* for the Ul */ 

ul.mynavul { 
    float: left; 
    width: 100%; 
    height: auto; 
    padding: 0px; 
    margin-top: 0px; 
    margin-right: 0px; 
     display: block; 
    margin-bottom: 0px; 
    margin-left: 3px; 
} 




/* for the Li */ 

ul .mynavul li { 
    float: left; 
    width: 141px; 
    margin-left: 1px; 
    padding: 0px; 
    text-align: center; 
     display: block; 
    margin-top: 19px; 
    color: #D8DCD8; 
    font-size: 14px; 
} 


/* for the Links */ 

ul .mynavul li a { 
    color: #CCC; 

} 


/* for the Links Hover */ 

ul .mynavul li a:hover { 
    color: #CCC; 

} 



/* Adjust the Colors, Width, and Height as needed */

表示するようにCSSは以下のようにすべきです

出典

2011-12-30 21:20:30

シンプルな水平ボタン/メニューバーDreamweaver

答えて

関連する問題