CSS/HTML制作京东商城顶部导航条

Etui۹(･༥･´)و ̑̑

已于 2023-04-08 18:05:33 修改

阅读量4.6k CSS3 HTML5 文章标签： css html css3

于 2021-01-24 17:14:30 首次发布

本文链接：https://blog.csdn.net/m0_47015897/article/details/113093546

CSS3 同时被 2 个专栏收录

38 篇文章 17 订阅

HTML5

37 篇文章 8 订阅

京东商城原网站：
在这里插入图片描述
效果图：

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东商城导航条</title>
    <link rel="stylesheet" href="../02CSS/reset.css">
    <link rel="stylesheet" href="./icon/定位icon/iconfont.css">
    <link rel="stylesheet" href="./icon/xia_shuxian/iconfont.css">
    <link rel="stylesheet" href="./icon/xia2/iconfont.css">
    <style>
        body{
            background-color: rgb(255, 240, 213);
        }

        /* 导航栏背景 */
        .back{
            height: 31px;
            background-color: #E3E4E5;
            margin: 20px;
            border-bottom: #DDDDDD 1px solid;
            position: relative;
        }

        /* 主要内容区 */
        .primary{
            width: 1190px;
            height: 30px;
            margin: 0px auto;
            /* background: white; */
            position: relative;
        }

        /* 定位图标 */
        .dw{
            width: 60px;
            height: 30px;
            position: relative;
            float: left;
        }
        .p1::before{    /* 引用定位的iconfont */
            content: '\e663';
            font-family: 'iconfont';
            font-size: 30px;
            color: #F10215;
            float: left;
        }

        /* 设置地理位置的文字格式 */
        .back .primary .dw a{

            height: 30px;
            line-height: 30px;
            font-size: 12px;
            color: #999999;
            text-decoration: none;
            
        }
        
        /* 鼠标移入定位区域时的操作 */
        .dw:hover{
            background-color: #FFFFFF;
            color: #E33333;
        }
        
        /* 右侧菜单栏 */
        .nav{
            width: 710px;
            height: 30px;
            /* background-color: white; */
            margin-left: 460px;
        }
        .nav li{
            float: left;
            margin-left: 6px;
            margin-right: -3px;
            /* margin: 0px 6px; */
        }
        .nav li a:hover{
            color: #F10215;
        }

        .nav a{
            display: inline-block;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            position: relative;
            padding-left: 3px;
            color: #999999;
            text-decoration: none;
            
        }

        /* 针对竖线的处理 */
        .sp1{
            height: 30px;
            margin-left: 4px;
            /* float: left; */
            font-size: 8px;
            color: #b1b1b1;
        }
        .sp2{
            font-weight: bold;
            color: #999999;
            margin-left: 3px;
            font-size: 1px;
        }
        .nav li a.bac:hover{
            background-color: white;
        }
    </style>
</head>
<body>
    <div class="back">
        <div class="primary">
            <div class="dw">
                <a href="" class="a"><p class="p1"></p>安徽</a>
            </div>

            <div class="nav">
                <ul>
                    <li>
                        <a href="">你好，请登录</a>
                    </li>
                    <li>
                        <a href="" style="color: #F10215;">免费注册</a><span class="sp1"></span>
                    </li>
                    <li>
                        <a href="">我的订单</a><span class="sp1 iconfont icon-vertical_line"></span>
                    </li>
                    <li>
                        <a href="" class="bac">我的京东<span class="sp2 iconfont icon-xiala"></span></a><span class="sp1 iconfont icon-vertical_line"></span>
                    </li>
                    <li>
                        <a href="">京东会员</a><span class="sp1 iconfont icon-vertical_line"></span>
                    </li>
                    <li>
                        <a href="" style="color: #F10215;" class="bac">企业采购<span class="sp2 iconfont icon-xiala"></span></a></span><span class="sp1 iconfont icon-vertical_line"></span>
                    </li>
                    <li>
                        <a href="" class="bac">客户服务<span class="sp2 iconfont icon-xiala"></span></a><span class="sp1 iconfont icon-vertical_line"></span>
                    </li>
                    <li>
                        <a href="" class="bac">网站导航<span class="sp2 iconfont icon-xiala"></span></a><span class="sp1 iconfont icon-vertical_line"></span>
                    </li>
                    <li>
                        <a href="">手机京东</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>