30行css导航

CSS导航是网页设计中非常重要的一个组成部分。在实际的设计中，通常会遇到需要在网页顶部或侧边栏添加导航条的情况。使用CSS可以很方便地创建美观的导航栏，并且提高网站的用户友好性。

nav {
  display: flex;
  justify-content: center;
  background-color: #333;
  font-family: sans-serif;
}
 
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}
 
nav li {
  margin: 0 10px;
}
 
nav a {
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  padding: 10px;
}
 
nav a:hover {
  color: #e6e6e6;
  transition: color 0.3s ease-in-out;
}

这段CSS代码实现了一个简单的水平导航栏。nav元素是导航栏的容器，通过flex布局实现内容水平居中。ul元素表示导航栏的列表，通过list-style-type: none去除了默认的无序列表样式。li元素表示导航栏的每一项，设置了margin属性来控制项之间的距离。a元素作为导航栏的链接，通过设置颜色、字号、内边距等属性来美化样式。最后，通过:hover伪类实现了鼠标悬浮时的颜色变化效果。

需要注意的是，实际使用中还需要根据具体情况对样式进行细节调整。同时，导航栏的布局和样式应该与整个网站的风格相一致，以提升整体美观性。