电商项目实战第五节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【商品栏及右侧垂直导航】

上一节：电商项目实战第四节: 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;">55span>
                                    <del>¥228del>
                                    <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;">55span>
                                    <del>¥228del>
                                    <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;">55span>
                                    <del>¥228del>
                                    <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;">55span>
                                    <del>¥228del>
                                    <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;">55span>
                                    <del>¥228del>
                                    <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 会变成暗红色
这里面所有的js控制代码都在index.js里面写好了注释

全部代码

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;">55span>
                                    <del>¥228del>
                                    <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;">55span>
                                    <del>¥228del>
                                    <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;">55span>
                                    <del>¥228del>
                                    <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;">55span>
                                    <del>¥228del>
                                    <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;">55span>
                                    <del>¥228del>
                                    <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>TOPspan>li>
        a>
    ul>

index.css文件代码

/* -------------------------商品展示栏-------------------------- */
.goodsDisplay {
    width: 1090px;
    height: 800px;
    background-color: rgb(255, 255, 255);
}

/* 商品承诺 */
.promise {
    position: relative;
    width: 992px;
    height: 90px;
    background-color: red;
    padding: 4px;
    margin-bottom: 10px;
}

/* 官方商品防假承诺文本 */
.promise .promiseText {
    position: absolute;
    width: 99%;
    height: 90px;
    background-color: #fff;
    border-radius: 6.4px;
}

.promiseText p {
    position: absolute;
    display: block;
    top: -10px;
    left: 18px;
    font-size: 20px;
    font-weight: 600;
    color: red;
    height: 24px;
    width: 400px;
}

.promiseText .rightSpan {
    position: absolute;
    width: 176px;
    height: 20px;
    top: 24px;
    right: 18px;
    font-size: 16px;
    line-height: 20px;
    padding: 10px;
    text-align: center;
    color: #fff;
    border-radius: 24px;
    background-color: red;
}

.promiseText img {
    position: absolute;
    left: 18px;
    bottom: 18px;
}

.shopTitle {
    width: 1000px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 28px;
    color: rgb(255, 255, 255);
    background-color: rgb(227, 20, 54);
    margin-top: 6px;
    margin-bottom: 12px;
}

/* 头号商品的设置，这里的头号商品指的是商品栏上面那4个图案，被指定的横向图案 */
.topTitleImg .aHref {
    display: flex;
    width: 986px;
    margin-top: -302px;
}

/* 用flex属性平均分配超链接，浮动在头号的4个商品上，方便点击跳转 */
.topTitleImg .aHref a {
    display: block;
    flex: 1;
    height: 296px;
    margin-left: 14px;
}

/* 针对第一个头号商品进行单独设置，为了方便整个头号商品居中 */
.topTitleImg .aHref a:first-child {
    margin-left: 10px;
}


/* 商品列表 */
.goodsList {
    position: relative;
    width: 1000px;
    height: 1536px;
    margin-top: -12px;
    background-color: rgb(240, 240, 240);
}

.goodsList ul {
    margin-left: -40px;
}

.goodsList ul li {
    display: block;
    float: left;
    position: relative;
    height: 279px;
    width: 190px;
    background-color: #fff;
    margin-top: 10px;
    margin-bottom: 16px;
    margin-left: 8px;
}

/* 对单个商品进行指定 */
.goodsList ul li .goods {
    height: 296px;
    background-color: #fff;
    border: 1px solid transparent;
    background-color: inherit;
    transition: all 0.2s ease;
}

/* 单个商品左上角的红色小标签 */
.goodsList ul li .leftTop {
    display: block;
    position: absolute;
    top: 0;
    margin-top: 1px;
    margin-left: -1px;
    width: fit-content;
    height: 20px;
    padding: 0 5px 0 3px;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    background-color: #ff8385;
    z-index: 1;
}

/* 单个商品左下角的小标签 */
.goodsList ul li .leftBottom {
    display: block;
    position: absolute;
    height: 15px;
    left: 8px;
    border: 1px solid #e31436;
    border-radius: 3px;
    background: #fff;
    color: #e31436;
    font-size: 12px;
    line-height: 15px;
}

/* 商品名字 */
.goodsList ul li h3 {
    display: block;
    height: auto;
    width: 180px;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 4px;
    margin-left: 4px;
    overflow: hidden;
}

/* 鼠标移动到商品栏后，相应的商品显示商品名字，这里用的是white-space属性让标题全部显示 */
.goodsList ul li:hover .goods {
    height: 338px;
    border: 1px solid red;
    white-space: normal;
}

.goodsList ul li:hover p {
    white-space: normal;
}

.goodsList ul li h3:hover p {
    cursor: pointer;
    text-decoration: underline;
}

.goodsList ul li img {
    width: 100%;
}

/* 单个的商品描述文字 */
.goodsList ul li .describe {
    color: #666;
    margin-left: 4px;
    margin-top: -24px;
}

/* 单个商品的价格，采用大红色显示 */
.goodsList ul li .value {
    position: relative;
    color: rgb(227, 20, 54);
    background-color: #fff;
    line-height: 22px;
    margin-bottom: 14px;
    z-index: 9999;
}

.goodsList ul li .value a {
    display: block;
    float: right;
    width: fit-content;
    height: 24px;
    margin-right: 4px;
    bottom: 14px;
    padding: 0 6px;
    border-radius: 3px;
    background: #e31436;
    color: #fff;
    font-size: 12px;
    line-height: 24px;
    text-align: center;
}

/* 商品原价格，这是文字划线，一般用于打折吸引客服 */
.goodsList ul li .value del {
    color: #999;
}

/* 右侧导航栏 */
ul.rightNav {
    position: fixed;
    right: 60px;
    top: 30vh;
    width: 128px;
    z-index: 9999;
}

/* 右侧导航栏的li属性设置 */
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;
}

/* 单鼠标移动到右侧导航栏的指定 li 上时，底色显示为暗红色 */
ul.rightNav li:hover {
    background-color: rgb(175, 36, 52);
}

/* 右侧导航条的第一个li是购物车 */
#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;
}

/* 右侧导航栏最后一个li是上箭头 */
#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)';
    }
}

最终效果截图

---

下一节：CSS3+HTML5+JS 设计案例【考拉海购网站】之【页底信息，网站备案信息】