其他分享
首页 > 其他分享> > 京东顶部导航条

京东顶部导航条

作者：互联网

这个导航条的布局就很有意思：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .location{
            float:left;
        }

        .shortcut{
            float:right;
        }

        .shortcut li{
            float:left;
        }
    </style>
</head>
<body>
    <div class="top-bar-wrapper">
        <div class="top-bar">
            <div class="location"></div>                
            <ul class="shortcut">
               <li></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li> 
            </ul>
        </div>
    </div>
</body>
</html>

 

标签：right,顶部,float,shortcut,li,导航条,京东,left
来源： https://www.cnblogs.com/sherryyuan/p/16456899.html