怎么用代码做出导航栏

img

<style>
    *{
              padding: 0;
            margin: 0;
        }
        ul{
            width: 500px;
            display: flex;
            align-items: center;
            list-style: none;
            background: #c1faff;
        }
        ul li{
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }
<style>

<body>
    <ul>
                <li>网站首页</li>
                <li>网站首页</li>
                <li>网站首页</li>
                <li>网站首页</li>
            </ul>
</body>

就一个大的div有个背景图片，然后一个div一个ul浮动一下

百度菜鸟教程或者bootstrap有很多教程的。

这个是导航条布局的知识，建议是可以用flex布局来做。
我之前有篇文章，有导航布局的做法介绍。