Question

我刚刚开始使用HTML和Dreamweaver。基本上，我尝试使用鼠标悬停和＆＃34;浏览器调整大小来创建一个简单的水平菜单栏。因此栏将被拉伸以跨越浏览器窗口等。

也许有人可以推荐一个很好的教程来开始这些初学者任务。

我在下面贴了一张照片，所以你知道我的意思是＆＃34;水平＆＃34;。

Answer 1

这应该让你进入球场。您可能需要根据自己的喜好稍微调整一下。但潜在的概念就在那里。

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

Answer 2

你应该使用如下所示的无序列表。

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

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

2 个答案: