CSS是一种用于网页设计的语言,它可以帮助我们制作出美观的菜单栏。下面,我们就来一起看看如何使用CSS制作菜单栏。首先,我们需要先在HTML中定义我们的菜单栏,可以使用和标签:<ul&a
CSS是一种用于网页设计的语言,它可以帮助我们制作出美观的菜单栏。下面,我们就来一起看看如何使用CSS制作菜单栏。
首先,我们需要先在HTML中定义我们的菜单栏,可以使用
<ul> <li>菜单1</li> <li>菜单2</li> <li>菜单3</li> </ul>
在CSS中,我们可以使用下面的代码来设置菜单栏的样式:
ul { list-style-type: none; /* 去掉列表符号 */ margin: 0; /* 去掉默认的外边距 */ padding: 0; /* 去掉默认的内边距 */ background-color: #333; /* 设置背景颜色 */ } li { float: left; /* 让菜单项浮动在左侧 */ } li a { display: block; /* 将链接变成块级元素,便于设置样式 */ color: white; /* 设置链接文字为白色 */ text-align: center; /* 让文字居中 */ padding: 14px 16px; /* 设置内边距 */ text-decoration: none; /* 去掉下划线 */ } li a:hover { background-color: #4CAF50; /* 设置鼠标悬停时的背景颜色 */ }
通过上面的代码,我们就成功地制作出了一个简单的菜单栏。
粉丝
0
关注
0
收藏
0