html：制作简易京东导航栏

最新推荐文章于 2024-04-10 17:14:17 发布
Astar stars
最新推荐文章于 2024-04-10 17:14:17 发布
阅读量3.5k
点赞数 4
分类专栏： html作品分享文章标签： html css 前端
本文链接：https://blog.csdn.net/astar2022/article/details/125547447
版权
html作品分享专栏收录该内容
14 篇文章 3 订阅
订阅专栏
一天的努力，不过还是有不尽如人意的地方，
代码如下：
<!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>
    <link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        /* 消除默认格式 */
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        /* 大盒子 */
        #body {
            height: 30px;
            background-color: #E3E4E5;
        }

        #wrap {
            width: 1600px;
            height: 30px;
            /* background-color: #E3E4E5; */
            font-size: 12px;
            /* white-space: nowrap; 
            overflow: hidden; */
            color: #999999;
            margin: 0 auto;
        }

        #box {
            /* width: 70%; */
            height: 30px;
            /* background-color: #E33333; */

        }

        /*左侧图标部分设置 */
        .d1 {
            /* background-color: black; */
            line-height: 30px;
            height: 30px;
            float: left;

        }

        .s1 {
            color: #F10215;
            font-size: 16px;
            padding: 0 5px;
        }

        /* 导航主体部分设置 */


        .d2>ul {
            padding-left: 400px;
            width: 1200px;
            height: 30px;
            /* background-color: purple; */
            /* float: left; */
        }

        .d2 li {
            line-height: 30px;
            float: left;
            width: 80px;
            /* background-color: red; */
            text-align: center;
        }

        .p1 {
            float: left;
            line-height: 30px;
        }

        /* 超链接设置 */
        a {
            color: #999999;
        }

        a:hover {
            color: #E33333;
        }

        /* 特殊字体样式 */
        .a1 {
            color: #FF0000;
        }

        /* 第一个下拉框 */
        .d1>ul {
            display: none;
            width: 260px;
            /* height: 60px; */
            border: 2px solid #CCCCCC;
            overflow: hidden;
            position: relative;
            bottom: 2px;
            right: 2px;
            text-align: center;
        }

        .d1>ul>li {
            float: left;
            background-color: #fff;

        }

        /* 转化为块元素 */
        .d1:hover>ul {
            display: block;
        }

        /* 鼠标移入安徽 */
        .d1:hover {
            color: red;
            background-color: #fff;
            width: 60px;
            border: 2px solid #CCCCCC;
        }


        .d1>ul>li>a {
            margin: 5px 5px 5px 3px;
            padding: 0 10px;
            color: #999;
            display: block;
        }

        /* 下拉框安徽设置 */
        .d1>ul>li>a:hover {
            background-color: #F4F4F4;
            color: #E55151;
        }

        .d1>ul>li>.anhui {
            display: block;
            background-color: red;
            color: white;
        }

        .d1>ul>li>.anhui:hover {
            background-color: red;
            color: white;
        }

        /* 第二个下拉框 */
        .l1>ul {
            width: 180px;
            /* height: 100px; */
            border: 2px solid #cccccc;
            display: none;
            overflow: hidden;
            position: relative;
            bottom: 2px;
            right: 2px;
            /* position: absolute; */
        }

        .l1>ul>li {
            float: left;
            background-color: #fff;
        }

        .l1:hover {
            background-color: #fff;
            width: 76px;
            height: 28px;
            border: 2px solid #CCCCCC;
        }

        /* 转化为块元素 */
        .l1:hover>ul {
            display: block;
        }

        .l1>ul>li>a {
            margin: 5px 5px 5px 3px;
            padding: 0 5px;
        }

        /* .l1>ul>li>a:hover {
            background-color: #F4F4F4;
            color: #E55151;
        } */
        /* 第三块下拉框 */
        .l2>ul {
            width: 180px;
            /* height: 100px; */
            border: 2px solid #cccccc;
            display: none;
            overflow: hidden;
            position: relative;
            bottom: 2px;
            right: 2px;
            /* position: absolute; */
        }

        .l2>ul>li {
            float: left;
            background-color: #fff;
        }

        .l2:hover {
            background-color: #fff;
            width: 76px;
            height: 28px;
            border: 2px solid #CCCCCC;
        }

        /* 转化为块元素 */
        .l2:hover>ul {
            display: block;
        }

        .l2>ul>li>a {
            margin: 5px 5px 5px 3px;
            padding: 0 5px;
        }
    </style>
</head>

<body>
    <div id="body">
        <div id="wrap">
            <div class="d1"><i class="fa fa-map-marker s1" aria-hidden="true"></i>&nbsp;<a href="">安徽</a>
                 <!-- 下拉框 -->
                <ul>
                    <li><a href="">北京</a></li>
                    <li><a href="">上海</a></li>
                    <li><a href="">天津</a></li>
                    <li><a href="">重庆</a></li>
                    <li><a href="">山西</a></li>
                    <li><a href="">河南</a></li>
                    <li><a href="">辽宁</a></li>
                    <li><a href="">吉林</a></li>
                    <li><a href="">内蒙</a></li>
                    <li><a href="">江苏</a></li>
                    <li><a href="">山东</a></li>
                    <li><a href="">福建</a></li>
                    <li><a href="">湖北</a></li>
                    <li><a href="">湖南</a></li>
                    <li><a href="" class="anhui">安徽</a></li>
                    <li><a href="">广东</a></li>
                    <li><a href="">江西</a></li>
                    <li><a href="">四川</a></li>
                    <li><a href="">海南</a></li>
                    <li><a href="">贵州</a></li>
                </ul>
            </div>
            <div class="d2">
                <ul>
                    <li><a href="">你好,请登录</a></li>
                    <li><a href="" class="a1">免费注册</a></li>
                    <p class="p1">|</p>
                    <li><a href="">我的订单</a></li>
                    <p class="p1">|</p>
                    <li class="l1"><a href="">我的京东</a>&nbsp;<i class="fa fa-angle-down s2" aria-hidden="true"></i>
                        <!-- 下拉框 -->
                        <ul>
                            <li><a href="">待处理订单</a></li>
                            <li><a href="">我的问答</a></li>
                            <li><a href="">返修退货单</a></li>
                        </ul>
                    </li>
                    <p class="p1">|</p>
                    <li><a href="">京东会员</a></li>
                    <p class="p1">|</p>
                    <li class="l2"><a href="" class="a1">企业采购</a>&nbsp;<i class="fa fa-angle-down s2"
                            aria-hidden="true"></i>
                        <!-- 下拉框 -->
                        <ul>
                            <li><a href="">企业购</a></li>
                            <li><a href="">公共频道</a></li>
                            <li><a href="">工业品</a></li>
                        </ul>
                    </li>
                    <p class="p1">|</p>
                    <li><span>客户服务</span>&nbsp;<i class="fa fa-angle-down s2" aria-hidden="true"></i></li>
                    <p class="p1">|</p>
                    <li><span>网站导航</span>&nbsp;<i class="fa fa-angle-down s2" aria-hidden="true"></i></li>
                    <p class="p1">|</p>
                    <li><span>手机京东</span></li>
                    <p class="p1">|</p>
                    <li><a href="">网站无障碍</a></li>
                </ul>
            </div>

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

</html>