HTML+CSS淘宝页眉导航栏以及Logo搜索框的实现

最新推荐文章于 2022-11-01 23:29:54 发布

Tina_dl

最新推荐文章于 2022-11-01 23:29:54 发布

阅读量1.8w

点赞数 21

分类专栏：淘宝页眉及搜索框二级导航栏 HTML+CSS 文章标签：淘宝页眉导航及搜索框

本文链接：https://blog.csdn.net/Tina_dl/article/details/90183160

版权

二级导航栏同时被 3 个专栏收录

2 篇文章 1 订阅

订阅专栏

HTML+CSS

2 篇文章 0 订阅

订阅专栏

淘宝页眉及搜索框

1 篇文章 1 订阅

订阅专栏

很久没记录了，现在对淘宝所有部整体实现（虽然还有部分的还没有实现，
我就是偷懒来保存下，可怜的小傻猫，要是崩了，我还又底从新开始，存
在的问题后期慢慢改）小傻猫日常呆

实现的效果如下：
所有的一二级菜单都实现了，但依旧有问题，就是一级导航的小图标有两个的我添加的时候出现了问题，后面东西都写的差不多，我再来看看
还有我的搜索框的实现借用了哪位博友的，太久了，我也忘了（这个不是我的）
（郁闷的傻猫o(=•ェ•=)m）




–	–

在这里插入图片描述

为啥不能传文件夹，o(=•ェ•=)m，好吧

HTML

001_index.html

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet">  <!--引入放大镜连接-->
    <link rel="stylesheet" href="../CSS/all_style.css" >     <!--所有的样式-->
    <script src="../JS/jquery-1.8.3.min.js"></script>        <!--激活jq的引入文件-->
    <script src="../JS/serach.js"></script>
    <link rel="stylesheet" href="../CSS/swiper-4.5.0/dist/css/swiper.min.css">
    <title>淘宝网站默认主页</title>
</head>
<body>
     <div id="all_header"></div>     <!--所有的页眉-->
     <div id="all_logo"></div>       <!--所有的图标-->
     <div id="all_nav"></div>        <!--所有的导航标签-->
     <div id="focus"></div>          <!--轮播图-->
     <div id="index_content"></div>  <!--默认主页内容-->
     <div id="all_footer"></div>     <!--所有的页脚-->
     <!--jq激活-->
     <script>
         $("#all_header").load('header.html');
         $("#all_logo").load('logo.html');
         $("#all_nav").load('nav.html');
         $("#focus").load('focus.html');
         $("#index_content").load('index_content.html');
         $("#all_footer").load('footer.html');
     </script>
</body>
</html>

002_list.html

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <script src="../JS/jquery-1.8.3.min.js"></script>        <!--激活jq的引入-->
    <title>Title</title>
</head>
<body>
      <div id="all_header"></div>     <!--所有的页眉-->
      <div id="all_logo"></div>       <!--所有的图标-->
      <div id="all_nav"></div>        <!--所有的导航标签-->
      <div id="list_content"></div>  <!--默认主页内容-->
      <div id="all_footer"></div>     <!--所有的页脚-->
      <!--jq激活-->
      <script>
         $("#all_header").load('header.html');
         $("#all_logo").load('logo.html');
         $("#all_nav").load('nav.html');
         $("#list_content").load('list_content.html');
         $("#all_footer").load('footer.html');
      </script>
</body>
</html>

003_content.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../JS/jquery-1.8.3.min.js"></script>        <!--激活jq的引入-->
    <title>Title</title>
</head>
<body>
     <div id="all_header"></div>     <!--所有的页眉-->
     <div id="all_logo"></div>       <!--所有的图标-->
     <div id="all_nav"></div>        <!--所有的导航标签-->
     <div id="content_content"></div>  <!--默认主页内容-->
     <div id="all_footer"></div>     <!--所有的页脚-->
     <!--jq激活-->
     <script>
        $("#all_header").load('header.html');
        $("#all_logo").load('logo.html');
        $("#all_nav").load('nav.html');
        $("#content_content").load('content_content.html');
        $("#all_footer").load('footer.html');
     </script>
</body>
</html>

header.html

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../CSS/all_style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet">  <!--向下的小箭头的引入-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous"><!--购物车小图标的引入-->
    <title>淘宝1页眉</title>
</head>
<body>
    <div class="all_header">
        <!--第一部分导航-->
        <nav class="header_1">
            <ul style="z-index: 9999; position: relative">
                <li><a href="#" style="text-indent:-15px">中国大陆<i class="fas fa-angle-down" style="float: left;margin-left: 67px; margin-top:-22px;"></i></a>
                    <ul style="width: auto; height: 250px; overflow: scroll">
                        <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>
                    </ul>
                </li>
                <li><a href="#"style="color: coral">亲，请登录</a></li>
            </ul>
        </nav>
        <!--第二部分导航-->
        <div class="header_2">
            <ul class="header_2_1">
                <li class="header_2_1_1">
                    <a href="#">我的淘宝<i class="fas fa-angle-down"></i></a>
                    <ul  style="z-index: 9999; position: relative">
                        <li><a href="#">已买到的宝贝</a></li>
                        <li><a href="#">我的足迹</a></li>
                    </ul>
                </li>
                <li class="header_2_1_2">
                    <a href="#" >购物车<i class="fas fa-angle-down"></i></a>
                </li>
                <li class="header_2_1_3">
                    <a href="#" >收藏夹<i class="fas fa-angle-down"></i></a>
                    <ul  style="z-index: 9999; position: relative">
                        <li><a href="#">收藏的宝贝</a></li>
                        <li><a href="#">收藏的店铺</a></li>
                    </ul>
                </li>
                <li class="header_2_1_4">
                    <a href="#">商品分类</a>
                </li>
                <li class="header_2_1_5">
                    <a href="#">|</a>
                </li>
                <li class="header_2_1_6">
                    <a href="#">千牛卖家中心<i class="fas fa-angle-down"></i></a>
                    <ul  style="z-index: 9999; position: relative">
                        <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>
                    </ul>
                </li>
                <li class="header_2_1_7">
                    <a href="#">联系客服<i class="fas fa-angle-down"></i></a>
                    <ul  style="z-index: 9999; position: relative">
                        <li><a href="#">消费者客服</a></li>
                        <li><a href="#">卖家客服</a></li>
                    </ul>
                </li>

                <li class="header_2_1_8">
                    <a href="#">网站导航<i class="fas fa-angle-down"></i></a>
                    <ul style="z-index: 9999; position: relative">
                        <div class="dh">
                            <div class="sc_1">
                                <li class="zt" >主题市场</li>
                                <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>
                                </ul>
                                <li class="zt_1" >
                                    <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>
                                    </ul>
                                </li>
                                <li class="zt_2" >
                                    <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>
                                    </ul>
                                </li>
                                <li class="zt_3" >
                                    <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>
                                    </ul>
                                </li>
                            </div>
                            <div class="sc_2">
                                <li class="zt_4">特色市场
                                    <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>
                                    </ul>
                                </li>
                                <li class="zt_5">
                                    <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>
                                    </ul>
                                </li>
                                <li class="zt_6">
                                    <ul>
                                        <li><a href="#">全球购</a></li>
                                        <li><a href="#">星店</a></li>
                                        <li><a href="#">淘宝众筹</a></li>
                                        <li><a href="#">咸鱼</a></li>
                                        <li><a href="#">Outlets</a></li>
                                        <li><a href="#">淘抢购</a></li>
                                        <li><a href="#">试用</a></li>
                                    </ul>
                                </li>
                            </div>
                            <div class="sc_3">
                                <li class="zt_7">阿里APP
                                    <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>
                                    </ul>
                                </li>
                                <li class="zt_8">
                                    <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>
                                    </ul>
                                </li>
                                <li class="zt_9">
                                    <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>
                                    </ul>
                                </li>
                            </div>
                            <div class="sc_4">
                                <li class="zt_10">精彩推荐类
                                    <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>
                                    </ul>
                                </li>
                                <li class="zt_11">
                                    <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>
                                    </ul>
                                </li>
                            </div>
                        </div>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

nav.html

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../CSS/all_style.css">
    <title>nav导航标签--logo这一行</title>
</head>
<body>


<div class="all_logo">
    <!--logo图片-->
    <div class="all_logo_1">
        <a href="#"><img  src="../img/1.jpg" ></a>
    </div>
    <!--logo右侧的搜索栏等-->
    <div class="all_logo_2">
        <div class="all_logo_2_1">  <!--搜索框上面的三个小button-->
            <div class="all_logo_2_1_1">
                <div class="all_logo_2_1_1_1">
                    <a href="#"><button type="button">宝贝</button></a>
                </div>
                <div class="all_logo_2_1_1_2">
                    <a href="#"><button type="button">天猫</button></a>
                    <a href="#"><button type="button">店铺</button></a>
                </div>

            </div>
        </div>

        <div class="all_logo_2_2">      <!--js搜索框的实现-->
            <div id="wrap">
                <div style="overflow: hidden;">
                    <i class="fas fa-search"></i>  <!--引入放大镜-->
                    <input type="text" id="text" value="仙女裙" />
                    <input type="button" name="btn" id="btn" value="搜索"/>
                </div>
                <ul id="list"></ul>
            </div>
        </div>
        <div class="all_logo_2_3">
            <div class="all_logo_2_3_1">
                <a href="#" style="color: orangered">新款连衣裙</a>
                <a href="#">四件套</a>
                <a href="#" style="color:orangered;">潮流T恤</a>
                <a href="#">时尚女鞋</a>
                <a href="#">短裤</a>
                <a href="#"  style="color:orangered;">半身裙</a>
                <a href="#">男士外套</a>
                <a href="#">墙纸</a>
                <a href="#">行车记录仪</a>
                <a href="#">新款男鞋</a>
                <a href="#">耳机</a>
                <a href="#">时尚女包</a>
                <a href="#">沙发</a>
            </div>
        </div>
    </div>

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

CSS
all_style.css

*{
    margin: 0;
    padding: 0;
}
body{
 background-color: #f7f7f7;
}
/*页眉*/
.all_header{
    float: left;
    width: 100%;
    height: 35px;
    background-color: #f7f7f7;
}
/*页眉导航整体容器*/
.header_1{
    float: left;
    margin-left:40px;
    float: left;
    width: 340px;
    height: 100%;

}
/*页眉导航显现的整体*/
.header_1 ul{
    float: left;
    width: 100%;
    height: 100%;
}
.header_1 ul li{  /*去掉以及菜单的点，横向浮动*/
    float: left;
    list-style:none;
}
/*页眉单个菜单的具体属性*/
.header_1 ul li a:link, .header_1 ul li a:visited{
    display: block;    /*以块元素呈现*/
    width:72px;
    height: 100%;
    text-align:center;
    text-decoration: none;
    line-height: 35px;
    font-size: 12px;
    background-color: #f7f7f7;
    color: #593b42;
}
.header_1 ul li a:hover,.header_1 ul li a:active{
    background-color:white ;
}
.header_1 ul li ul{
    display: none;   /* 隐藏二级菜单列表*/
    position: absolute;   /*二级菜单的位置固定*/
}
.header_1 ul li :hover ul{
    display: block;
    /*width: auto;     !*消除二级菜单的滚动条*!*/
}
/*导航下面的滚动条*/
.header_1 ul li ul li{
    float: none;     /*消除二级菜单的浮动*/
    margin-left: -5px;
    background-color: white;
    width: 72px;
}
/*页眉导航第二大块*/
.header_2{
    position: relative;
    margin-right: 16px;
    float: right;
    width: 610px;
    height: 100%;
}
.header_2 ul{
    margin: 0 auto;
    float: left;
    width: 100%;
    height:100%;
}
.header_2 ul li{
    float: left;
    list-style:none;
}
.header_2 ul li a:link, .header_2 ul li a:visited{
    display: block;
    width: 77px;
    height: 100%;
    text-align: center;
    line-height: 35px;
    text-decoration: none;
    font-size: 12px;
    color: #593b42;
}
.header_2 ul li a:hover,.header_2 ul li a:active{
    background-color: white;
}
.header_2 ul li ul{
    display: none;
    position: absolute;
}
.header_2 ul li:hover ul{
    display: block;
}

/*我的淘宝的小箭头的设置*/
.header_2_1_1 i{
    float: left;
    text-indent: 1px;
    margin-left: 67px;
    margin-top:-22px;
}
.header_2_1_2 i{
    float: left;
    text-indent: 1px;
    margin-left: 60px;
    margin-top:-22px;
}
.header_2_1_6 i{
    float: left;
    text-indent: 19px;
    margin-left: 67px;
    margin-top:-22px;
}

/*logo部分*/
.all_logo{
    float: left;
    margin-left: 40px;
    width: 1190px;
    height: 120px;
    /*background-color: #d3fff5;*/
    position: relative;
}
.all_logo_1{
    float: left;
    width: 190px;
    height: 100%;
    background-color: pink;
}
.all_logo_2{

    float: left;
    width: 1000px;
    height: 100%;
    background-color: hotpink;
}
.all_logo_1 img{
    width: 190px;
    height: 100%;
    position: relative;
}

.all_logo_2_1{
    height: 45px;
    width: 100%;
    background-color: white;
}

/*搜索框上的三个按钮的小框*/
.all_logo_2_1_1{
    float: left;
    margin-left: 100px;
    margin-top: 19px;
    height: 26px;
    width: 200px;
    background-color: white;
}

.all_logo_2_1_1_1 button{
    float: left;
    height:27px;
    width: 40px;
    background-color: coral;
    color: white;
    border: solid 1px coral;
    border-radius: 7px 7px 0 0;
    font-size: 11px;
}
.all_logo_2_1_1_2 button{
    float: left;
    height:27px;
    width: 40px;
    background-color: white;
    color:coral;
    border: solid 1px white;
    border-radius: 5px 5px 0 0;
    font-size: 11px;
}
.all_logo_2_1_1_2 a:hover .all_logo_2_1_1 a:active{
    background-color: white;
}

/*搜索框*/
.all_logo_2_2{
    float: left;
    height: 40px;
    width: 100%;
    background-color: white;
}
#wrap{
    width: 100%;
    height: 100%;
    margin: 0 70px;      /*搜索框的距上距左边的距离*/
    position: relative;
}
/*搜索框内的放大镜的设置*/
#wrap i{
    position: relative;
    left: -630px;
    top:10px;
    color: #cccccc;
}


/*搜索输入框*/
input{
    float: left;
    width: 520px;
    height: 38px;
    border: 1px solid #ff5330;
    outline: none;
    border-radius: 25px  0 0 25px;
    font-size: 11px;
    text-indent: 10px; /*设置搜索框内的字的位置*/
    padding: 0 20px;
}
input text{
    margin-left: 30px;
}
.a{
    color: darkmagenta;
    text-decoration: none;
}
#list{
    width: 480px;
    position: relative;
    left: 100px;
    border: 1px solid #CECECE;
    display: none;
}
#list >li{
    padding: 40px;
    boreder-botton:1px solid #CECECE;
    list-style:none;
    line-height: 40px;
    cursor:pointer;
}
#list>li:last-child{
    border-bottom: none;
}
.list>li:hover{
    background-color: chartreuse;
}
/*右侧的搜索按钮*/
#btn{
    float: left;
    height: 40px;
    width: 80px;
    background:#ff5330;
    color: white;
    border: none;
    text-align: center;
    border-radius: 0 25px 25px 0;
    cursor: pointer;
    outline: none;
    font-size: 20px;
}


.ul2{
    width: 250px;
    height:100%;
    position: absolute;
    right: 0;
    left: 0;
    background:#F6F9FC;
    box-sizing: border-box;
    padding-top: 20px;
    display: none;
}

#list>li:hover .ul2{
    display: block;
}

.ul2 .li2{
    margin:5px;
    float: left;
    list-style:none;
    border: 1px solid #CECECE;
}
 .ul2 .li2 a{
     display: block;
     line-height: 30px;
     width: 60px;
     height: 30px;
     text-align: center;
 }

 .ul2 .li2:hover a{
     color: white;
 }
 .hover{
     color:red;
 }

 /*第三行的文字超链接*/
.all_logo_2_3{
    float: left;
    width:100%;
    height: 35px;
    background-color: white;
}
.all_logo_2_3_1{
    height: 100%;
    width: 580px;
    margin-left: 70px;
}
.all_logo_2_3_1 a{
    color: black;   //字体初始颜色
}
.all_logo_2_3_1 a:hover,.all_logo_2_3_1 a:active{
    color:#ff5330;
}
.all_logo_2_3_1 a{
    float: left;
    font-size: 12px;
    margin-top: 8px;
    text-decoration: none;
    text-indent: 4px;
}

img

![在这里插入图片描述](https://img-blog.csdnimg.cn/2019051322403566.jpg)

Jq
serach.js

// let oText =document.getElementById("txt");
// let oList =document.getElementById("list");
// let oBtn =document.getElementById("btn");
// let srcll="";
//
// oText.oninput=()=>{
//     oList.style.display="block";
//     let val =oTxt.valueOf();
//     var oScript =document.createElement("script");
//     oScript.src="https:suggest.taobao.com/sug?code=utf-8&q="+val+"&callback=jsonp&area=c2c";
//     document.body.appendChild(oScript);
// }
//    function jsonp(data) {
//        data1 = data.reset;
//        data2 = data.magic;
//        let str = "";
//        for (let i = 0; i < data1.length; i++) {
//            str += "<li><a href='https://s.taobao.com/search?q=" + data1[i][0] + "'>" + data1[i][0] + "</a></li>";
//        }
//        oList.innerHTML=str;
//        console.log(str)
//        //data.magic   数组，爆款的个数（箭头）有几个，数组长度就是几个
//        //data.magic[j]  数组里是对象
//        //data.magic[j].index  对象里index属性，取得二级菜单的
//        //data.magic[j].data[m] 对象里data属性，是一个数组
//        //data.magic[j].data[m][k]  data里的  对象
//        //data.magic[j].data[m][k].title 名字
//        //data.magic[j].data[m][k].type  热卖
//        if(data2)
//        { /*
//            console.log(data2.length)
//            console.log(data2[0].index)  //1
//            console.log(data2[0].data)  //(2) [{....},{.....}]
//            console.log(data2[0].data[0][0].title)   //{title:"短款"}
//            console.log(data2.length)*/
//        }
//
//        //创建二级菜单ul
//        for(var j=0;j<data2.length;j++){
//            var oUl=document.createElement("ul");
//            oUl.className="ul2";
//            //把ul放入对饮的以及菜单li里，由于li没有，用oList.children
//            oList.children[data2[j].index-1.children[0].innerHTML+="&gt;";
//
//            //遍历data2[0].data
//            for(var m=0;m<data2[j].data.length;m++){
//                //遍历data2[0].data[m]中的每一个数据
//                for(var k=0;k<data2[j].data[m].length;k++){
//                    //创建二级菜单中的li
//                    let oLi = document.createElement("li");
//                    oLi.className = "li2";
//                    oUl.appendChild(oLi);
//                    //将li变为超链接，所以要创建a
//                    let oA = document.createElement("a");
//                    oLi.appendChild(oA);
//                    //选择路径，给到oA,使其能够跳转到相应的页面
//                    //console.log(data2[j].data[m][k].title)
//                    oA.href = "https://s.taobao.com/search?q="+data2[j].data[m][k].title;
//                    //将取到的数据显示在页面上，否则，页面上二级菜单的li里将会为空
//                    oA.innerHTML = data2[j].data[m][k].title;
//                    //给有type的添加类名，让字体变红， hover为任意的类名，不是划过
//                    if(data2[j].data[m][k].type){
//                        oA.className = "hover";
//                    }
//                }
//                oUl.innerHTML+="<br/><br/>"
//            }
//        }
//    }
// }
// oBtn.onclick = function(){
//         location.href = "https://s.taobao.com/search?q="+oTxt.value;
//     }
//


let oTxt = document.getElementById("txt");
let oList = document.getElementById("list");
let oBtn = document.getElementById("btn");
let src11 = "";

oTxt.oninput = ()=>{
    oList.style.display = "block";
    let val = oTxt.value;
    var oScript = document.createElement("script");
    //
    oScript.src = "https://suggest.taobao.com/sug?code=utf-8&q="+val+"&callback=jsonp&area=c2c";
    document.body.appendChild(oScript);
}

function jsonp(data){
    /*console.log(data)
                console.log(data.magic)*/
    data1 = data.result;
    data2 = data.magic;
    let str ="";
    for(let i = 0;i<data1.length;i++){
        str +="<li><a href='https://s.taobao.com/search?q="+data1[i][0]+"'>"+data1[i][0]+"</a></li>";
    }
    oList.innerHTML = str;
    console.log(str)
    //data.magic 数组,爆款的个数（箭头）有几个，数组长度就是多少
    //data.magic[j] 数组里是对象
    //data.magic[j].index 对象里的index属性，取得二级菜单
    //data.magic[j].data[m] 对象里的data属性，是一个数组
    //data.magic[j].data[m][k] data 里的    对象
    //data.magic[j].data[m][k].title 名字
    //data.magic[j].data[m][k].type 热卖

    if(data2){
        /*console.log(data2[0])//{index: "1", type: "tag_group", data: Array(3)}
                       console.log(data2.length)
                       console.log(data2[0].index)// 1
                       console.log(data2[0].data)  //[Array(2), Array(2), Array(6)]
                       console.log(data2[0].data[0])    //(2) [{…}, {…}]
                       console.log(data2[0].data[0][0].title) //{title: "短款"}
                       console.log(data2.length)*/

        //创建二级菜单的ul
        for(var j=0;j<data2.length;j++){
            var oUl = document.createElement("ul");
            oUl.className = "ul2";
            /*console.log([oList.children[data2[j].index-1]])*/

            //把ul放入对应的一级菜单li里，由于li没有，用oList.children
            oList.children[data2[j].index-1].appendChild(oUl);
            //在对应li中添加符号>
            //在有二级菜单的一级后面加个符号：为什么会是.children[0]是因为这个一级本身就有HTML内容节点，选中这个节点，以+=字符拼接上去；
            oList.children[data2[j].index-1].children[0].innerHTML += "&gt;";


            //遍历data2[0].data
            for(var m=0;m<data2[j].data.length;m++){
                //遍历data2[0].data[m]中的每一个数据
                for(var k=0;k<data2[j].data[m].length;k++){
                    //创建二级菜单中的li
                    let oLi = document.createElement("li");
                    oLi.className = "li2";
                    oUl.appendChild(oLi);
                    //将li变为超链接，所以要创建a
                    let oA = document.createElement("a");
                    oLi.appendChild(oA);
                    //选择路径，给到oA,使其能够跳转到相应的页面
                    //console.log(data2[j].data[m][k].title)
                    oA.href = "https://s.taobao.com/search?q="+data2[j].data[m][k].title;
                    //将取到的数据显示在页面上，否则，页面上二级菜单的li里将会为空
                    oA.innerHTML = data2[j].data[m][k].title;
                    //给有type的添加类名，让字体变红， hover为任意的类名，不是划过
                    if(data2[j].data[m][k].type){
                        oA.className = "hover";
                    }
                }
                oUl.innerHTML+="<br/><br/>"
            }
        }
    }
}
oBtn.onclick = function(){
    location.href = "https://s.taobao.com/search?q="+oTxt.value;
}

jquery-1.8.3.min.js

这个自己下载了，（其实小傻猫没有学会文件上传，待我有空百度，下次就会了，哈哈哈哈哈）

就这样了，小傻猫日常脑子不想转，我要写东西了，哈哈，下次见了o(=•ェ•=)m

Tina_dl

关注

21
点赞
踩
158

收藏

觉得还不错? 一键收藏
3
评论
HTML+CSS淘宝页眉导航栏以及Logo搜索框的实现

很久没记录了，现在对淘宝所有部整体实现（虽然还有部分的还没有实现，我就是偷懒来保存下，可怜的小傻猫，要是崩了，我还又底从新开始，存在的问题后期慢慢改）小傻猫日常呆实现的效果如下：所有的一二级菜单都实现了，但依旧有问题，就是一级导航的小图标有两个的我添加的时候出现了问题，后面东西都写的差不多，我再来看看还有我的搜索框的实现借用了哪位博友的，太久了，我也忘了（这个不是我的）（郁闷的傻猫...
复制链接

扫一扫