品优购首页案例总结

品优购网上商城类似于京东商城、天猫商城。通过学习并完成品优购首页的前台部分，综合运用到了前面所学的HTML、CSS和JavaScript，了解到了自身存在的一些不足和缺点，也从中学习到了许多新的知识。

1.导航栏

导航栏主要分为横向导航和竖向导航，我基本都是由列表完成。在本案例中也大量使用了这一效果。 效果展示：

在这个导航中还用js制作了一个简单的轮播图，轮播图也是用列表做的，给列表的每一列放一张图片，再给每个列表的opacity属性值设为0，当轮播图到哪一张图时opacity的属性值设为1。其中代码如下：

<div class="cen_swiper">
       <ul>
           <li class="active"><img src="./img/swiper.jpg" alt=""></li>
           <li><img src="./img/swiper2.jpg" alt=""></li>
           <li><img src="./img/swiper3.jpg" alt=""></li>
           <li><img src="./img/swiper4.jpg" alt=""></li>
         </ul>
      <ol class="position">
          <li data-i="0" data-name="point" class="active "></li>
          <li data-i="1" data-name="point"></li>
          <li data-i="2" data-name="point"></li>
          <li data-i="3" data-name="point"></li>
       </ol>
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
</div>
/*轮播图部分的CSS*/
.cen_swiper {
    width: 720px;
    height: 455px;
    margin: 10px;
    position: relative;
}

.cen_swiper img {
    width: 720px;
    height: 455px;
}

.cen_swiper .left {
    position: absolute;
    top: 180px;
    left: 0;
    font-size: 50px;
    color: skyblue;
    cursor: pointer;
}

 .cen_swiper .left:hover {
    color: red;
}

 .cen_swiper .right {
    position: absolute;
    top: 180px;
    right: 0;
    font-size: 50px;
    color: skyblue;
    cursor: pointer;
}

.cen_swiper .right:hover {
    color: red;
}

.cen_swiper ul {
    position: relative;
}

.cen_swiper ul li {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.cen_swiper .active {
    opacity: 1;
}
.position {
    width: 100px;
    height: 20px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 15px;
}

.position li {
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
}

.position li.active {
    background: yellow;
}
li{
  list-style: none;
}
/*轮播图部分的JS*/
var imgs = document.querySelectorAll('.cen_swiper > ul > li')
var points = document.querySelectorAll('.position > li')
var c = document.querySelector('.cen_swiper')
var index = 0;
function changeOne(type) {
    imgs[index].className = ''
    points[index].className = ''
    if (type === true) {
        index++
    } else if (type === false) {
        index--
    }
    else {
        index = type
    }
    if (index >= imgs.length) {
        index = 0
    }
    if (index < 0) {
        index = imgs.length - 1
    }
    imgs[index].className = 'active'
    points[index].className = 'active'
}
c.onclick = function (e) {
    console.log(e.target.className);
    if (e.target.className === 'left') {
        changeOne(false)
    }
    if (e.target.className === 'right') {
        changeOne(true)
    }
    if (e.target.dataset.name === 'point') {
        var i = e.target.dataset.i
        changeOne(Number(i))
    }
}
setInterval(function () {
    changeOne(true)
}, 5000)

2.商品展示部分

商品展示部分主要分为顶部的导航栏我用的是列表做的，和商品展示区也是用列表做的并在列表中加入商品盒子来展示商品。 效果展示：

3.底部导航页和版权部分

底部导航页和版权部分我用到了ul,li和dl,dt,dd列表。 效果展示：

4.遇到的问题

在案例制作过程中，我的代码写的不是很规范，样式的命名也不合理，我会在日后的学习和工作中特别注意我的代码和命名规范。我制作的这个网页在缩小时会导致出现元素塌陷的现象，我发现页面缩小会影响盒子边框的像素值，所以可以 通过扩大父元素的宽度值或者将元素盒模型的box-sizing的值设置为border-box即可解决这一问题。

普通盒子模型的大小由内容部分（content）、内边距（padding）、边框（border）和外边距（margin）组成，其中内容部分的大小是用户自己设置的width和height值，而另外设置的padding、border、margin值都会改变盒子大小从而影响页面布局。

而怪异盒模型（C3盒子模型），通过给box-sizing的值设置为border-box来将盒子设置为怪异盒模型。怪异盒的大小由content和margin组成，所以在一般情况下怪异盒模型的大小只由content和margin决定，而其padding和border的设定则是通过压缩盒子的内容区域来实现的，不会影响盒子的大小，使页面布局更加方便。