今天完成了导航和轮播
导航和轮播
轮播用的是BootStrap框架完成的，具体含义现在还不知道，百度也没度出来，等以后有时间了在研究吧。 data-[]属性不是BootStrap首创的，这是Html5新特性，是给用户自己定义的属性。data-ride="carousel"这句代码的意思是表示轮播在页面加载时就动画播放。
了解了line-height是行高的意思，跟元素一样高就可以实现垂直居中了。图片的大小一开始我就想错了，让他宽度和屏幕一大就行了。但这样图片两侧还要放其他链接，显然是不行了。用的是相对定位，里面放绝对定位。
再把绝对定位宽度设为100%，高度和图片高度一样。距离顶部的距离和导航栏高度一样。设置
z-index: -1 这样就在文档流也就是图片下面了，不会遮挡图片。图片高德和轮播div高度一样
设高度时加上**!important优先级高的意思，因为我是先设的轮播高度，在html里面是顺序读取的，图片高度就可能执行不到，设了就行了。
29日 13:33更新
分类和推荐产品
这个是要和是要和上面的导航轮播结合，覆盖在上面的。要使用绝对定位，不然覆盖不上去。
因为我上面使用的有绝对定位，所以要自己在设相对定位，再把绝对定位覆盖进去。不然就是基于整个窗口进行定位。
还要把就对定位设为1.因为这样才能让这个页面在导航轮播上。这里主要是使用定位，才能发挥作用。整体就是div套div.
30日15:20更新 产品列表
产品列表
分类列表里面产品很多，就先写两个分类各写五个产品。
点击图片变亮用的是opacity:(0-1)透明度来实现的，括号里可填0-1的数值1是完全透明。
每个分类前面的绿色小树条，在html里用的是div表示，文本内容为空。在设置css时，怎么都设置不对，小树条总是在分类的上面，不能和分类对齐。让我很头疼啊，苦恼了很久。后看了站长代码后，加上display: inline-block正常。
思索一下，明了。这句代码的意思是改成内联元素，即不换行并且可以设置大小。这不正好和分来在一行了嘛。vertical-align:top和顶点垂直对齐的意思，这样小树条就向上长了，如果改成bottomj就向下长了。
5.31日 11:25更新轮播分类结合一起
先说下导航栏上面的猫耳朵
猫耳朵
昨晚没更新，我还以为一天没更新了呢。以后不能偷懒，学会就立马来更新。温故而知新嘛。
昨晚一点多本想吃掉一半的西瓜，结果吃了一半的一半肚子就撑的不行了，看来不能太贪心啊。不过，西瓜吃的真爽，今晚继续。哈哈哈哈哈啊哈哈哈哈哈！
这是2016出的教程，当时的天猫点击导航栏上面有猫耳朵出现，离开就没了。我刚看了下天猫官网，好像去掉了猫耳朵。为什么去掉，猫猫那么可爱，你竟然抛弃他，没天理啊。额，这都说了些啥，谈正事吧！
要实现猫耳朵的出现与隐藏需要用到jquery,实现交互。猫耳朵出现的地方有天猫超市，天猫国际，平板电视，电热水器。这四个地方。这些都是用span包裹的。实现原理就是使用鼠标进入与离开span，来显示和隐藏猫耳朵。
先计算出span的左边和上面的位置，用函数position(),这个函数会返回元素的左边和上面位置，在用的$(this).css("width")获取当前元素的宽度，在用左边位置加上宽度位置的一半，这样就会在当前元素居中了。不过我没有居中，而是在右边边缘，在减13px就居中了。可能我哪没设置对吧，jquery中代码如下。
<script>
$(function(){
$("div.div2-2 span").mouseenter(function(){
var left = $(this).position().left;
var top = $(this).position().top;
var width = $(this).css("width");
var leftWidth = parseInt(left) + parseInt(width) / 2;
// $("img#coden").css({"left": "leftWidth" , "top": "top-20"});
$("img#coden").css("left" , leftWidth - 13);
$("img#coden").css("top" , top -20);
$("img#coden").fadeIn(500);
});
$("div.div2-2 span").mouseleave(function(){
$("img#coden").hide();
});
});
</script>
鼠标悬停商品分类显示对应的详细列表
鼠标悬停商品分类显示对应详细列表
首页有很多的商品分类，每个商品分类又有很多的详细列表。详细列表必须是隐藏的，因为要显示图片，不隐藏就看不到图片。那这就是交互，和猫耳朵一样，也是用jquery来解决的。
再设计分类和列表是都自定义了一个属性cid，每个分类cid对应列表cid。需要设计两个函数，一个显示列表，一个隐藏列表函数。在用鼠标进入，离开分类和鼠标进入，离开列表分别调用显示，隐藏函数。调用函数时会传入当前元素的cid值，函数再根据cid值设计对应分类的背景色，链接颜色。
设置颜色和css鼠标悬停颜色一样，在显示列表。隐藏函数也一样，不过设置颜色时，设置为css设置的普通颜色一样。用hide()方法隐藏。一定要写鼠标进入，离开列表。不写的话当你离开分类时，列表也隐藏了。列表要紧接分类，这样才更好。
交互代码如下：
<script>
function showee(cid){
$("div.eachCategory[cid = "+cid+"]").css("background-color" , "white" );
$("div.eachCategory[cid = "+cid+"]a").css("color" , "#87CEFA");
$("div.productsAsideCategorys[cid = "+cid+"]").show();
}
function hideee(cid){
$("div.eachCategory[cid = "+cid+"]").css("background-color" , "#E8E8E8");
$("div.eachCategory[cid = "+cid+"]a").css("color" , "#000000");
$("div.productsAsideCategorys[cid = "+cid+"]").hide();
}
$(function(){
$("div.eachCategory").mouseenter(function(){
var cid = $(this).attr("cid");
showee(cid);
});
$("div.eachCategory").mouseleave(function(){
var cid = $(this).attr("cid");
hideee(cid);
});
$("div.productsAsideCategorys").mouseenter(function(){
var cid = $(this).attr("cid");
showee(cid);
});
$("div.productsAsideCategorys").mouseleave(function(){
var cid = $(this).attr("cid");
hideee(cid);
});
});
</script>
把轮播和分类放一起
轮播分类放一起
按理说，这个也没什么难的，久吧分类代码复制到轮播下就行了。可这花费我不少时间，主要问题是在分类里，设置了两个相对定位，导致画面不协调。分类在轮播下面，不能在他表面。
删除这两个相对定位，并把分类z-index设置比他们大就行了，增加这两个相对定位就注定不能和上面的定位在一起。
网友评论