今天早上開始首頁內容。首頁除了公共頁面，還有許多自己的內容：導航和輪播、分類菜單、推薦產品展示，最后還有js的互動。
一、導航和輪播的學習
在自己做圖片的輪播時，還是沒有一次成功。存在了好幾處問題：
| 問題1：在最外層的div中id沒有寫對，data-ride沒有寫對 | 最外層div中的id應該只寫成carousel-of-product，自己多加了一個carousel | 還有把data-ride寫反了，寫成了ride-data | |
| 問題2：在ol層中的li中，data-target沒有寫對 | 在class="carousel-indicators"的ol層，里面的li一個屬性data-target，我寫成了target-data，也是把屬性記錯 | ||
| 問題3：在class="carousel-inner"的第二層div中，少寫了role屬性 | <div class="carousel-inner">中少寫了role="listbox"屬性 | ||
| 問題4：在<div class="item">層中少寫了一個屬性值 | <img src="xxx" class="carouselImage">中，class屬性少寫了值carousel，img應該這樣寫：<img src="xxx" class="carousel carouselImage /> |
修改好以后，純Html效果如下（雖然說是純html，但是已經用到了bootstrap框架）
自己嘗試着加上CSS樣式：
二、分類菜單的學習
純html頁面：
嘗試自己加CSS樣式：
光看樣式覺得還可以，但是這個右邊的詳細分類其實是應該要隱藏的，how2j站長為了顯示效果才這樣設計的，后面還要再加上功能。這個分類菜單分左右兩部分，兩邊都是采用絕對定位的形式，而且z-index應該要設計為1，分類菜單才可以覆蓋輪播。
三、推薦產品展示
上一次就是學到這里，心情開始煩躁起來，這次要好好學習！：）
自己寫的簡單html，效果如下：
嘗試自己加上CSS，效果如下：
現在覺得學習的時候，不要想太多，不然會覺得壓力很大，很難學的感覺，這樣容易產生放棄的想法，簡單一點就好：）
cursor鼠標樣式，cursor: pointer就是鼠標樣式是手指頭的
四、JS交互內容
首頁的互動效果主要是貓耳朵的出現，以及在輪播部分顯示和隱藏產品列表。貓耳朵是指在導航欄上鼠標懸停在某個鏈接上，上面會出現一個紅色的貓耳朵；顯示和隱藏產品列表是指在分類菜單中選擇某個分類時會彈出更加詳細的分類。老實說，我不會這個。我先看看站長怎么做的。
1.站長先設置貓耳朵圖片的display屬性為none，將貓耳朵隱藏
2.然后通過一段<script>代碼，把程序添加：
$(function(){
$("div.rightMenu span").mouseenter(function(){ /*當鼠標進入span，mouseenter不區分子元素，就是就算進入了span的子元素，也算是在span里面，不管子元素這個說法*/
var left = $(this).position().left; /*獲取當前元素的x坐標*/
var top = $(this).position().top; /*獲取當前元素的y坐標*/
var width = $(this).css("width"); /*獲取當前元素的寬度*/
var destLeft = parseInt(left) + parseInt(width)/2; /*定義貓耳朵的x坐標*/
$("img#catear").css("left",destLeft); /*通過$()獲取元素后，再通過css()直接設置樣式*/
$("img#catear").css("top",top-20);
$("img#catear").fadeIn(500); /*延時500毫秒，淡入*/
});
$("div.rightMenu span").mouseleave(function(){ /*當鼠標離開span元素，隱藏貓耳朵*/
$("img#catear").hide();
});
});
顯示和隱藏產品列表的JS代碼，也是使用JQuery庫，用起來比原生JavaScript代碼簡潔很多：
1 <script> //直接插入<script>中，簡單有效 2 function showProductsAsideCategorys(cid){ 3 $("div.eachCategory[cid="+cid+"]").css("background-color","white"); //$()獲取對應cid的eachCategory的div元素，$()里面的選擇器很巧妙，是三個字符串拼接的："xxx" + cid + "xxx" 4 $("div.eachCategory[cid="+cid+"] a").css("color","#87CEFA"); //$()獲取對應cid的粗分類，設置背景顏色和字體顏色 5 $("div.productsAsideCategorys[cid="+cid+"]").show(); //$()獲取對應cid的詳細分類，並顯示出來 6 } 7 8 function hideProductsAsideCategorys(cid){ //隱藏函數，讓粗分類的背景顏色和字體顏色還原，並隱藏詳細分類類容。真的是太巧妙了，站長厲害！ 9 $("div.eachCategory[cid="+cid+"]").css("background-color","#e2e2e3"); 10 $("div.eachCategory[cid="+cid+"] a").css("color","#000"); 11 $("div.productsAsideCategorys[cid="+cid+"]").hide(); 12 } 13 14 $(function(){ //文檔對象模型加載完畢后再執行這些內容，簡潔有力 15 $("div.eachCategory").mouseenter(function(){ //當鼠標進入任意一個產品分類上 16 var cid = $(this).attr("cid"); //獲取這個產品分類的自定義屬性cid，即分類主鍵 17 showProductsAsideCategorys(cid); //根據cid，顯示不同的詳細分類內容 18 }); 19 $("div.eachCategory").mouseleave(function(){ 20 var cid = $(this).attr("cid"); 21 hideProductsAsideCategorys(cid); 22 }); 23 $("div.productsAsideCategorys").mouseenter(function(){ 24 var cid = $(this).attr("cid"); 25 showProductsAsideCategorys(cid); 26 }); 27 $("div.productsAsideCategorys").mouseleave(function(){ 28 var cid = $(this).attr("cid"); 29 hideProductsAsideCategorys(cid); 30 }); 31 }); 32 </script>