伸缩导航案例 

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 500px;
            height: 300px;
            border: 1px solid red;
            margin: 100px auto;
        }
        div>ul{
            list-style: none;
            width: 100%;
            display: flex;
        }
        div>ul>li{
            height: 36px;
            background-color: #64e7ff;
            border-right: 1px solid #ccc;
            flex: 1;
            line-height: 36px;
            text-align: center;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>首页</li>
        <li>商品介绍</li>
        <li>企业新闻</li>
        <li>联系我们</li>
    </ul>
</div>
posted @ 2019-01-06 22:27  lujieting0  阅读(108)  评论(0)  编辑  收藏  举报