使用CSS+HTML完成导航栏

HTML

html 复制代码
<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>导航栏示例</title>  
<link rel="stylesheet" href="styles.css">  
</head>  
<body>  
<nav>  
  <ul class="navbar">  
    <li><a href="#">首页</a></li>  
    <li><a href="#">产品</a></li>  
    <li><a href="#">服务</a></li>  
    <li><a href="#">合作伙伴</a></li>  
    <li><a href="#">品牌</a></li>  
    <li><a href="#">社区</a></li>  
    <li><a href="#">联系我们</a></li>  
  </ul>  
</nav>  
  
</body>  
</html>

CSS

css 复制代码
.navbar {  
    list-style-type: none;  
    margin: 0;  
    padding: 0;  
    overflow: hidden;  
    background-color: #333;  
  }  
    
  .navbar li {  
    float: left;  
  }  
    
  .navbar li a {  
    display: block;  
    color: white;  
    text-align: center;  
    padding: 14px 16px;  
    text-decoration: none;  
  }  
    
  .navbar li a:hover {  
    background-color: #111;  
  }

结果

相关推荐
东东233几秒前
前端开发中如何取消Promise操作
前端·javascript·promise
掘金安东尼5 分钟前
官方:什么是 Vite+?
前端·javascript·vue.js
柒崽7 分钟前
ios移动端浏览器,vh高度和页面实际高度不匹配的解决方案
前端
烛阴31 分钟前
为什么游戏开发者都爱 Lua?零基础快速上手指南
前端·lua
大猫会长41 分钟前
tailwindcss出现could not determine executable to run
前端·tailwindcss
Moonbit1 小时前
MoonBit Pearls Vol.10:prettyprinter:使用函数组合解决结构化数据打印问题
前端·后端·程序员
533_1 小时前
[css] border 渐变
前端·css
云中雾丽1 小时前
flutter的dart语言和JavaScript的消息循环机制的异同
前端
地方地方1 小时前
Vue依赖注入:provide/inject 问题解析与最佳实践
前端·javascript·面试
云中雾丽1 小时前
dart的继承和消息循环机制
前端