上一節：電商項目實戰第四節: CSS3+HTML5+JS 設計案例【考拉海購網站】之【輪播圖特效】
文章目錄
【考拉海購網站】之【商品欄及右側垂直導航】
商品欄及右側垂直導航 效果如圖所示 >>>
第一步，頁面佈局分佈情況分析
總共分爲3個部分 :
（1）頭號商品展示欄
（2）商品欄
（3）右側垂直導航欄 （這裏有個細節之處，右側垂直導航欄是錨定標籤）
第二步，根據頁面佈局寫相應的html標籤
這裏有個細節之處，就是4張頭條商品展示欄的a標籤，官網中是以一張很長的圖片做爲底面層，然後用超鏈接做的表面層，具體分析及寫法如下：
這裏我採用CSS3的flex屬性進行定義，這樣可以很快做到對4個a標籤的快速均勻部署
(頭號商品展示欄html代碼)
<!-- 商品展示欄部分 -->
<div class="goodsDisplay">
<!-- 頭號商品展示欄 -->
<div class="promise">
<div class="promiseText">
<p> <span>考拉承諾</span>
<span>|</span>
<span>正品保障</span>
</p>
<img src="./5bf7a8d8-ad7b-44db-9402-e5699b22dd4e_480_22.jpg" alt="">
<a href=""><span class="rightSpan">12項正品保障措施 ></span></a>
</div>
</div>
<div class="topTitleImg">
<img src="./8b9144b3-228a-4904-8239-7f821fab2df8T19010211539_1000_296.webp" alt="">
<div class="aHref">
<a href=""><img src="" alt=""></a>
<a href=""><img src="" alt=""></a>
<a href=""><img src="" alt=""></a>
<a href=""><img src="" alt=""></a></div>
</div>
<div class="shopTitle">★口碑爆款★</div>
</div>
(頭號商品展示欄html代碼)
關於如何寫出25個商品的 li
<div class="goodsList">
<ul>
<a href="">
<li>
<div class="goods">
<img src="./8bc945f76be44060bd915535bf38ca1b1559809050771jwke1abf10206.webp" alt="">
<span class="leftTop">熱銷</span>
<span class="leftBottom">新人專享</span>
<h3><a>
<p>【2件裝】Jmsolution 珍珠全身防水防曬隔離噴霧SPF50 180毫升</p>
</a></h3>
<p class="describe">無懼夏日暴曬的祕密武器</p>
<div class="value">
<span style="margin-left: 6px;">¥</span>
<span
style="font-size: 20px !important;font-weight:700;margin-left: -3px;">55</span>
<del>¥228</del>
<a href="">
立即購買</a>
</div>
</div>
</li>
<li>
<div class="goods">
<img src="./8bc945f76be44060bd915535bf38ca1b1559809050771jwke1abf10206.webp" alt="">
<span class="leftTop">熱銷</span>
<span class="leftBottom">新人專享</span>
<h3><a>
<p>【2件裝】Jmsolution 珍珠全身防水防曬隔離噴霧SPF50 180毫升</p>
</a></h3>
<p class="describe">無懼夏日暴曬的祕密武器</p>
<div class="value">
<span style="margin-left: 6px;">¥</span>
<span
style="font-size: 20px !important;font-weight:700;margin-left: -3px;">55</span>
<del>¥228</del>
<a href="">
立即購買</a>
</div>
</div>
</li>
<li>
<div class="goods">
<img src="./8bc945f76be44060bd915535bf38ca1b1559809050771jwke1abf10206.webp" alt="">
<span class="leftTop">熱銷</span>
<span class="leftBottom">新人專享</span>
<h3><a>
<p>【2件裝】Jmsolution 珍珠全身防水防曬隔離噴霧SPF50 180毫升</p>
</a></h3>
<p class="describe">無懼夏日暴曬的祕密武器</p>
<div class="value">
<span style="margin-left: 6px;">¥</span>
<span
style="font-size: 20px !important;font-weight:700;margin-left: -3px;">55</span>
<del>¥228</del>
<a href="">
立即購買</a>
</div>
</div>
</li>
<li>
<div class="goods">
<img src="./8bc945f76be44060bd915535bf38ca1b1559809050771jwke1abf10206.webp" alt="">
<span class="leftTop">熱銷</span>
<span class="leftBottom">新人專享</span>
<h3><a>
<p>【2件裝】Jmsolution 珍珠全身防水防曬隔離噴霧SPF50 180毫升</p>
</a></h3>
<p class="describe">無懼夏日暴曬的祕密武器</p>
<div class="value">
<span style="margin-left: 6px;">¥</span>
<span
style="font-size: 20px !important;font-weight:700;margin-left: -3px;">55</span>
<del>¥228</del>
<a href="">
立即購買</a>
</div>
</div>
</li>
<li>
<div class="goods">
<img src="./8bc945f76be44060bd915535bf38ca1b1559809050771jwke1abf10206.webp" alt="">
<span class="leftTop">熱銷</span>
<span class="leftBottom">新人專享</span>
<h3><a>
<p>【2件裝】Jmsolution 珍珠全身防水防曬隔離噴霧SPF50 180毫升</p>
</a></h3>
<p class="describe">無懼夏日暴曬的祕密武器</p>
<div class="value">
<span style="margin-left: 6px;">¥</span>
<span
style="font-size: 20px !important;font-weight:700;margin-left: -3px;">55</span>
<del>¥228</del>
<a href="">
立即購買</a>
</div>
</div>
</li>
</a>
</ul>
</div>
動態演示效果如下 >>>
然後將html代碼依次複製後粘貼即可實現大量的商品佈局
特別注意，因爲層疊級別的顯示問題，爲了無遮擋地正常顯示 li 商品欄，請配合以下JS代碼使用 ! ! !
//---------------商品欄部分----------------------
const goodsLi = document.getElementsByClassName('goodsList')[0].getElementsByTagName('li');
for (let i = 0; i < goodsLi.length; i++) {
goodsLi[i].onmouseover = function () {
for (let i = 0; i < goodsLi.length; i++) {
goodsLi[i].style.zIndex = 1;
}
this.style.zIndex = 9999;
console.log(this);
}
}
第三步，右側導航欄
右側導航欄的結構不算複雜，就是一個ul設置取消默認的樣式後，對每個li設置紅色底色，白色字體，微調字體的間距後即可實現，細節之處在於每個 li 由 a 標籤包裹，點擊a標籤會根據 href 尋找指定的錨鏈接，頁面跳轉到指定的位置
兩個重要細節需要實現 >>>
（1）右側導航條到達一定垂直位置後會消失和出現
（2）點擊右側導航欄的 li 時，被點擊後的 li 會變成暗紅色
全部代碼
index.html文件代碼
<!-- 商品展示欄部分 -->
<div class="goodsDisplay">
<!-- 頭號商品展示欄 -->
<div class="promise">
<div class="promiseText">
<p> <span>考拉承諾</span>
<span>|</span>
<span>正品保障</span>
</p>
<img src="./5bf7a8d8-ad7b-44db-9402-e5699b22dd4e_480_22.jpg" alt="">
<a href=""><span class="rightSpan">12項正品保障措施 ></span></a>
</div>
</div>
<div class="topTitleImg">
<img src="./8b9144b3-228a-4904-8239-7f821fab2df8T19010211539_1000_296.webp" alt="">
<div class="aHref">
<a href=""><img src="" alt=""></a>
<a href=""><img src="" alt=""></a>
<a href=""><img src="" alt=""></a>
<a href=""><img src="" alt=""></a></div>
</div>
<div class="shopTitle">★口碑爆款★</div>
<div class="goodsList">
<ul>
<!-- 第一行商品展示 -->
<a href="">
<li>
<div class="goods">
<img src="./8bc945f76be44060bd915535bf38ca1b1559809050771jwke1abf10206.webp" alt="">
<span class="leftBottom">新人專享</span>
<h3><a>
<p>【2件裝】Jmsolution 珍珠全身防水防曬隔離噴霧SPF50 180毫升</p>
</a></h3>
<p class="describe">無懼夏日暴曬的祕密武器</p>
<div class="value">
<span style="margin-left: 6px;">¥</span>
<span
style="font-size: 20px !important;font-weight:700;margin-left: -3px;">55</span>
<del>¥228</del>
<a href="">
立即購買</a>
</div>
</div>
</li>
</a>
<a href="">
<li>
<div class="goods">
<img src="./29b864ef1ff045b19a3f5677b9fd7c02_800_800.webp" alt="">
<span class="leftTop">熱銷</span>
<span class="leftBottom">新人專享</span>
<h3><a>
<p>【2件裝】Jmsolution 珍珠全身防水防曬隔離噴霧SPF50 180毫升</p>
</a></h3>
<p class="describe">無懼夏日暴曬的祕密武器</p>
<div class="value">
<span style="margin-left: 6px;">¥</span>
<span
style="font-size: 20px !important;font-weight:700;margin-left: -3px;">55</span>
<del>¥228</del>
<a href="">
立即購買</a>
</div>
</div>
</li>
</a>
<a href="">
<li>
<div class="goods">
<img src="./b400fa0e49214c9fa3152bf72063ef221543987209869jpaq4bl310678.webp" alt="">
<span class="leftTop">熱銷</span>
<span class="leftBottom">新人專享</span>
<h3><a>
<p>【2件裝】Jmsolution 珍珠全身防水防曬隔離噴霧SPF50 180毫升</p>
</a></h3>
<p class="describe">無懼夏日暴曬的祕密武器</p>
<div class="value">
<span style="margin-left: 6px;">¥</span>
<span
style="font-size: 20px !important;font-weight:700;margin-left: -3px;">55</span>
<del>¥228</del>
<a href="">
立即購買</a>
</div>
</div>
</li>
</a>
<a href="">
<li>
<div class="goods">
<img src="./b400fa0e49214c9fa3152bf72063ef221543987209869jpaq4bl310678.webp" alt="">
<span class="leftTop">熱銷</span>
<span class="leftBottom">新人專享</span>
<h3><a>
<p>【2件裝】Jmsolution 珍珠全身防水防曬隔離噴霧SPF50 180毫升</p>
</a></h3>
<p class="describe">無懼夏日暴曬的祕密武器</p>
<div class="value">
<span style="margin-left: 6px;">¥</span>
<span
style="font-size: 20px !important;font-weight:700;margin-left: -3px;">55</span>
<del>¥228</del>
<a href="">
立即購買</a>
</div>
</div>
</li>
</a>
<a href="">
<li>
<div class="goods">
<img src="./8bc945f76be44060bd915535bf38ca1b1559809050771jwke1abf10206.webp" alt="">
<span class="leftTop">熱銷</span>
<span class="leftBottom">新人專享</span>
<h3><a>
<p>【2件裝】Jmsolution 珍珠全身防水防曬隔離噴霧SPF50 180毫升</p>
</a></h3>
<p class="describe">無懼夏日暴曬的祕密武器</p>
<div class="value">
<span style="margin-left: 6px;">¥</span>
<span
style="font-size: 20px !important;font-weight:700;margin-left: -3px;">55</span>
<del>¥228</del>
<a href="">
立即購買</a>
</div>
</div>
</li>
</a>
<!-- 第二行商品展示 -->
...參考 第一行商品展示 進行復制，此處略...
<!-- 第三行商品展示 -->
...參考 第一行商品展示 進行復制，此處略...
<!-- 第四行商品展示 -->
...參考 第一行商品展示 進行復制，此處略...
<!-- 第五行商品展示 -->
</ul>
</div>
<br>
</div>
<!-- 右側導航欄 -->
<ul class="rightNav">
<a href="">
<li style="height: 34px;line-height: 34px;"><span id="oneCar"></span><span>購物車</span></li>
</a>
<a href="">
<li>★口碑爆款★</li>
</a>
<a href="">
<li>99元任選2件</li>
</a>
<a href="">
<li>大牌滿減</li>
</a>
<a href="">
<li>美容彩妝</li>
</a>
<a href="">
<li>家居個護</li>
</a>
<a href="">
<li>母嬰兒童</li>
</a>
<a href="">
<li>美食保健</li>
</a>
<a href="">
<li>工廠店精選</li>
</a>
<a href="#top">
<li style="height: 34px;line-height: 34px;"><span id="oneUp"></span><span>TOP</span></li>
</a>
</ul>
index.css文件代碼
ul.rightNav {
position: fixed;
right: 60px;
top: 30vh;
width: 128px;
z-index: 9999;
}
ul.rightNav li {
display: block;
list-style: none;
width: 100px;
line-height: 30px;
height: 30px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
text-align: center;
color: #fff;
background-color: #f03048;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
cursor: pointer;
z-index: 100px;
}
ul.rightNav li:hover {
background-color: rgb(175, 36, 52);
}
#oneCar{
display: block;
float: left;
margin-left: 18px;
margin-top: 5px;
width: 20px;
height: 20px;
background-size: 20px 21px;
background-image: url('./購物車_1.png');
}
#oneCar+span{
margin-left: -20px;
}
#oneUp{
display: block;
margin-left: 40px;
margin-top: 0px;
width: 20px;
height: 16px;
background-size: 20px 21px;
background-image: url('./上箭頭.png');
}
#oneUp+span{
display: block;
line-height: 16px;
}
index.js文件代碼
//---------------商品欄部分----------------------
const goodsLi = document.getElementsByClassName('goodsList')[0].getElementsByTagName('li');
for (let i = 0; i < goodsLi.length; i++) {
goodsLi[i].onmouseover = function () {
for (let i = 0; i < goodsLi.length; i++) {
goodsLi[i].style.zIndex = 1;
}
this.style.zIndex = 9999;
}
}
//--------------右側導航欄部分-------------------
// 獲取右側導航欄對象
const rightNav = document.getElementsByClassName('rightNav')[0];
window.onscroll = function () {
// scrollTop表示滾動後距離頂端多少
// 當距離頁面頂端大於799px的距離時會出現右側導航欄，否則右側導航條會消失
if (document.documentElement.scrollTop >= 799) {
rightNav.style.display = "block";
} else {
rightNav.style.display = "none";
}
}
//點擊右側導航欄後被點擊的相應li會變暗紅色
const rightNavLi = document.querySelectorAll('.rightNav li');
for (let i = 0; i < rightNavLi.length; i++) {
rightNavLi[i].onclick = function () {
// 遍歷當前所有的右側導航欄 li ,然後設置爲紅色
for (let i = 0; i < rightNavLi.length; i++) {
rightNavLi[i].style.backgroundColor = '#f03048';
}
// 設置所點擊的對象底色爲紅色
this.style.backgroundColor = 'rgb(175, 36, 52)';
}
}
最終效果截圖
