HTML+CSS淘宝 页眉导航栏以及Logo搜索框的实现
- 很久没记录了，现在对淘宝所有部整体实现（虽然还有部分的还没有实现，
我就是偷懒来保存下，可怜的小傻猫，要是崩了，我还又底从新开始，存
在的问题后期慢慢改）小傻猫日常呆
实现的效果如下：
所有的一二级菜单都实现了，但依旧有问题，就是一级导航的小图标有两个的我添加的时候出现了问题，后面东西都写的差不多，我再来看看
还有我的搜索框的实现借用了哪位博友的，太久了，我也忘了（这个不是我的）
（郁闷的傻猫o(=•ェ•=)m）
 |
|
|---|---|
| – | – |
为啥不能传文件夹，o(=•ェ•=)m，好吧
HTML
001_index.html
淘宝网站默认主页
002_list.html
Title
003_content.html
Title
header.html
淘宝1页眉
nav.html
nav导航标签--logo这一行
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
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 += "" + data1[i][0] + " ";
// }
// 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{
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[i][0]+"";
}
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
//在有二级菜单的一级后面加个符号：为什么会是.children[0]是因为这个一级本身就有HTML内容节点，选中这个节点，以+=字符拼接上去；
oList.children[data2[j].index-1].children[0].innerHTML += ">";
//遍历data2[0].data
for(var m=0;m jquery-1.8.3.min.js
这个自己下载了，（其实小傻猫没有学会文件上传，待我有空百度，下次就会了，哈哈哈哈哈）
就这样了，小傻猫日常脑子不想转，我要写东西了，哈哈，下次见了o(=•ェ•=)m