CSS中的导航栏是网站设计中非常常见的一部分,一般用来展示网站的分类和功能。导航栏一般放在页面的顶端,通常会使用一些特定的样式来使其更加醒目。要在CSS中制作一个导航栏,可以使用HTML的``和``标
<!-- HTML代码 --> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> <!-- CSS样式 --> nav ul { display: flex; /* 使用Flex布局 */ justify-content: space-between; /* 左右对齐 */ list-style-type: none; /* 去掉列表符号 */ margin: 0; padding: 0; background-color: #333; /* 导航栏背景色 */ } nav li { flex: 1; /* 平均分配宽度 */ text-align: center; /* 文本居中 */ } nav a { display: block; /* 转化为块级元素 */ color: white; /* 链接文字颜色 */ text-decoration: none; /* 去掉下划线 */ padding: 16px; /* 链接内边距 */ } nav a:hover { background-color: #555; /* 鼠标悬停时背景色 */ }
粉丝
0
关注
0
收藏
0