仿tmall导航,HTML+DIV布局;

 

index页面:

<!doctype html>
<
html>
<
head>
<
meta charset="UTF-8">
<
title>仿天猫知名导航</title>
<
link rel="stylesheet" href="css/tmall.css"/>
</
head>
<
body>
<!--
容器-->
<div class="wrap"
>
<!--header-->
<div class="header">
<
div class="logo"><a href="javascript:;"><img src="images/logo.png" alt="logo"/></a></div>
<
div class="search">
<
form method="get" action="http://s8.taobao.com/search?" target="_blank">
<
input type="text" class="input" name="q" autocomplete="off" maxlength="100"/>
<!--autocomplete="off"不记录用户输入的信息;maxlength="100"最大长度是100个;http://blog.sina.com.cn/s/blog_b49f96a701019m0d.html-->
<!--
淘宝客的name="q" 控制搜索的
key-->
<button type="submit" class="button">搜 索</button>
<!--buttonsubmit来实现;http://luoxiaobo2011-163-com.iteye.com/blog/1331974-->
<input type="hidden" name="pid" value="mm_30445416_4886013_15224912"/>
<!--type="hidden"对用户隐藏的,但是里面的valyue是淘宝客推广主的标识符-->
<!--mm_30445416_4886013_15224912-->
</form>
</
div>
</
div>
<!--半通栏的边框-->
<div class="borderBottom"></div>
<!--content-->
<div class="content">
<
div style="height: 50px;"></div>
<
div>
<
div class="list"><a href="nvzhuang.html">女装</a></div>
<
ul class="name">
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
</
ul>
<
div class="clear br"></div>
</
div>
<
div>
<
div class="list"><a href="nvzhuang.html">男装</a></div>
<
ul class="name">
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
</
ul>
<
div class="clear br"></div>
</
div>
<
div>
<
div class="list"><a href="nvzhuang.html">女鞋</a></div>
<
ul class="name">
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
</
ul>
<
div class="clear br"></div>
</
div>
<
div>
<
div class="list"><a href="nvzhuang.html">男鞋</a></div>
<
ul class="name">
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
</
ul>
<
div class="clear br"></div>
</
div>
<
div>
<
div class="list"><a href="nvzhuang.html">内衣</a></div>
<
ul class="name">
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
</
ul>
<
div class="clear br"></div>
</
div>
<
div>
<
div class="list"><a href="nvzhuang.html">化妆品</a></div>
<
ul class="name">
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
</
ul>
<
div class="clear br"></div>
</
div>
<
div>
<
div class="list"><a href="nvzhuang.html">女包</a></div>
<
ul class="name">
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
</
ul>
<
div class="clear br"></div>
</
div>
<
div>
<
div class="list"><a href="nvzhuang.html">男包</a></div>
<
ul class="name">
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
</
ul>
<
div class="clear br"></div>
</
div>
<
div>
<
div class="list"><a href="nvzhuang.html">箱包</a></div>
<
ul class="name">
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
</
ul>
<
div class="clear br"></div>
</
div>
<
div>
<
div class="list"><a href="nvzhuang.html">童装</a></div>
<
ul class="name">
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
</
ul>
<
div class="clear br"></div>
</
div>
<
div>
<
div class="list"><a href="nvzhuang.html">童鞋</a></div>
<
ul class="name">
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
</
ul>
<
div class="clear br"></div>
</
div>
<
div>
<
div class="list"><a href="nvzhuang.html">玩具</a></div>
<
ul class="name">
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
</
ul>
<
div class="clear br"></div>
</
div>
<
div>
<
div class="list"><a href="nvzhuang.html">手机</a></div>
<
ul class="name">
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
</
ul>
<
div class="clear br"></div>
</
div>
<
div>
<
div class="list"><a href="nvzhuang.html">家电</a></div>
<
ul class="name">
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
</
ul>
<
div class="clear br"></div>
</
div>
<
div>
<
div class="list"><a href="nvzhuang.html">家装</a></div>
<
ul class="name">
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
</
ul>
<
div class="clear br"></div>
</
div>
<
div>
<
div class="list"><a href="nvzhuang.html">食品</a></div>
<
ul class="name">
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
</
ul>
<
div class="clear br"></div>
</
div>
<
div>
<
div class="list"><a href="nvzhuang.html">珠宝</a></div>
<
ul class="name">
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
</
ul>
<
div class="clear br"></div>
</
div>
<
div>
<
div class="list"><a href="nvzhuang.html">汽车</a></div>
<
ul class="name">
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
</
ul>
<
div class="clear br"></div>
</
div>
<
div>
<
div class="list"><a href="nvzhuang.html">医药</a></div>
<
ul class="name">
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
</
ul>
<
div class="clear br"></div>
</
div>
<
div>
<
div class="list"><a href="nvzhuang.html">图书</a></div>
<
ul class="name">
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
<
li><a href="javascript:;">店铺名字</a></li>
</
ul>
<
div style="height: 80px;"></div>
</
div>
</
div>

<!--分享到-->
<div class="shar" id="share" >
<
ul class="sharList">
<
li>朱安邦朱安邦</li>
<
li>朱安邦朱安邦</li>
<
li>朱安邦朱安邦</li>
<
li>朱安邦朱安邦</li>
<
li>朱安邦朱安邦</li>
<
li>朱安邦朱安邦</li>
</
ul>
<
div class="sharHead" id="sharHead"><a href="javascript:;">分享到</a></div>
</
div>
<!--返回顶部-->
<div class="toTop" id="toTop">返回顶部</div>
</
div>
<!--
结尾处-->
<div class="footer">
天猫知名导航;<a href="#">详细代码和原理点这里</a></div>
<
div class="clear br"></div>
</
body>
<
script src="js/tmall.js"></script>
</
html>

 

~CSS代码;

如果需要让搜索框去掉焦点边框,可以在input的伪类上设置样式为空即可;具体代码如下;

.input:focus{outline: none;}
body{padding: 0;margin: 0;font-size: 18px;font-family: arial, 宋体, san-serif;background:#EEE9E3;}
img{border
: 0;}
button,input,ul,li{margin
: 0;padding: 0;list-style: none;}
a
:link{text-decoration: none;color: #000;}
.
clear{clear: both;}
.
br{height: 30px; }

/*wrap*/
.wrap{width
: 998px;background: #FFF;margin: 10px auto 0;padding: 10px;}
/*header*/
.header{width
: 960px;height: 60px;margin: 0 10px;padding-top: 10px;}
.
header h2{font-family: 微软雅黑;font-weight: bold;color: #C40000;position: absolute;width: 240px;height: 60px;line-height: 20px;font-size: 30px;}
.
logo{width: 240px;height: 60px;display: inline;}
/*inline
默认。此元素会被显示为内联元素,元素前后没有换行符。如果不加这个,后面的float就会在第二行了,不会与logo在一行*/
.search{width
: 600px;height: 40px;float: right;margin-top: 20px;}
.
borderBottom{border-bottom: 4px solid #C40000;width: 998px;height: 20px;}
/*footer*/
.footer{margin
: 0 auto;width: 998px;height: 20px;line-height: 40px;text-align: center;font-size: 12px;}
.
input{width: 450px;height: 29px;border: 2px solid #C40000;padding-left: 10px;margin-right: -8px;}
.
button{width: 78px;height: 33px;padding: 0 10px;background: #C40000;color:#FFF; border: none;cursor:pointer}
/*content*/
.list{width
:80px;height:30px;background:black;line-height: 30px;text-align: center;float: left;margin-right: 8px;}
.
list a{color: #ffffff;font-size: 14px;font-weight: bold;width: 100%;height: 100%;display: inline-block;}
/*a套在别的里面,一定要用width: 100%;height: 100%;display: inline-block;.z这样可以充满整个布局的*/
.name{width
: 900px;height: 30px;border-bottom: 1px solid #C0C0C0;float: left;}
.
name li{float: left;width: 150px;height: 30px;text-align: center;line-height: 30px;}
.
name li a{display: inline-block;width: 100%;height: 100%;}
.
name li a:hover{background: #E23F3F;}
/*
分享到*/
.shar{position
: absolute;left:-150px;top:300px;height: 250px;width: 180px;}
.
sharHead{width: 30px;height: 100px;border: 1px solid #CCC;position:absolute;left: 150px;background: orange;top:75px;}
.
sharHead a{width: 100%;height: 100%;margin-top:14px;display: block;}
.
sharList{width: 130px;height: 250px;background: #C40000;position:absolute;padding: 10px;}
.
sharList li{color: #ffffff;}
/*
返回顶部按钮*/
.toTop{ display
: block; position: fixed; right: 5px; bottom: 10px; padding: 2px; width: 36px; height: 36px; text-align: center; font-size: 13px; border-radius: 5px; background: #FFF38F; cursor: pointer;font-family:微软雅黑;}
/*
女装*/
.nameNvZhuang{width
: 100%;padding: 50px 0; }
.
nameNvZhuang li{float: left;width: 16.5%;text-align: center;margin-bottom: 20px;}
.
nameNvZhuang li a{display: inline-block;width: 90%;height: 00%;font-family: Arail;padding: 5%;}
.
nameNvZhuang li a:hover{background: #E23F3F;}
.
goHome{text-align: center;font-family: 微软雅黑;font-weight: bold;color: #C40000;display: block;margin-bottom: 20px;}

~

JS代码

var share = document.getElementById("share");
share.
onmouseover = function(){
startrun(this,0)
};
share.
onmouseout = function(){
startrun(this,-150)
};
/*
下面是分享按钮的展开和隐藏;是用鼠标移近和移除控制的*/
var timer = null
;
var speed = 0
;
function startrun(obj,target
){
clearInterval(timer);
timer = setInterval(function(){

if(obj.offsetLeft<target){
speed = 10;
}
else{
speed = -10;
}
if(obj.offsetLeft == target){
clearInterval(timer);
}
else{
obj.style.left = obj.offsetLeft + speed + "px";
}
},
30)
}
/*
下面是分享按钮的永远居中显示*/
window.onscroll=function () {//
一直居中显示;
var share = document.getElementById("share");
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
startMove(Math.ceil((document.documentElement.clientHeight - share.offsetHeight)/2) + scrollTop);
};
var timer2=null
;
function startMove(iTarget
) {
var share=document.getElementById('share');
clearInterval(timer2);
timer2=setInterval(function (){
var speed=(iTarget-share.offsetTop)/4;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(share.offsetTop==iTarget) {//==这样可以进行向上和向下的移动
clearInterval(timer2);
}
else {
share.style.top=share.offsetTop+speed+'px';
}
},
30);
}
/*
下面是返回顶部的按钮*/
var oToTop=document.getElementById("toTop"
);
oToTop.
onclick=toTop;
function toTop
() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var _this = this;
clearInterval(_this.timer);/*没有定义新的timer,而是在本身添加了timer属性;节省性能;*/
_this.timer=setInterval(function () {
if (scrollTop - 200 <= 0) {
document.body.scrollTop=0;
clearInterval(_this.timer);
}
else{
scrollTop -= 200;
document.body.scrollTop=document.documentElement.scrollTop = scrollTop;
}
},
30);
}
/*
没有做代码优化;只是实现了效果;可以通过把分享到和返回顶部合并到一起,组成starMove的方法;然后统一用这个来管理*/

 

 

~

~~~~~~~~~