京东头部导航

最新推荐文章于 2022-02-19 22:14:08 发布

路飞小朋友

最新推荐文章于 2022-02-19 22:14:08 发布

阅读量308

点赞数

分类专栏：布局练习

本文链接：https://blog.csdn.net/wozhangyi/article/details/106944145

版权

布局练习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>

<style type="text/css">
    body{
        font: 12px/1.5 '微软雅黑';
        color: #999;
        height: 2000px;
    }
    .top-bar-wrapper{
        height: 30px;
        line-height: 30px;
        background: #E3E4E5;
        border: solid 1px #DDDDDD;
        border-top: 0;
    }
    .top-tar{
        width: 1190px;
        height: 30px;
        margin: 0 auto;
    }
    .top-tar a{
        text-decoration: none;
        color: #999;
    }
    .top-tar a:hover, .top-tar .highlight{
        color: #FF0000;
    }

    /*左侧导航*/
    .location{
        float: left;
        height: 30px;
    }
    .location i{
        color: #F10215;
        font-size: 16px;
    }
    .location .current{
        height: 30px;
        padding: 0 7px;
        border: solid 1px transparent;
        border-bottom: 0;
        position: relative;
        z-index: 2;
    }
    /*鼠标悬停一定要给父元素*/
    .location:hover .current{
        border-color: #CCCCCC;
        background: #FFFFFF;
    }
    .location:hover .city-list{
        display: block;
    }
    .location .city-list{
        position: absolute;
        top: 30px;
        width: 320px;
        height: 460px;
        background: #FFFFFF;
        border: solid 1px #CCCCCC;
        display: none;
    }
    /*右侧导航*/
    .shortcut{
        float: right;
    }
    .shortcut li{
        float: left;
    }
    /*设置内边距*/
    .shortcut li{
        padding: 0 7px;
    }
    /*设置分割线*/
    .shortcut .line{
        width: 1px;
        height: 10px;
        background: #999;
        margin: 10px 5px 0 5px;
        padding: 0;
    }
    /*设置字体图标*/
    .fa-angle-down{
        font-size: 10px;
    }

</style>

<body>
<!--创建外围容器-->
<div class="top-bar-wrapper">
    <!--创建内部容器-->
    <div class="top-tar">
        <!--左侧菜单-->
        <div class="location">
            <div class="current">
                <i class="fa fa-map-marker"></i>
                <a href="javascript:;">北京</a>
            </div>
            <!--下拉城市列表-->
            <div class="city-list">

            </div>
        </div>
        <!--右侧菜单-->
        <ul class="shortcut">
            <li>
                <a href="">你好，请登录</a>
                <a class="highlight" href="">免费注册</a>
            </li>
            <li class="line"></li>
            <li><a href="">我的订单</a></li>
            <li class="line"></li>
            <li>
                <a href="">我的京东</a>
                <i class="fa fa-angle-down"></i>
            </li>
            <li class="line"></li>
            <li>
                <a href="">京东会员</a>
                <i></i>
            </li>
            <li class="line"></li>
            <li>
                <a class="highlight" href="">企业采购</a>
                <i class="fa fa-angle-down"></i>
            </li>
            <li class="line"></li>
            <li>
                <span>客户服务</span>
                <i class="fa fa-angle-down"></i>
            </li>
            <li class="line"></li>
            <li>
                <span>网站导航</span>
                <i class="fa fa-angle-down"></i>
            </li>
            <li class="line"></li>
            <li><span>手机京东</span></li>
        </ul>

    </div>
</div>
</body>

</html>