html网站导航样式

html:

<nav class="main">
    <div class="main2">
        <ul style="display: flex;list-style: none;margin:0 auto;">
            <li class="title">图标</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>
            <li><a href="">目的大全</a></li>
            <li><a href="">目的大全</a></li>
        </ul>
    </div>
</nav>

css

 @media (max-width:1200px) {
            body{
                min-width: 1270px;
            }
            .main{
                line-height: 80px;
                border-bottom: 4px solid #00A39B;
            }
            .main2{
                width: 1200px;
                margin: 0 auto;
            }
            .title{
                width: 200px;
                height: 65px;
                line-height: 83px;
                text-align: center;
                font-size: 18px;
            }
            .main2 ul a{
                display: inline-block;
                padding: 0 20px 0 20px;
                font-size: 18px;
                color:#333;
                text-decoration: none;
            }
            .main2 a:hover{
                color:#00A39B;
            }
            }