当前位置：文江博客话题详情

简单水平按钮/菜单栏 Dreamweaver

发布于 2024-12-23 16:09:50 字数 232 浏览 1 评论 0原文

我刚刚开始使用 HTML 和 Dreamweaver。基本上，我正在尝试创建一个简单的水平菜单栏，其中包含鼠标悬停和“浏览器调整大小”，以便菜单栏将拉伸以跨越浏览器窗口等。

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

我在下面贴了一张图片，这样你就知道我所说的“水平”是什么意思。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

墨落画卷 2024-12-30 16:09:50

这应该能让你大致了解。您可能需要根据自己的喜好对其进行一些调整。但基本概念已经存在。

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

This should get you in the ballpark. You may need to tweak it a bit to your liking. But the underlying concept is there.

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

回复收藏 0 原文

压抑⊿情绪 2024-12-30 16:09:50

您应该使用如下所示的无序列表来执行此操作。

<ul class=".mynavul">
        <li><a href="index.html">Home</a></li>
        <li><a href="serviceappointment.html">Service appointment</a></li>
        <li><a href="pools&spas.html">Pools & 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 */

You should do it with Un-ordered list like shown below.

<ul class=".mynavul">
        <li><a href="index.html">Home</a></li>
        <li><a href="serviceappointment.html">Service appointment</a></li>
        <li><a href="pools&spas.html">Pools & 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>

and the CSS should be as shown below so it displays horizontally

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

回复收藏 0 原文

~没有更多了~