/* 导航菜单的样式 */ nav { position: fixed; /* 固定位置 */ top: 0; /* 距离网页顶部为0 */ background-color: #ffffff; /* 背景色为白色 */ z-index: 100; /* z-index值大于其他元素,使其处于最上层 */ width: 100%; /* 自适应宽度 */ height: 50px; /* 菜单栏高度 */ text-align: center; /* 文字居中 */ } /* 导航菜单中每个选项的样式 */ nav a { display: inline-block; /* 将a标签转为块级元素 */ margin: 0 10px; /* 左右间距10px */ line-height: 50px; /* 行高与菜单高度一致 */ color: #333; /* 字体颜色 */ text-decoration: none; /* 文字无下划线 */ } /* 当鼠标悬停在选项上时的样式 */ nav a:hover { color: #ff0000; /* 字体颜色改变为红色 */ }在HTML中使用以上样式时,只需将导航菜单放在
首页 >
css3 导航菜单固定 |如何将微软雅黑加入css
CSS3是一种广泛使用的样式表语言,它为网页的排版和呈现提供了很多有用的功能和特性。其中之一就是导航菜单的固定,这在网站设计中非常常见和重要。
通过CSS3中的position和z-index属性,大家可以很容易地将导航菜单固定在网页的顶部或底部,并且使其在滚动网页时保持不变。以下是一个实现固定导航菜单的代码示例: