使用CSS+HTML完成导航栏

子璇加油2024-04-25 4:06

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

结果