京东小三角做法

最新推荐文章于 2022-03-31 15:10:01 发布

安暖相陪

最新推荐文章于 2022-03-31 15:10:01 发布

阅读量363

点赞数

本文链接：https://blog.csdn.net/qq_37608036/article/details/62312905

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <style>         /*顶部导航*/
.shortcut {
    height: 30px;
    line-height: 30px;
    background-color: #E3E4E5;
    border-break: 1px solid #DDDDDD;
}

.shortcut .fl {
    margin-left: 210px;
}

.shortcut .fl i {
    color: #F10215;
    font-size: 14px;
}

.shortcut .fl span {
    font-size: 12px;
    font-family: "宋体";
    color: #999999;
}
/*右侧列表*/
.shortcut .fr{
    margin-right: 10px;
}
.shortcut .fr li{
    float: left;
    padding:0 10px;
}
.shortcut .fr .line{
    width: 1px;
    height: 10px;
    background-color: #CCCCCC;
    margin-top: 10px;
    padding:0;
}
.shortcut .fr li i{
    font-size: 10px;
    margin-left: 3px;
}
.shortcut .fr .phone-jd{
    position: relative;
}
.shortcut .fr .phone-jd:after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-bottom: 5px solid #FFF;
    border-top: 5px solid transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    position: absolute;
    left: 15px;
    top: 21px;
}
.shortcut .fr .phone-jd .phone-erweima{
    width: 66px;
    height: 66px;
    border: 1px solid #CFCFCF;
    position: absolute;
    left: -8px;
    top: 30px;
    background:url("../images/mobile_qrcode.jpg") no-repeat center;
}
</style>

</head>
<body>

<div class="shortcut">
    <div class="w">
        <ul class="fl">
            <li>
                <div>
                    <i class="iconfont">&#xe68e;</i>
                    <span>北京</span>
                </div>
                <div class="dv-dd"></div>
                <!--鼠标显示每个城市信息-->
            </li>
        </ul>
        <ul class="fr">
            <li>
                <a href="#">您好,请登录</a>&nbsp;&nbsp;<a class="col-red" href="#">免费注册</a>
            </li>
            <li class="line"></li>
            <li><a href="#">我的订单</a></li>
            <li class="line"></li>
            <li><a href="#">我的京东</a><i class="iconfont">&#xe65e;</i></li>
            <li class="line"></li>
            <li><a href="#">京东会员</a></li>
            <li class="line"></li>
            <li><a href="#">企业采购</a></li>
            <li class="line"></li>
            <li>
                <div>客户服务<i class="iconfont">&#xe65e;</i></div>
            </li>
            <li class="line"></li>
            <li>
                <div>网站导航<i class="iconfont">&#xe65e;</i></div>
            </li>
            <li class="line"></li>
            <li>
                <div class="phone-jd">
                    手机京东
                    <div class="phone-erweima"></div>
                </div>
            </li>

        </ul>
    </div>
</div>

</body>
</html>

安暖相陪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
京东小三角做法

html>html>head lang="en"> meta charset="UTF-8"> title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！title> style> /*顶部导航*/.shortcut { height: 30px; line-height: 30px; background-colo
复制链接

扫一扫