码迷,mamicode.com
首页 > Web开发 > 详细

仿京东静态网站制作之猜你喜欢(小竖线制作)

时间:2021-04-27 14:55:10      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:css   back   地方   img   abs   child   定位   实现   size   

猜你喜欢模块制作

主要知识点:结构伪类选择器和伪元素选择器&常规页面布局

HTML结构

<!-- 猜你喜欢模块 -->
    <div class="like">
        <div class="hd">
            <div class="left">猜你喜欢</div>
            <div class="right">换一批 &nbsp; <img src="./images/换一批.png" ></div>
        </div>
        <div class="bd">
            <li>
                <div class="img"><img src="./upload/书包.png" ></div>
                <div class="text">
                    <p>阳光美包新款单肩包女</p>
                    <p>包时尚子母包四件套女</p>
                    <i>¥116.00</i>
                </div>
            </li>
            <li>
                <div class="img"><img src="./upload/炒锅.png" ></div>
                <div class="text">
                    <p>爱仕达&nbsp; 30CM炒锅不粘</p>
                    <p>锅NWG8330E电磁炉炒</p>
                    <i>¥99.00</i>
                </div>
            </li>
            <li>
                <div class="img"><img src="./upload/捷波朗.png" ></div>
                <div class="text">
                    <p>捷波朗</p>
                    <p>(jabra)BOOSI劲步</p>
                    <i>¥245.00</i>
                </div>
            </li>
            <li>
                <div class="img"><img src="./upload/欧普.png" ></div>
                <div class="text">
                    <p>欧普</p>
                    <p>JYLZ08面板灯平板灯铝</p>
                    <i>¥238.00</i>
                </div>
            </li>
            <li>
                <div class="img"><img src="./upload/三星.png" ></div>
                <div class="text">
                    <p>三星</p>
                    <p>(G5500)移动联</p>
                    <i>¥649.00</i>
                </div>
            </li>
            <li>
                <div class="img"><img src="./upload/精华露.png" ></div>
                <div class="text">
                    <p>韩国所望</p>
                    <p>紧致湿润精华露400ml</p>
                    <i>¥1169.00</i>
                </div>
            </li>
        </div>
    </div>

ps:主要结构就是.like大盒子里装有.hd和.bd上下两个大盒子。

.hd盒子里又有两个小盒子。.bd盒子里有6个li,每个li里包含一个图片盒子和一个文字盒子

CSS代码

/* 猜你喜欢模块 */

.like {
    width: 1200px;
    height: 280px;
    margin: 10px auto;
}

.like .hd {
    height: 40px;
}

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

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

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

.like .bd {
    height: 240px;
    border: 1px solid #ededed;
}

.like .bd li {
    height: 240px;
    width: 199px;
    float: left;
}

.like .bd li .img {
    width: 170px;
    height: 140px;
    text-align: center;
    line-height: 140px;
    margin-bottom: 5px;
}

.like .bd li .text {
    position: relative;
    width: 170px;
    margin-left: 30px;
}

.like .bd li i {
    color: #df3033;
    font-size: 18px;
}

.like .text:nth-child(-n+5)::after {
    content: ‘‘;
    position: absolute;
    bottom: 10px;
    right: 5px;
    width: 1px;
    height: 45px;
    background-color: #ddd;
}

在这里将结构伪类选择器和伪元素选择器结合使用,再加上定位就可以实现小竖线效果

效果展示

技术图片

到这里猜你喜欢模块就算做完了,但其实还有一个小细节,那就是最后一个.text盒子后面其实不应该有小竖线的

.like .text:nth-child(-n+5)::after {
    content: ‘‘;
    position: absolute;
    bottom: 10px;
    right: 5px;
    width: 1px;
    height: 45px;
    background-color: #ddd;

这段代码我想实现的功能是给.like盒子底下的前五个.text盒子后面加上小竖线,但是理想很丰满,现实很骨感

技术图片

这里也是一个使用结构伪类选择器需要注意的地方,敲重点敲重点

结构伪类选择器的作用是选择某个父元素里一个或几个指定的元素

使用结构伪类选择器时如E:nth-child(n),E必须为亲兄弟,什么意思嘞,看代码

<body>
    <div class="like">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

这里是一个.like大盒子里包含了六个div盒子

        .like div {
            margin: 20px auto;
            width: 500px;
            height: 50px;
            border: 1px solid red;
            list-style: none;
        }
        
        .like div:nth-child(-n+3) {
            background-color: skyblue;
        }

现在我将前三个div盒子选出来填充天蓝色的背景色

效果

技术图片

是没有问题的,但是现在我给每一个div盒子套一个li

<body>
    <div class="like">
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
        <li>
            <div></div>
        </li>
    </div>
</body>

再看效果

技术图片

这个时候六个div盒子都上色了,因为这个时候这六个div之间有li隔着不再是亲兄弟了

仿京东静态网站制作之猜你喜欢(小竖线制作)

标签:css   back   地方   img   abs   child   定位   实现   size   

原文地址:https://www.cnblogs.com/ben-studying/p/14705949.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!