最近总结

前一阵子，一直在积攒理论知识，感觉对大多数内容也算熟悉了，但是细致方面还不够清楚，光看是不够的！理论还是需要实战来进行检验。以前虽然也做过一些小的实例，但是从没做过一个完整的项目，所以便产生了在网上找些网站进行克隆，然后再到网上接些项目来对自己进行历练的想法。想了半天也没决定到底克隆哪个网站，索性直接照着天猫干了起来，做了之后才知道，自己的经验还是太少了，有很多棱模两可的问题，感觉问题也不大，问了别人别人多半也不会理，但是自己解决下来却很麻烦，半天解决不了，在网上找答案半天也找不到，很是苦恼。就最顶部的一个导航条，前前后后就大概花了一天的时间。下面是该导航条的图片：

当然不仅仅是做个这个样子，一些动态效果也和天猫上达到了基本一致；由于不是直接一整天做出来的，做之前也没进行好的规划，中间为了加个效果，可以说是改来改去，这加个元素，那儿加个class名等等；很是烦躁；

所以虽然只做了这么一小部分东西，但是体会很深刻(以前也看过一些代码规范之类的东西，现在感觉确实很重要)：

在做出一个样例或者效果前，需要先进行仔细的规划，先思考好，再进行代码的编写，会节约很多的时间，而不要做一个想一个；

给一个具有共同css、js效果的元素加上标签，可以减少很多代码量，减少很多重复的工作，也可以防止后面乱加乱改；

下面是该导航条的html、css、js代码：

喵，欢迎来天猫请登录免费注册
我的淘宝
已买到的宝贝
已卖出的宝贝
我关注的品牌
购物车
收藏夹
收藏的宝贝
收藏的店铺
手机版
淘宝网
企业购
商家支持
商家：
商家中心商家入驻运营服务商家品控商家工具商家规则天猫智库喵言喵语
帮助：
帮助中心
网站导航
热点推荐 Hot
天猫超市喵鲜生科技新品女装新品内衣新品试美装运动新品时尚先生精明妈咪吃乐会企业采购会员积分天猫国际
行业市场 Market
美妆电器女装男装女鞋男鞋内衣箱包运动母婴家装医疗食品配饰汽车
品牌风尚 Brand
尚天猫大牌街潮牌街天猫原创什么牌子好
服务指南 Hlep
帮助中心品质保障特色服务7天退换货

/*清除默认样式和设置公共样式*/body, div,iframe, ul, ol, dl, dt, dd, li, dl,   h1, h2, h3, h4, table,th, td, input, button, select,   textarea,p {margin:0;padding:0;}ol,ul,li{list-style: none;}/*将图像置于父元素的中部*/img{border:0;vertical-align: middle;}body{font: 12px/1.5 tahoma,arial,"\5b8b\4f53";}.clear{content:"";display: block;visibility:hidden;clear:both;}a{text-decoration:none;}/*清除默认样式结束和设置公共样式*//*字体图标设置*/@font-face {  font-family: 'iconfont1';  /* project id 288961 */  src: url('//at.alicdn.com/t/font_t1d90uycuhj8aor.eot');  src: url('//at.alicdn.com/t/font_t1d90uycuhj8aor.eot?#iefix') format('embedded-opentype'),  url('//at.alicdn.com/t/font_t1d90uycuhj8aor.woff') format('woff'),  url('//at.alicdn.com/t/font_t1d90uycuhj8aor.ttf') format('truetype'),  url('//at.alicdn.com/t/font_t1d90uycuhj8aor.svg#iconfont') format('svg');}.iconfont1{font-family:"iconfont1" !important;color:#C40000;    font-size:12px;    font-style:normal;    -webkit-font-smoothing: antialiased;    -webkit-text-stroke-width: 0.2px;    -moz-osx-font-smoothing: grayscale;}.ic{font-size:16px;position:relative;top:2px;left:2px;}.ic3{font-size: 16px;}.ic4{font-weight:bold;}.ic1{position:absolute;border-width: 3px;    border-style: solid;    border-color: #bbb transparent transparent;    top:15px;    right:4px;}/*字体图标设置结束*//*最顶部导航*/.nav_top{height:32px;background:#F2F2F2;line-height: 32px;position:relative;border-bottom:1px solid #e5e5e5;}.nav_top{color:#999;font-size:12px;font-family:"Microsoft YaHei",tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;}.nav_top a{display: inline-block;}.nav_top .nav_right_first p .a1{padding:0 10px 0 20px;}.nav_top .nav_right_first p .a2{padding:0 10px;}.nav_top .nav_right_first ul li{padding:0 10px;float:left;}.nav_top a{color:#999;}/*给.nav_right_first方便其进行相对于原来位置的布局*/.nav_right_first{height:32px;position:relative;width:1230px;left:-15px;margin:0 22px;}.nav_right_two{position:absolute;top:0;right:0;}/*图标大小等属性设置*/.icon-weibiaoti1{color:#C40000;font-size:12px;position:relative;}.icon-gouwucheman{color:#C40000;font-size:12px;}.nav_top .nav_right_first .h-red:hover{color:#C40000;}.nav_top .nav_right_first .nav_right_two li:first-child .tog{position:absolute;top:32px;display: none;padding:8px 10px;border:1px solid rgb(238,238,238);border-top:none;width:74px;height:auto;}.nav_top .nav_right_first .nav_right_two .first_tog2 .tog{position:absolute;top:32px;display: none;padding:8px 10px;border:1px solid rgb(238,238,238);border-top:none;width:74px;height:auto;}.nav_top .nav_right_first .nav_right_two .first_tog3 .tog{position:absolute;top:32px;right:8px;display: none;padding:8px 10px;border:1px solid rgb(238,238,238);border-top:none;width:122px;height:auto;}.nav_top .nav_right_first .nav_right_two .first_tog4 .tog{position:absolute;top:32px;display: none;padding:8px 10px;border:1px solid rgb(238,238,238);border-top:none;width:1141px;height:auto;top:32px;right:0px;}.hidden{width:72px;height:4px;position:absolute;top:30px;background:#fff;display: none;}.nav_top .nav_right_first .nav_right_two .first_tog2 .hidden{width:60px;height:4px;position:absolute;top:30px;background:#fff;display: none;}.nav_top .nav_right_first .nav_right_two .first_tog3 .hidden{width:74px;height:4px;position:absolute;top:30px;background:#fff;display: none;}.nav_top .nav_right_first .nav_right_two .first_tog4 .hidden{width:88px;height:4px;position:absolute;top:30px;background:#fff;display: none;}.nav_top .nav_right_first .nav_right_two .first_tog1 a{padding:0 14px 0 10px;}.nav_top .nav_right_first .nav_right_two li:first-child a:hover{background:#fff;border-bottom:none;text-decoration: underline;color:#C40000;}.nav_top .nav_right_first .nav_right_two li:nth-child(4) a{padding:0 14px 0 10px;}.nav_top .nav_right_first .nav_right_two li:nth-child(4) a:hover{background:#fff;border-bottom:none;text-decoration: underline;color:#C40000;}.nav_top .nav_right_first .nav_right_two li:nth-child(9) a{padding:0 14px 0 10px;}.nav_top .nav_right_first .nav_right_two li:nth-child(9) a:hover{background:#fff;border-bottom:none;text-decoration: underline;color:#C40000;}.nav_top .nav_right_first .nav_right_two li:nth-child(8) a:first-child{padding:0 14px 0 10px;}.nav_top .nav_right_first .nav_right_two li:nth-child(8) a:hover{background:#fff;border-bottom:none;text-decoration: underline;color:#C40000;}.nav_top .nav_right_first .nav_right_two .first_tog3 .tog ul{width:122px;font-size: 12px;font-family: "Microsoft YaHei",tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;line-height:22px;color:#666;text-align:left;/*因为这个时候li没有设置width或者width为auto时会增加宽度，使下边框线增长*/overflow: hidden;}.nav_top .nav_right_first .nav_right_two .first_tog3 .tog ul{margin-top:-5px;}.nav_top .nav_right_first .nav_right_two .first_tog3 .tog ul li a{margin-right:20px;display: inline-block;height:22px;}.nav_top .nav_right_first .nav_right_two .first_tog3 .tog ul li{float: none;    padding: 5px 0;    height: auto;    display: block;    line-height: 1.4;    border-bottom: 1px dotted #827777;    border-bottom-width: 1px;    border-bottom-style: dotted;    border-bottom-color: rgb(130, 119, 119);    margin-right: -20px;}.nav_top .nav_right_first .nav_right_two .first_tog4 .tog a{width:65px;padding:0 15px;text-align:left;}.nav_top .nav_right_first .nav_right_two .first_tog4 .tog{padding:25px 0 55px;}.nav_top .nav_right_first .nav_right_two .first_tog4 .tog div{height:175px;display: inline-block;vertical-align: top;}.nav_top .nav_right_first .nav_right_two .first_tog4 .tog div.or{width:285px;}.nav_top .nav_right_first .nav_right_two .first_tog4 .tog div.bl{width:380px;}.nav_top .nav_right_first .nav_right_two .first_tog4 .tog div.black{width:285px;}.nav_top .nav_right_first .nav_right_two .first_tog4 .tog div.com{width:180px;}.nav_top .nav_right_first .nav_right_two .first_tog4 .tog div.or a:hover{color:#f56a00;}.nav_top .nav_right_first .nav_right_two .first_tog4 .tog div.bl a:hover{color:#2263d4;}.nav_top .nav_right_first .nav_right_two .first_tog4 .tog div.black a:hover{color:#000;}.nav_top .nav_right_first .nav_right_two .first_tog4 .tog div.com a:hover{color:#666;}.nav_top .nav_right_first .nav_right_two .first_tog4 .tog div h2{margin-left:16px;}.nav_top .nav_right_first .nav_right_two .first_tog4 .tog div.or h2{color:#f56a00;}.nav_top .nav_right_first .nav_right_two .first_tog4 .tog div.bl h2{color:#2263d4;}.nav_top .nav_right_first .nav_right_two .first_tog4 .tog div.black h2{color:#000;}.nav_top .nav_right_first .nav_right_two .first_tog4 .tog div.com h2{color:#666;}.nav_top .nav_right_first .nav_right_two .first_tog4 .tog div h2{font-size:16px;font-family: '\5FAE\8F6F\96C5\9ED1',arial,"\5b8b\4f53";}.nav_top .nav_right_first .nav_right_two .first_tog4 .tog div a{font-size:12px;font-family: "Microsoft YaHei",tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;}.first_tog4 .tag .or a{display: inline-block;}.or,.bl,.black,.com {font-size: 0;-webkit-text-size-adjust:none;}.or a {font-size: 12px;}.bl a {font-size: 12px;}.black a {font-size: 12px;}.com a {font-size: 12px;}/*最顶部导航结束*/

$(document).ready(function() {/*nav-top中的鼠标移入移出事件*//**当鼠标移入时，要使影藏的div显示出来，并且更改小三角形的方向，通过css()函数来更改样式 * 当鼠标移出时，要使显示的div影藏，并且更改小三角形的方向，通过css()函数来更改样式 * 由于nav-top中‘我的淘宝’，‘收藏夹’，‘商家支持’，‘网站导航’都具有这个特征，所以应该设置适当的相同class属性，以减少重复操作 * 编写中发现需要将mouseenter/mouseleave事件绑定给li元素，而不是a元素 * */$(".nav_right_two li.first_tog1").mouseenter(function() {$(".nav_right_two li.first_tog1 .tog").show();$(".nav_right_two li.first_tog1 .hidden").show();$(".nav_right_two li.first_tog1 a").css({"color":"#c40000","background":"#fff"});$(".nav_right_two li.first_tog1 a .ic1").css({"border-color":"transparent transparent #bbb","top":"12px","right":"4px"});});$(".nav_right_two li.first_tog1").mouseleave(function(){$(".nav_right_two li.first_tog1 .tog").hide();$(".nav_right_two li.first_tog1 .hidden").hide();$(".nav_right_two li.first_tog1 a").css({"color":"#999","background":"rgb(242, 242, 242)"});$(".nav_right_two li.first_tog1 a .ic1").css({"border-color":"#bbb transparent transparent","top":"15px","right":"4px"});});$(".nav_right_two li.first_tog2").mouseenter(function() {$(".nav_right_two li.first_tog2 .tog").show();$(".nav_right_two li.first_tog2 .hidden").show();$(".nav_right_two li.first_tog2 a").css({"color":"#c40000","background":"#fff"});$(".nav_right_two li.first_tog2 a .ic1").css({"border-color":"transparent transparent #bbb","top":"12px","right":"4px"});});$(".nav_right_two li.first_tog2").mouseleave(function(){$(".nav_right_two li.first_tog2 .tog").hide();$(".nav_right_two li.first_tog2 .hidden").hide();$(".nav_right_two li.first_tog2 a").css({"color":"#999","background":"rgb(242, 242, 242)"});$(".nav_right_two li.first_tog2 a .ic1").css({"border-color":"#bbb transparent transparent","top":"15px","right":"4px"});});$(".nav_right_two li.first_tog3").mouseenter(function() {$(".nav_right_two li.first_tog3 .tog").show();$(".nav_right_two li.first_tog3 .hidden").show();$(".nav_right_two li.first_tog3 .first").css({"color":"#c40000","background":"#fff"});$(".nav_right_two li.first_tog3 a .ic1").css({"border-color":"transparent transparent #bbb","top":"12px","right":"4px"});});$(".nav_right_two li.first_tog3").mouseleave(function(){$(".nav_right_two li.first_tog3 .tog").hide();$(".nav_right_two li.first_tog3 .hidden").hide();$(".nav_right_two li.first_tog3 .first").css({"color":"#999","background":"rgb(242, 242, 242)"});$(".nav_right_two li.first_tog3 a .ic1").css({"border-color":"#bbb transparent transparent","top":"15px","right":"4px"});});$(".nav_right_two li.first_tog4").mouseenter(function() {$(".nav_right_two li.first_tog4 .tog").show();$(".nav_right_two li.first_tog4 .hidden").show();$(".nav_right_two li.first_tog4 .fouth").css({"color":"#c40000","background":"#fff"});$(".nav_right_two li.first_tog4 i").css({"background":"#fff"});$(".nav_right_two li.first_tog4").css({"background":"#fff"});$(".nav_right_two li.first_tog4 a .ic1").css({"border-color":"transparent transparent #bbb","top":"12px","right":"4px"});});$(".nav_right_two li.first_tog4").mouseleave(function(){$(".nav_right_two li.first_tog4 .tog").hide();$(".nav_right_two li.first_tog4 .hidden").hide();$(".nav_right_two li.first_tog4 .fouth").css({"color":"#999","background":"rgb(242, 242, 242)"});$(".nav_right_two li.first_tog4 i").css({"background":"rgb(242, 242, 242)"});$(".nav_right_two li.first_tog4").css({"background":"rgb(242, 242, 242)"});$(".nav_right_two li.first_tog4 a .ic1").css({"border-color":"#bbb transparent transparent","top":"15px","right":"4px"});});/*nav-top中的鼠标移入移出事件*/});

从这么小的一个东西，我可以写出这么多的代码就可以看出我是多么的菜了！但是我会努力的！！！