【css/js】商品升序降序排列。

最新推荐文章于 2022-06-23 14:43:41 发布

爱吃猪的小白菜、

最新推荐文章于 2022-06-23 14:43:41 发布

阅读量1.3k

点赞数

分类专栏： js 文章标签： javascript css

本文链接：https://blog.csdn.net/qq_34365469/article/details/104850950

版权

实现功能:

点击三个不同的按钮,实现按照随机排序、升序、降序排列。

源码下载地址链接:

https://pan.baidu.com/s/1VEgJ7ckOiqQjKLe5XAQ7kQ 提取码: r5dm 复制这段内容后打开百度网盘手机App，操作更方便哦

源码文档:

-------------------------------------------------------------------这是分割线--------------------------------------------------------

<!DOCTYPE html>
<html lang="ZH-cn">

<head>
<meta charset="UTF-8">
<title>商品排序</title>
<style>
.box {
position: relative;
width: 800px;
height: 520px;
border: 1px solid #c9c9c9;
border-radius: 3px;
margin: 100px auto;
overflow: hidden;
}

ul {
padding-left: 0;
margin: 0;
list-style: none;
width: 750px;
height: 390px;
position: absolute;
top: 34px;
left: 34px;
}

ul li {
position: relative;
width: 174px;
height: 200px;
float: left;
margin: 15px 11px 0 0;
transition-duration: 0.5s;
transition-timing-function: linear;
cursor: pointer;
box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.5);
}

/*悬停在li往上浮动*/
ul li:hover {
transform: translateY(-10px);

}

ul li img {
width: 174px;
height: 174px;
float: left;
}

/*超出...显示*/
ul li span.msg {
font-size: 12px;
font-weight: 400;
line-height: 18px;

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 125px;
height: 18px;
display: block;
}

ul li .msgBox.show {
position: absolute;
z-index: 100;
width: 170px;
height: 35px;
/* background-color: skyblue; */
font-size: 12px;
color: violet;

}

ul li .priceArea {
position: absolute;
width: 45px;
height: 50px;
bottom: 0px;
right: 0px;
background-color: #f04a40;
border-radius: 50%;
transform: rotate(30deg);
}

ul li .priceArea .price {
display: block;
transform: rotate(-30deg);
color: #ffffff;
font-size: 14px;
font-weight: bold;
line-height: 50px;
}

.box .buttonArea {
position: absolute;

最低0.47元/天解锁文章

爱吃猪的小白菜、

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【css/js】商品升序降序排列。

实现功能:点击三个不同的按钮,实现按照随机排序、升序、降序排列。源码:-------------------------------------------------------------------这是分割线-----------------------------------------------------------------------<!DOC...
复制链接

扫一扫