600字范文 > HTML+CSS淘宝页眉导航栏以及Logo搜索框的实现

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

时间：2022-07-18 18:44:45

很久没记录了，现在对淘宝所有部整体实现（虽然还有部分的还没有实现，

我就是偷懒来保存下，可怜的小傻猫，要是崩了，我还又底从新开始，存

在的问题后期慢慢改）小傻猫日常呆

实现的效果如下：

所有的一二级菜单都实现了，但依旧有问题，就是一级导航的小图标有两个的我添加的时候出现了问题，后面东西都写的差不多，我再来看看

还有我的搜索框的实现借用了哪位博友的，太久了，我也忘了（这个不是我的）

（郁闷的傻猫o(=•ェ•=)m）

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

HTML

001_index.html

<!DOCTYPE html><html lang="ch"><head><meta charset="UTF-8"><link rel="stylesheet" href="/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> <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><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> <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><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> <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><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="/releases/v5.8.2/css/all.css" rel="stylesheet"> <link rel="stylesheet" href="/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"><div class="all_logo_1"><a href="#"><img src="../img/1.jpg" ></a></div><div class="all_logo_2"><div class="all_logo_2_1"> <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"><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-/051322403566.jpg)

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:/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='/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+=">";//// //遍历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 = "/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 = "/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 = "/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='/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 += ">";//遍历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 = "/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 = "/search?q="+oTxt.value;}

jquery-1.8.3.min.js

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

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

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。