仿京东静态网站制作之海贼王*时尚潮牌购物模块

海贼王*时尚潮牌购物模块

主要知识点：网页布局&定位&CSS3过渡

HTML结构

    <!-- 时尚潮牌模块 -->
    <div class="w fasion">
        <div class="hd">
            <div class="left">海贼王*时尚潮牌</div>
            <div class="middle">艾斯专场</div>
            <div class="right">换一批 &nbsp; <img src="./img/换一批.png" alt=""></div>
        </div>
        <div class="bd">
            <div class="sec1">
                <img src="./img/艾斯1.png" alt="">
                <p>印花T恤+工装裤休闲套装</p>
                <span class="now">￥1999</span>
                <span class="pass">￥2469</span>
                <div></div>
                <span class="one">已售</span>
                <span class="red"><strong>87%</strong></span>
                <div class="line">
                    <li></li>
                </div>
                <span class="one">剩余</span>
                <span class="red"><strong>29</strong></span>
                <span class="one">件</span>
                <div class="box">立即抢购</div>
            </div>

思路复盘：

1、一个.fasion的大盒子里有上下两个子盒子，.hd盒子放模块标题，.bd盒子放内容

2、.bd盒子里放四个sec内容盒子，因为每个sec盒子的内容几乎差不多，所以做好一个其他几个复制粘贴就行

3、sec盒子里放一张图片，详情文字，进度条和一个立即抢购的小盒子

4、因为详情文字的文字颜色不统一，所以用了多个span行内块盒子，并给相同颜色的span盒子添加了相同的类名，方便控制

5、进度条采用过渡效果制作，外面是一个.line的只有边框的圆角矩形盒子，.line盒子里放一个li，结合：hover和overflow：hidden以及transition就可以做了

CSS代码

/* 时尚潮牌模块 */
.fasion {
    height: 600px;
}

.fasion .hd {
    height: 55px;
    border-bottom: 1px solid #ededed;
}

.fasion .hd .left {
    float: left;
    font-size: 18px;
    line-height: 40px;
}

.fasion .hd .middle {
    float: left;
    margin-left: 45px;
    color: #c81623;
    font-size: 36px;
    line-height: 20px;
}

.fasion .hd .right {
    float: right;
    line-height: 40px;
    margin-right: 20px;
}

.fasion .hd .right img {
    widows: 12px;
    height: 12px;
}

.fasion .bd {
    position: relative;
    height: 545px;
}

.fasion .bd>div {
    position: absolute;
    top: 0;
    width: 300px;
    height: 545px;
    font-size: 18px;
}

.fasion .bd .sec1 {
    left: 0;
}

.fasion .bd .sec2 {
    top: 3px;
    left: 300px;
}

.fasion .bd .sec3 {
    left: 600px;
}

.fasion .bd .sec4 {
    top: 18px;
    left: 900px;
}

.fasion .bd>div .now {
    font-size: 30px;
    color: #c81623;
}

.fasion .bd>div .pass {
    font-size: 24px;
    text-decoration: line-through;
}

.fasion .bd>div .line {
    overflow: hidden;
    padding: 0.5px 0;
    width: 214px;
    height: 16px;
    border-radius: 7px;
    border: 1px solid #000;
}

.fasion .bd .sec1 .line:hover li {
    width: 87%;
    height: 13px;
    background-color: #c81623;
    transition: all 0.6s;
}
.fasion .bd>div .box {
    margin-top: 10px;
    border: 1px solid #000;
    width: 242px;
    height: 71px;
    background-color: #c81623;
    text-align: center;
    line-height: 71px;
    font-size: 40px;
    color: #fff;
}

.fasion .bd>div span {
    margin-left: 14px;
}

.fasion .bd>div p {
    margin-left: 14px;
}

.fasion .bd>div .line {
    margin-left: 14px;
}

我原本想的是给每个sec盒子300px的宽，然后设置浮动（.bd盒子的宽是1200px）不就可以实现布局了吗，但是我用浮动的时候sec4的盒子就会换行了，我也不知道是怎么回事，呜呜呜，所以最后就只有用定位来实现了，如果有大佬知道原因的话，欢迎评论

最终效果

放上鼠标后（第二个）