使用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;  
  }

结果

相关推荐
右子19 分钟前
微信小程序开发“闭坑”指南
前端·javascript·微信小程序
入秋32 分钟前
Three.js后期处理实战:噪点 景深 以及色彩调整
前端·javascript·three.js
Asort35 分钟前
JavaScript设计模式(七)——桥接模式:解耦抽象与实现的优雅之道
前端·javascript·设计模式
golang学习记37 分钟前
从0死磕全栈之Next.js 应用中的认证与授权:从零实现安全用户系统
前端
苏打水com43 分钟前
携程前端业务:在线旅游生态下的「复杂行程交互」与「高并发预订」实践
前端·状态模式·旅游
Darenm1111 小时前
深入理解CSS BFC:块级格式化上下文
前端·css
Darenm1111 小时前
JavaScript事件流:冒泡与捕获的深度解析
开发语言·前端·javascript
@大迁世界1 小时前
第03章: Vue 3 组合式函数深度指南
前端·javascript·vue.js·前端框架·ecmascript
小白64021 小时前
前端梳理体系从常问问题去完善-框架篇(react生态)
前端·css·html·reactjs
Hy行者勇哥1 小时前
数据中台的数据源与数据处理流程
大数据·前端·人工智能·学习·个人开发