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

实现的效果如下：
所有的一二级菜单都实现了，但依旧有问题，就是一级导航的小图标有两个的我添加的时候出现了问题，后面东西都写的差不多，我再来看看
还有我的搜索框的实现借用了哪位博友的，太久了，我也忘了（这个不是我的）
（郁闷的傻猫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)// 1console.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)*///创建二级菜单的ulfor(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.childrenoList.children[data2[j].index-1].appendChild(oUl);//在对应li中添加符号>//在有二级菜单的一级后面加个符号：为什么会是.children[0]是因为这个一级本身就有HTML内容节点，选中这个节点，以+=字符拼接上去；oList.children[data2[j].index-1].children[0].innerHTML += "&gt;";//遍历data2[0].datafor(var m=0;m<data2[j].data.length;m++){//遍历data2[0].data[m]中的每一个数据for(var k=0;k<data2[j].data[m].length;k++){//创建二级菜单中的lilet oLi = document.createElement("li");oLi.className = "li2";oUl.appendChild(oLi);//将li变为超链接，所以要创建alet 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

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

  1. Android仿淘宝底部图标导航栏

     在上一篇中,简单的使用透明主题的Activity实现了仿微信右侧顶部的对话框,上午又花了两个小时研究了一下淘宝底部的导航栏实现,网上的做法也有很多,今天我就使用一种通过基本控件加上布局的方式,没有任 ...

  2. 仿淘宝左侧菜单导航栏纯Html + css 写的

    这俩天闲来没事淘宝逛了一圈看到淘宝的左侧导航菜单做的是真心的棒啊,一时兴起,查了点资料抓了几个图片仿淘宝写了个css,时间紧写的不太好,大神勿喷,给小白做个参考 废话不多说先来个效果图 接下来直接上代 ...

  3. 浅析我对Web（淘宝网）导航栏的深入理解

    首先刚拿到这个项目的实现我也一脸迷茫的,不知道数据库和jsp以及Controller之间的传递流程,下面我为大家浅析一下我对此类导航栏的理解吧. 首先:项目界面大概UI是这个样子的. 一级目录:化妆品 ...

  4. 模仿淘宝首页横向导航栏

    @TOC在这里插入代码片 <nav class="w"><div class="nav-scroll"><!-- 列表信息 --& ...

  5. 陈华：淘宝同学左侧导航栏div鼠标上浮边框变色无遮挡处理方法

    LESS源码: div{ width: 300px; height: 100px; border: 1px solid #CCC; margin:-1px; display: block; posit ...

  6. 淘宝首页左侧导航栏源代码

    需要源码的朋友请Q我:

  7. css导航滚动到顶部后保持不动,html-使用CSS滚动时，使导航栏保持顶部

    html-使用CSS滚动时,使导航栏保持顶部 我正在尝试使导航栏与页面一起移动,但是如果用户向下滚动,则导航栏会停留在顶部. 谁能提供任何示例或如何提供? 非常感激. (我用其他任何语言都没有希望). ...

  8. css+js实现自动伸缩导航栏

    用css+js实现自动伸缩导航栏 需要达到的效果: 默认首页选中样式 设置鼠标滑过效果:颜色变化(#f60),宽度变化,字体变化 所涉及的知识点: 布局:float css: 元素状态切换(displ ...

  9. 淘宝网顶部导航菜单效果

    演示:http://www.websjy.com/club/websjy_index/29/ 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  10. 仿淘宝网首页导航条效果

    < html > < head > < meta http - equiv = " Content-Type "  content = " ...

最新文章

  1. JavaEE XML的读写（利用JDom对XML文件进行读写）
  2. ASP.NET MVC 3 RTM
  3. C++中的friend详细解析
  4. 着墨中文lisp登入_Lisp的本质 - climbdream的个人空间 - OSCHINA - 中文开源技术交流社区...
  5. anaconda+cuda+cudnn+pytorch安装踩坑大全
  6. jQuery学习之七---CSS
  7. REST API之前端跨域访问
  8. 合格PHP工程师的知识结构
  9. SharpDevelop--一款很不错的.NET开发工具
  10. Atitit 如何在外包找到自己的技术深度
  11. 传智播客html视频教程(第六季) 杨中科
  12. python 华氏度转换摄氏度
  13. 开发一个App要100万？ 太扯淡
  14. 【转】App应用内搜索：移动搜索的新入口
  15. AntV使用方法详解
  16. 对字符串进行信道编码C语言,【单选题】PCM编码主要用于实现模拟信号数字化,它属于( ) A. 信道编码 B. 纠错编码 C. 信源编码 D. 压缩编码...
  17. QNX系统挂载CF卡
  18. ryu安装遇到的问题
  19. ecno是什么的缩写_号码的英文缩写是什么
  20. 将字符数组中存放的数字字符转换为数

热门文章

  1. 机器视觉——镜头介绍
  2. arduino步进电机程序库_Arduino步进电机控制示例
  3. LOGO特训营 第四节 字体设计的重要性
  4. python合并相同内容单元格_实例28_在Excel表格中将上下行相同内容的单元格自动合并...
  5. 怎么更改计算机用户开机密码,如何更改Windows开机密码?修改电脑开机密码教程...
  6. 如何免费将PDF旋转并保存成功？
  7. C语言输出菱形不是梦
  8. Java发送mail报错“java.util.ServiceConfigurationError: com.sun.mail.imap.IMAPProvider not a subtype”
  9. single-precision operand implicitly
  10. macd指标计算机应用,macd是怎么计算的