用css制作动态水平按钮菜单

最新推荐文章于 2022-09-28 15:58:43 发布

apoxlo

最新推荐文章于 2022-09-28 15:58:43 发布

阅读量1.4k

点赞数

分类专栏： Web Develop 文章标签： css button float menu xhtml border

Web Develop 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用XHTML和CSS创建一个简单的水平按钮菜单。通过逐步调整CSS样式，实现了按钮样式的菜单，并添加了鼠标悬停效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

rel="stylesheet" type="text/css" href="http://www.globexdesigns.com/css/css.css">

CSS 菜单 - 水平 - 简单的按钮

这篇文章将知道用XHTML 和 CSS 常见一个简单的水平按钮菜单. 下面是最终效果:

1.记住在所有的利用 CSS/XHTML设计的代码中我们都要尽量保持代码的最少化.首先让我们建立我们需要的最基本的html代码, 注意，这里要符合Web 2.0 的标准,所有的菜单创建都要用<ul>标签：

Code:

<ul id="Menu">
	<li><a href="">Button 1</a></li>

	<li><a href="">Button 2</a></li>
	<li><a href="">Button 3</a></li>
</ul>

Preview:

2. 现在它看起来像一个列表清单，下一步我们要用CSS删除这些碍眼的属性. 下面是删除了列表项前的"项目符号"和添加了额外的空白间隔(默认 <ul> 的 margin-left 设置为 10px 和 padding 设置为 8px).

Code:

<style>
#Menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
</style>
							
<ul id="Menu">

	<li><a href="">Button 1</a></li>
	<li><a href="">Button 2</a></li>
	<li><a href="">Button 3</a></li>

</ul>

Preview:

3. 现在让我们用 float 样式重新排列这个“清单列表”的菜单.这个取决于你的菜单怎么安排, 你可以自己设定 float于左边或着右边 .

Code:

<style>
#Menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

#Menu li{
	float: left;
}
</style>
							

<ul id="Menu">
	<li><a href="">Button 1</a></li>
	<li><a href="">Button 2</a></li>
	<li><a href="">Button 3</a></li>

</ul>

Preview:

4. In order to turn the links into buttons we need to set it's display property to block. This will allow us to regulate its width and height. After which we can give it some styling. Note that the href property in the link must be set for this to work.

Code:

<style>
#Menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

#Menu li{
	float: left;
}

#Menu li a {
	background: #DDD;
	border: 0;
	color: #000;
	display: block;
	font-size: 11px;
	height: 24px;
	width: 90px;
}
</style>
							

<ul id="Menu">
	<li><a href="">Button 1</a></li>
	<li><a href="">Button 2</a></li>
	<li><a href="">Button 3</a></li>

</ul>

Preview:

5. Align the text vertically using the line-height style, and horizontally using the text-align style.

Code:

<style>
#Menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

#Menu li{
	float: left;
}

#Menu li a {
	background: #DDD;
	border: 0;
	color: #000;
	display: block;
	font-size: 11px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	width: 90px;
}
</style>
							

<ul id="Menu">
	<li><a href="">Button 1</a></li>
	<li><a href="">Button 2</a></li>
	<li><a href="">Button 3</a></li>

</ul>

Preview:

6. Now we can create some more styling on the button by giving the list elements a border and a background color and then setting a 1px margin on the buttons.

Code:

<style>
#Menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

#Menu li{
	background: #FFF;
	border: 1px solid #999;
	float: left;
}

#Menu li a {
	background: #DDD;
	border: 0;
	color: #000;
	display: block;
	font-size: 11px;
	height: 24px;
	line-height: 24px;
	margin: 1px;
	text-align: center;
	width: 90px;
}
</style>
							

<ul id="Menu">
	<li><a href="">Button 1</a></li>
	<li><a href="">Button 2</a></li>
	<li><a href="">Button 3</a></li>

</ul>

Preview:

7. Now we can apply the hover style on the button to change the way they look when you move your mouse over them.

Code:

<style>
#Menu {
	list-style: none;
	margin: 0;
	padding: 0;
}


#Menu li{
	background: #FFF;
	border: 1px solid #999;
	float: left;
}

#Menu li a {
	background: #DDD;
	border: 0;
	color: #000;
	display: block;
	font-size: 11px;
	height: 24px;
	line-height: 24px;
	margin: 1px;
	text-align: center;
	width: 90px;
}

#Menu li a:hover {
	background: #222;
	color: #CC9900;
}

</style>
							
<ul id="Menu">
	<li><a href="">Button 1</a></li>
	<li><a href="">Button 2</a></li>

	<li><a href="">Button 3</a></li>
</ul>

Preview:

8. To get rid of the extra borders in the buttons in the middle, we will need to give all buttons an id and then remove the borders per id.

Code:

<style>
#Menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

#Menu li{
	background: #FFF;
	border: 1px solid #999;
	float: left;
}

#Menu li a {
	background: #DDD;
	border: 0;
	color: #000;
	display: block;
	font-size: 11px;
	height: 24px;
	line-height: 24px;
	margin: 1px;
	text-align: center;
	width: 90px;
}

#Menu li a:hover {
	background: #222;
	color: #CC9900;
}

#Menu li#Button2,
#Menu li#Button3 {
	border-left: 0;
}

</style>
							
<ul id="Menu">

	<li id="Button1"><a href="">Button 1</a></li>
	<li id="Button2"><a href="">Button 2</a></li>
	<li id="Button3"><a href="">Button 3</a></li>

</ul>

Preview:

9. And you're done.

原帖地址:http://www.globexdesigns.com/resources/css/menu01.php