1、首先，创建一个html页面，并且添加一个无序列表<ul>作为导航栏内容显示位置。如图所示：
2、接着创建css文件，并在html引入。如图所示：
3、设置导航栏所在的div容器样式，指定宽度、高度以及背景颜色，.navbar{ width:100%; height:60px; background-color:skyblue;}
4、去掉无序列表的黑色圆点，将列表<li>的di衡痕贤伎splay属性设置为inline，规定<li>列表项的左右内边距为20px，上下内边距为5px，左右外边距为10px。行高设置为navbar所在div的height高度。鼠标移动到<li>列表项时，设置背景颜色和边框弧度。如图所示：
5、保存文件，使用浏览器打开该文件，即可看到导航栏效果。如图所示：
6、完整代码如下：navbar.html文件代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>横向导航栏</title> <link href="navbar.css" rel="stylesheet" type="text/css"></head><body> <div class="navbar"> <ul class="navbar-list"> <li>首页</li> <li>菜单一</li> <li>菜单二</li> <li>菜单三</li> <li>菜单四</li> </ul> </div></body></html>navbar.css文件代码*{ margin:0; padding:0;}.navbar{ width:100%; height:60px; background-color:skyblue;}.navbar-list{ list-style-type:none; line-height:60px;}.navbar-list>li{ display:inline; padding:5px 20px; margin:0 10px; cursor:pointer;}.navbar-list>li:hover{ background-color:rgba(66,133,244,0.4); border-radius:4px;}
