简单的水平按钮/菜单栏Dreamweaver

我刚刚开始使用HTML和Dreamweaver。基本上，我试图用鼠标悬停和“浏览器调整大小”创建一个简单的水平菜单栏，因此酒吧将被拉伸到跨越浏览器窗口等。简单的水平按钮/菜单栏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>

和CSS应该下面如图所以它水平地显示

/* 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 */

来源

2011-12-30 21:20:30

简单的水平按钮/菜单栏Dreamweaver

回答

相关问题