1、首先，创建一个html页面，并且添加一个无序列表<ul>作为导航栏内容显示位置。如图所示：
3、设置导航栏所在的div容器样式，指定宽度、高度以及背景颜色，.navbar{ width:100%; height:60px; background-color:skyblue;}
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;}
