全选反选案例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>
</head>
<body>
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米手机</td>
<td>小米</td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米净水器</td>
<td>小米</td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米电视</td>
<td>小米</td>
<td>￥5999</td>
</tr>
</table>
<script>
const checkAll = document.querySelector('#checkAll')
const cks = document.querySelectorAll('.ck')
checkAll.addEventListener('click', function () {
for (let i = 0; i < cks.length; i++) {
cks[i].checked = checkAll.checked
}
})
for (let i = 0; i < cks.length; i++) {
cks[i].addEventListener('click', function () {
checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length
})
}
</script>
</body>
</html>仿新浪固定头部：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.content {
overflow: hidden;
width: 1000px;
height: 3000px;
background-color: pink;
margin: 0 auto;
}
.backtop {
display: none;
width: 50px;
left: 50%;
margin: 0 0 0 505px;
position: fixed;
bottom: 60px;
z-index: 100;
}
.backtop a {
height: 50px;
width: 50px;
background: url(./images/bg2.png) 0 -600px no-repeat;
opacity: 0.35;
overflow: hidden;
display: block;
text-indent: -999em;
cursor: pointer;
}
.header {
position: fixed;
top: -80px;
left: 0;
width: 100%;
height: 80px;
background-color: purple;
text-align: center;
color: #fff;
line-height: 80px;
font-size: 30px;
transition: all .3s;
}
.sk {
width: 300px;
height: 300px;
background-color: skyblue;
margin-top: 500px;
}
</style>
</head>
<body>
<div class="header">我是顶部导航栏</div>
<div class="content">
<div class="sk">秒杀模块</div>
</div>
<div class="backtop">
<img src="./images/close2.png" alt="">
<a href="javascript:;"></a>
</div>
<script>
const header = document.querySelector('.header')
const sk = document.querySelector('.sk')
window.addEventListener('scroll', function () {
const n = document.documentElement.scrollTop
header.style.top = n > sk.offsetTop ? 0 : '-80px'
})
</script>
</body>
</html>m-bilibili：
index.css：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
font-family: Helvetica Neue, Tahoma, Arial, PingFangSC-Regular, Hiragino Sans GB, Microsoft Yahei, sans-serif;
}
a {
color: #333;
text-decoration: none;
}
img {
vertical-align: middle;
width: 100%;
height: 100%;
}
ul {
list-style: none;
}
.ellipsis-2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.suspension {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
background-color: #fff;
box-shadow: 0 0.53333vw 2.66667vw rgba(0, 0, 0, 0.2);
}
.suspension .m-navbar {
padding: 0 3.2vw 0 4.8vw;
height: 11.73333333vw;
display: flex;
justify-content: space-between;
align-items: center;
}
.suspension .m-navbar .logo i {
font-size: 7.46666667vw;
color: #fb7299;
}
.suspension .m-navbar .right {
display: flex;
}
.suspension .m-navbar .right .search {
color: #ccc;
}
.suspension .m-navbar .right .search i {
font-size: 5.86666667vw;
}
.suspension .m-navbar .right .face {
overflow: hidden;
width: 6.4vw;
height: 6.4vw;
border-radius: 50%;
margin: 0 5.33333333vw;
}
.suspension .m-navbar .right .app-btn {
width: 19.2vw;
height: 6.4vw;
}
.suspension .channel-menu {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
height: 10.66666667vw;
border-bottom: 1px solid #e7e7e7;
}
.suspension .channel-menu .tabs {
overflow: hidden;
flex: 1;
}
.suspension .channel-menu .tabs .tabs-list {
display: flex;
}
.suspension .channel-menu .tabs .tabs-list a {
padding: 0 4.26666667vw;
white-space: nowrap;
font-size: 3.73333333vw;
height: 10.66666667vw;
line-height: 10.66666667vw;
}
.suspension .channel-menu .tabs .tabs-list .line {
position: absolute;
left: 4.26666667vw;
bottom: 0;
width: 7.46666667vw;
height: 0.53333333vw;
background-color: #fb7299;
transition: all 0.3s;
}
.suspension .channel-menu .after {
width: 10.66666667vw;
height: 10.4vw;
text-align: center;
line-height: 10.4vw;
background-color: #fff;
color: #ccc;
}
.suspension .channel-menu .after i {
font-size: 5.33333333vw;
}
.m-home {
padding: 22.66666667vw 1.33333333vw 0;
}
.m-home .video-list {
display: flex;
flex-wrap: wrap;
}
.m-home .video-list .video-item {
width: 50%;
padding: 2.13333333vw 1.33333333vw;
}
.m-home .video-list .video-item .card {
position: relative;
height: 25.86666667vw;
}
.m-home .video-list .video-item .card .count {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 7.2vw;
padding: 0 1.33333333vw;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 3.2vw;
color: #fff;
background-image: linear-gradient(transparent, red);
}
.m-home .video-list .video-item .title {
margin-top: 1.33333333vw;
font-size: 3.2vw;
}
.app {
position: fixed;
left: 0;
bottom: 8vw;
width: 100%;
height: 10.13333333vw;
}
.app .btn-app {
margin: 0 5.33333333vw;
height: 10.13333333vw;
background-color: purple;
border-radius: 5.06666667vw;
text-align: center;
line-height: 10.13333333vw;
background-color: #fb7299;
color: #fff;
box-shadow: 0 0.53333vw 2.66667vw rgba(0, 0, 0, 0.2);
}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bilibili-干杯~~~</title>
<!-- 引入favicon图标 -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- 引入css文件 -->
<link rel="stylesheet" href="./css/index.css">
<!-- 引入字体图标文件 -->
<link rel="stylesheet" href="./fonts/iconfont.css">
</head>
<body>
<!-- 头部模块 -->
<header class="suspension">
<div class="m-navbar">
<!-- logo -->
<a href="#" class="logo">
<i class="iconfont Navbar_logo"></i>
</a>
<!-- 右侧 -->
<div class="right">
<a href="#" class="search">
<i class="iconfont ic_search_tab"></i>
</a>
<a href="#" class="face">
<img src="./images/login.png" alt="">
</a>
<div class="app-btn">
<img src="./images/download.png" alt="">
</div>
</div>
</div>
<div class="channel-menu">
<div class="tabs">
<!-- 很宽的盒子 -->
<div class="tabs-list">
<a href="#">首页</a>
<a href="#">动画</a>
<a href="#">番剧</a>
<a href="#">果蔬</a>
<a href="#">音乐</a>
<a href="#">舞蹈</a>
<a href="#">鬼畜</a>
<a href="#">吹鬼</a>
<!-- 红色线 -->
<div class="line"></div>
</div>
</div>
<div class="after">
<i class="iconfont general_pulldown_s"></i>
</div>
</div>
</header>
<!-- 主体部分 -->
<div class="m-home">
<div class="video-list">
<a href="#" class="video-item">
<div class="card">
<img src="./images/dog.jpg@480w_270h_1c" alt="">
<!-- 播放量 -->
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu"></i>
播放量
</span>
<span>
<i class="iconfont icon_shipin_danmushu"></i>
评论数
</span>
</div>
</div>
<p class="title ellipsis-2">
315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
</p>
</a>
<a href="#" class="video-item">
<div class="card">
<img src="./images/dog.jpg@480w_270h_1c" alt="">
<!-- 播放量 -->
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu"></i>
播放量
</span>
<span>
<i class="iconfont icon_shipin_danmushu"></i>
评论数
</span>
</div>
</div>
<p class="title ellipsis-2">
315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
</p>
</a>
<a href="#" class="video-item">
<div class="card">
<img src="./images/dog.jpg@480w_270h_1c" alt="">
<!-- 播放量 -->
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu"></i>
播放量
</span>
<span>
<i class="iconfont icon_shipin_danmushu"></i>
评论数
</span>
</div>
</div>
<p class="title ellipsis-2">
315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
</p>
</a>
<a href="#" class="video-item">
<div class="card">
<img src="./images/dog.jpg@480w_270h_1c" alt="">
<!-- 播放量 -->
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu"></i>
播放量
</span>
<span>
<i class="iconfont icon_shipin_danmushu"></i>
评论数
</span>
</div>
</div>
<p class="title ellipsis-2">
315晚会能不能曝光下电视？
</p>
</a>
<a href="#" class="video-item">
<div class="card">
<img src="./images/dog.jpg@480w_270h_1c" alt="">
<!-- 播放量 -->
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu"></i>
播放量
</span>
<span>
<i class="iconfont icon_shipin_danmushu"></i>
评论数
</span>
</div>
</div>
<p class="title ellipsis-2">
315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
</p>
</a>
<a href="#" class="video-item">
<div class="card">
<img src="./images/dog.jpg@480w_270h_1c" alt="">
<!-- 播放量 -->
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu"></i>
播放量
</span>
<span>
<i class="iconfont icon_shipin_danmushu"></i>
评论数
</span>
</div>
</div>
<p class="title ellipsis-2">
315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
</p>
</a>
<a href="#" class="video-item">
<div class="card">
<img src="./images/dog.jpg@480w_270h_1c" alt="">
<!-- 播放量 -->
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu"></i>
播放量
</span>
<span>
<i class="iconfont icon_shipin_danmushu"></i>
评论数
</span>
</div>
</div>
<p class="title ellipsis-2">
315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
</p>
</a>
<a href="#" class="video-item">
<div class="card">
<img src="./images/dog.jpg@480w_270h_1c" alt="">
<!-- 播放量 -->
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu"></i>
播放量
</span>
<span>
<i class="iconfont icon_shipin_danmushu"></i>
评论数
</span>
</div>
</div>
<p class="title ellipsis-2">
315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
</p>
</a>
<a href="#" class="video-item">
<div class="card">
<img src="./images/dog.jpg@480w_270h_1c" alt="">
<!-- 播放量 -->
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu"></i>
播放量
</span>
<span>
<i class="iconfont icon_shipin_danmushu"></i>
评论数
</span>
</div>
</div>
<p class="title ellipsis-2">
315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
</p>
</a>
<a href="#" class="video-item">
<div class="card">
<img src="./images/dog.jpg@480w_270h_1c" alt="">
<!-- 播放量 -->
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu"></i>
播放量
</span>
<span>
<i class="iconfont icon_shipin_danmushu"></i>
评论数
</span>
</div>
</div>
<p class="title ellipsis-2">
315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
</p>
</a>
<a href="#" class="video-item">
<div class="card">
<img src="./images/dog.jpg@480w_270h_1c" alt="">
<!-- 播放量 -->
<div class="count">
<span>
<i class="iconfont icon_shipin_bofangshu"></i>
播放量
</span>
<span>
<i class="iconfont icon_shipin_danmushu"></i>
评论数
</span>
</div>
</div>
<p class="title ellipsis-2">
315晚会能不能曝光下智能电视？N重广告、套娃会员、操作反人类，当代年轻人是怎么被智能电视逼疯的？【商业B面&牛顿】
</p>
</a>
</div>
</div>
<!-- 底部模块 -->
<footer class="app">
<div class="btn-app">
<i class="iconfont Navbar_logo"></i>
打开App，看你感兴趣的视频
</div>
</footer>
<script>
const list = document.querySelector('.tabs-list')
const line = document.querySelector('.line')
list.addEventListener('click', function (e) {
// console.log(e.target.tagname);
// console.log(11);
if (e.target.tagName === 'A') {
line.style.transform = `translateX(${e.target.offsetLeft}px)`
}
})
</script>
</body>
</html>电梯导航素材:
index.css:
@charset "UTF-8";
/* 页面滑动 */
html {
/* 让滚动条丝滑的滚动 */
scroll-behavior: smooth;
}
/** 分类及焦点图 **/
.xtx_entry {
height: 500px;
background-color: #f2f2f2;
position: relative;
}
.xtx_category {
width: 250px;
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
z-index: 9;
}
.xtx_category:hover .xtx_category_subset {
display: block;
}
.xtx_category_super li {
height: 50px;
padding: 0 20px 0 40px;
transition: background-color 0.25s;
cursor: pointer;
}
.xtx_category_super li:hover,
.xtx_category_super li.active {
background-color: #27BA9B;
}
.xtx_category_super a {
color: #fff;
font-size: 16px;
line-height: 50px;
}
.xtx_category_super a small {
font-size: 14px;
}
.xtx_category_super i {
display: block;
width: 12px;
height: 12px;
margin-top: 20px;
background-position: -75px -110px;
float: right;
}
.xtx_category_subset {
width: 990px;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
display: none;
position: absolute;
top: 0;
left: 250px;
}
.xtx_banner {
width: 1240px;
height: 500px;
overflow: hidden;
position: relative;
}
.xtx_banner:hover a {
opacity: 1;
}
.xtx_banner>a {
display: block;
width: 44px;
height: 44px;
border-radius: 50%;
margin-top: -22px;
opacity: 0;
transition: opacity 0.5s;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
top: 50%;
}
.xtx_banner>a.prev {
left: 270px;
background-position: 14px -59px;
}
.xtx_banner>a.next {
right: 20px;
background-position: -24px -59px;
}
.xtx_banner .indicator {
width: 990px;
text-align: center;
font-size: 0;
position: absolute;
left: 250px;
bottom: 22px;
}
.xtx_banner .indicator span {
display: inline-block;
width: 9px;
height: 9px;
margin: 0 8px;
cursor: pointer;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.43);
}
.xtx_banner .indicator span.active {
background-color: #fff;
}
/** 公共面板 **/
.xtx_panel .xtx_panel_header {
height: 115px;
padding: 40px 0;
}
.xtx_panel .xtx_panel_header h3 {
height: 35px;
line-height: 35px;
margin-left: 6px;
font-size: 32px;
font-weight: 400;
color: #333;
float: left;
}
.xtx_panel .xtx_panel_header small {
margin-left: 22px;
font-size: 16px;
color: #999;
}
.xtx_panel .xtx_panel_header .more {
line-height: 1;
margin-top: 14px;
font-size: 16px;
color: #999;
float: right;
}
.xtx_panel .xtx_panel_header .more i {
display: inline-block;
width: 16px;
height: 16px;
position: relative;
top: 1px;
background-position: 8px -106px;
}
.xtx_panel .xtx_panel_header .tabs-bar {
height: 35px;
padding-top: 13px;
font-size: 16px;
margin-right: 80px;
float: right;
}
.xtx_panel .xtx_panel_header .tabs-bar a {
padding: 2px 8px;
margin-left: 5px;
border-radius: 2px;
}
.xtx_panel .xtx_panel_header .tabs-bar a:hover,
.xtx_panel .xtx_panel_header .tabs-bar a.active {
background-color: #27BA9B;
color: #fff;
}
.xtx_panel .xtx_panel_goods_1 {
text-align: justify;
font-size: 0;
}
.xtx_panel .xtx_panel_goods_1:after {
content: "";
display: inline-block;
width: 306px;
height: 0;
}
.xtx_panel .xtx_panel_goods_1 a {
display: inline-block;
width: 306px;
height: 406px;
text-align: center;
}
.xtx_panel .xtx_panel_goods_1 img {
width: 306px;
height: 306px;
}
.xtx_panel .xtx_panel_goods_2 {
height: 610px;
}
.xtx_panel .xtx_panel_goods_2 li {
width: 240px;
height: 300px;
padding-top: 10px;
margin-left: 10px;
background-color: #fff;
border: 1px solid #fff;
overflow: hidden;
transition: 0.3s;
position: relative;
float: left;
}
.xtx_panel .xtx_panel_goods_2 li:hover {
border-color: #27BA9B;
}
.xtx_panel .xtx_panel_goods_2 li:hover .extra {
bottom: 0;
}
.xtx_panel .xtx_panel_goods_2 li:first-child {
height: 610px;
padding-top: 0;
margin-left: 0;
border: 0;
}
.xtx_panel .xtx_panel_goods_2 li:nth-last-child(-n + 4) {
margin-top: 10px;
}
.xtx_panel .xtx_panel_goods_2 a {
display: block;
}
.xtx_panel .xtx_panel_goods_2 .img-box {
width: 240px;
height: 160px;
padding: 0 33px;
text-align: center;
margin: 0 auto;
display: table-cell;
vertical-align: middle;
}
.xtx_panel .xtx_panel_goods_2 .meta {
height: 130px;
line-height: 1.3;
padding: 10px 22px 0;
font-size: 19px;
position: relative;
}
.xtx_panel .xtx_panel_goods_2 .name {
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.xtx_panel .xtx_panel_goods_2 .price {
font-size: 22px;
color: #CF4444;
position: absolute;
bottom: 10px;
}
.xtx_panel .xtx_panel_goods_2 .price small {
font-size: 17px;
}
.xtx_panel .xtx_panel_goods_2 .extra {
width: 100%;
height: 86px;
padding-top: 10px;
transition: bottom 0.3s;
background-color: #27BA9B;
position: absolute;
bottom: -86px;
}
.xtx_panel .xtx_panel_goods_2 .extra span {
display: block;
width: 124px;
line-height: 1;
padding: 9px 0 8px;
margin: 0 auto;
text-align: center;
font-size: 19px;
color: #fff;
}
.xtx_panel .xtx_panel_goods_2 .extra span:last-child {
font-size: 13px;
border-top: 1px solid #fff;
}
.xtx_panel .xtx_panel_goods_2 .label {
position: absolute;
left: 0;
bottom: 266px;
width: 188px;
height: 66px;
text-align: center;
line-height: 66px;
color: #fff;
font-size: 17px;
border-radius: 0 2px 2px 0;
background-color: rgba(0, 0, 0, 0.8);
position: relative;
}
.xtx_panel .xtx_panel_goods_2 .label span:first-child {
display: block;
width: 76px;
background-color: #000;
}
.xtx_panel .xtx_panel_goods_2 .label span:last-child {
width: 112px;
line-height: 1.4;
transform: translate(0, -50%);
position: absolute;
left: 76px;
right: 0;
top: 50%;
}
/** 新鲜好物 **/
.xtx_goods_new .xtx_panel_goods_1 a {
background-color: #f0f9f4;
transition: 0.5s;
position: relative;
top: 0;
}
.xtx_goods_new .xtx_panel_goods_1 a:hover {
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
top: -3px;
}
.xtx_goods_new .xtx_panel_goods_1 .name {
display: inline-block;
width: 100%;
margin: 12px 0 10px;
font-size: 22px;
}
.xtx_goods_new .xtx_panel_goods_1 .price {
font-size: 23px;
color: #CF4444;
}
.xtx_goods_new .xtx_panel_goods_1 small {
font-size: 16px;
}
/** 人气推荐 **/
.xtx_goods_popular {
padding-bottom: 42px;
}
.xtx_goods_popular .xtx_panel_goods_1 a {
transition: 0.5s;
}
.xtx_goods_popular .xtx_panel_goods_1 a:hover {
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
transform: translate(0, -3px);
}
.xtx_goods_popular .xtx_panel_goods_1 .title {
display: inline-block;
width: 100%;
line-height: 1;
margin: 20px 0 16px;
font-size: 22px;
}
.xtx_goods_popular .xtx_panel_goods_1 .alt {
font-size: 18px;
color: #999;
}
/** 热门品牌 **/
.xtx_goods_brand {
padding-bottom: 32px;
background-color: #f5f5f5;
}
.xtx_goods_brand .page-bar {
float: right;
}
.xtx_goods_brand .page-bar a {
display: inline-block;
width: 20px;
height: 20px;
line-height: 1;
margin-top: 10px;
background-color: #e2e2e2;
}
.xtx_goods_brand .page-bar a:hover,
.xtx_goods_brand .page-bar a.active {
background-color: #27BA9B;
}
.xtx_goods_brand .page-bar .prev {
margin-right: 5px;
background-position: -32px -106px;
transform: rotate(180deg);
}
.xtx_goods_brand .page-bar .next {
background-position: -32px -106px;
}
.xtx_goods_brand .xtx_goods {
height: 305px;
}
.xtx_goods_brand .xtx_goods li {
float: left;
font-size: 0;
}
.xtx_goods_brand .xtx_goods a {
margin-right: 10px;
}
.xtx_goods_brand .xtx_goods a img {
width: 240px;
height: 305px;
}
.xtx_goods_brand .xtx_goods a:last-child {
margin-right: 0;
}
/** 生鲜 **/
.xtx_goods_category {
padding-bottom: 80px;
}
/** 最新主题 **/
.xtx_goods_topic {
background-color: #f5f5f5;
padding-bottom: 52px;
}
.xtx_goods_topic li {
width: 406px;
margin-left: 11px;
transition: 0.5s;
float: left;
background: white;
}
.xtx_goods_topic li:hover {
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
transform: translate(0, -3px);
}
.xtx_goods_topic li:first-child {
margin-left: 0;
}
.xtx_goods_topic li a {
display: block;
height: 287px;
position: relative;
}
.xtx_goods_topic .meta {
width: 100%;
height: 100%;
color: #fff;
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent 50%);
position: absolute;
bottom: 0;
}
.xtx_goods_topic .meta .title {
height: 70px;
padding-left: 16px;
font-size: 22px;
position: absolute;
bottom: 0px;
}
.xtx_goods_topic .meta .title small {
display: block;
font-size: 19px;
color: #999;
}
.xtx_goods_topic .meta .price {
position: absolute;
bottom: 25px;
right: 16px;
display: block;
line-height: 1;
padding: 4px 8px 4px 7px;
color: #CF4444;
font-size: 17px;
background-color: #fff;
border-radius: 2px;
}
.xtx_goods_topic .meta .price small {
font-size: 15px;
}
.xtx_goods_topic .social {
height: 70px;
line-height: 70px;
padding: 0 20px;
font-size: 16px;
}
.xtx_goods_topic .social i {
display: inline-block;
width: 15px;
height: 14px;
margin-right: 5px;
position: relative;
top: 2px;
}
.xtx_goods_topic .social .like,
.xtx_goods_topic .social .liked,
.xtx_goods_topic .social .view {
float: left;
margin-right: 25px;
}
.xtx_goods_topic .social .reply {
float: right;
}
.xtx_goods_topic .social .like i {
background-position: -120px -110px;
}
.xtx_goods_topic .social .liked i {
background-position: -240px -110px;
}
.xtx_goods_topic .social .view i {
background-position: -160px -110px;
}
.xtx_goods_topic .social .reply i {
width: 17px;
height: 16px;
top: 4px;
background-position: -200px -110px;
}
.xtx-wrapper {
background: #f5f5f5;
line-height: 1.4;
}
.xtx-wrapper .container {
width: 1240px;
margin: 0 auto;
}
.xtx-wrapper .container .title {
height: 215px;
line-height: 215px;
font-size: 32px;
text-align: center;
font-weight: normal;
}
.xtx-bg-title {
width: 100%;
height: 180px;
padding-left: 213px;
background: no-repeat center / cover;
}
.xtx-bg-title h4 {
padding-top: 52px;
font-size: 32px;
font-weight: bold;
}
.xtx-bg-title p {
padding-top: 5px;
font-size: 20px;
}
.xtx-large-product {
margin-top: 40px;
display: flex;
justify-content: space-between;
}
.xtx-large-product .item {
width: 610px;
height: 420px;
background: white;
position: relative;
}
.xtx-large-product .item img {
width: 100%;
height: 320px;
display: block;
}
.xtx-large-product .item p {
padding-left: 55px;
}
.xtx-large-product .item p.tit {
padding-top: 22px;
font-size: 16px;
}
.xtx-large-product .item p.desc {
padding-top: 12px;
color: #999;
font-size: 14px;
}
.xtx-large-product .item .price {
position: absolute;
bottom: 37px;
right: 33px;
color: #CF4444;
font-size: 18px;
}
.xtx-large-product .item .tag {
width: 170px;
height: 40px;
border: 1px solid #fff;
border-radius: 4px;
position: absolute;
top: 17px;
left: 15px;
line-height: 40px;
color: #fff;
text-align: center;
font-size: 16px;
}
.xtx-mini-product {
padding-top: 40px;
padding-bottom: 20px;
}
.xtx-mini-product ul li {
width: 232px;
height: 320px;
float: left;
background: white;
margin-right: 20px;
text-align: center;
margin-bottom: 20px;
}
.xtx-mini-product ul li:nth-child(5n) {
margin-right: 0;
}
.xtx-mini-product ul li img {
width: 160px;
height: 160px;
display: block;
margin: 22px auto 0;
}
.xtx-mini-product ul li .tit {
padding-top: 23px;
font-size: 16px;
}
.xtx-mini-product ul li .desc {
padding-top: 12px;
color: #999;
}
.xtx-mini-product ul li .price {
font-size: 18px;
color: #CF4444;
padding-top: 16px;
}
.xtx-simpla-title {
height: 40px;
font-size: 28px;
text-align: center;
}
.xtx-large-brand {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.xtx-large-brand .item {
width: 610px;
height: 480px;
background: white;
margin-bottom: 40px;
}
.xtx-large-brand .item img {
width: 100%;
height: 320px;
display: block;
}
.xtx-large-brand .item .info {
padding: 0 35px;
position: relative;
}
.xtx-large-brand .item .info p.name {
padding-top: 22px;
padding-bottom: 12px;
font-size: 20px;
}
.xtx-large-brand .item .info p.name i {
width: 36px;
height: 18px;
line-height: 18px;
background: #27BA9B;
border-radius: 2px;
color: #fff;
font-size: 14px;
display: inline-block;
text-align: center;
}
.xtx-large-brand .item .info p.desc {
color: #999;
font-size: 14px;
height: 40px;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
padding-right: 40px;
}
.xtx-large-brand .item .info .price {
position: absolute;
top: 20px;
right: 35px;
color: #CF4444;
font-size: 18px;
}
.xtx-large-brand .item .comment {
padding: 15px 35px 0;
line-height: 40px;
color: #999;
}
.xtx-large-brand .item .comment .line {
width: 100%;
height: 1px;
background: #E4E4E4;
}
.xtx-large-brand .item .comment .red {
color: #CF4444;
}
.xtx-large-brand .item .comment .mr18 {
margin-right: 18px;
}
.xtx-elevator {
position: fixed;
left: 50%;
top: 280px;
z-index: 999;
margin-left: 640px;
opacity: 0;
transition: all .5s;
}
.xtx-elevator .xtx-elevator-list {
width: 60px;
height: 300px;
background: #fff;
float: right;
border: 1px solid #f5f5f5;
position: relative;
}
.xtx-elevator .xtx-elevator-list li {
height: 60px;
padding: 15px;
}
.xtx-elevator .xtx-elevator-list li a {
width: 30px;
height: 30px;
display: block;
}
.xtx-elevator .xtx-elevator-list li a:hover,
.xtx-elevator .xtx-elevator-list li a.active {
color: #27BA9B;
}
.xtx-elevator .xtx-elevator-list li a i {
display: block;
width: 16px;
height: 16px;
position: relative;
left: 4px;
background-position: 8px -106px;
font-size: 20px;
transform: rotate(-90deg);
}index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 项部导航 -->
<div class="xtx_topnav">
<div class="wrapper">
<!-- 顶部导航 -->
<ul class="xtx_navs">
<li>
<a href="javascript:;">请先登录</a>
</li>
<li>
<a href="javascript:;">免费注册</a>
</li>
<li>
<a href="javascript:;">我的订单</a>
</li>
<li>
<a href="javascript:;">会员中心</a>
</li>
<li>
<a href="javascript:;">帮助中心</a>
</li>
<li>
<a href="javascript:;">在线客服</a>
</li>
<li>
<a href="javascript:;">
<i class="mobile sprites"></i>
手机版
</a>
</li>
</ul>
</div>
</div>
<!-- 头部 -->
<div class="xtx_header">
<div class="wrapper">
<!-- 网站Logo -->
<h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
<!-- 主导航 -->
<div class="xtx_navs">
<ul class="clearfix">
<li>
<a href="javascript:;">首页</a>
</li>
<li>
<a href="javascript:;">生鲜</a>
</li>
<li>
<a href="javascript:;">美食</a>
</li>
<li>
<a href="javascript:;">餐厨</a>
</li>
<li>
<a href="javascript:;">电器</a>
</li>
<li>
<a href="javascript:;">居家</a>
</li>
<li>
<a href="javascript:;">洗护</a>
</li>
<li>
<a href="javascript:;">孕婴</a>
</li>
<li>
<a href="javascript:;">服装</a>
</li>
</ul>
</div>
<!-- 站内搜索 -->
<div class="xtx_search clearfix">
<!-- 购物车 -->
<a href="javascript:;" class="xtx_search_cart sprites">
<i>2</i>
</a>
<!-- 搜索框 -->
<div class="xtx_search_wrapper">
<input type="text" placeholder="搜一搜">
</div>
</div>
</div>
</div>
<!-- 分类及焦点图 -->
<div class="xtx_entry">
<div class="wrapper">
<!-- 分类 -->
<div class="xtx_category">
<!-- 顶级分类 -->
<ul class="xtx_category_super">
<li>
<a href="javascript:;">
生鲜
<small>水果</small>
<small>蔬菜</small>
</a>
<i class="sprites"></i>
</li>
<li class="active">
<a href="javascript:;">
美食
<small>面点</small>
<small>干果</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
电器
<small>数码产品</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
居家
<small>床品</small>
<small>四件套</small>
<small>被枕</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
洗护
<small>洗发洗护</small>
<small>美妆</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
孕婴
<small>奶粉</small>
<small>玩具</small>
<small>辅食</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
餐橱
<small>数码产品</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
服饰
<small>女装</small>
<small>男装</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
杂货
<small>户外</small>
<small>图书</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
品牌
<small>品牌制造</small>
</a>
<i class="sprites"></i>
</li>
</ul>
<!-- 子分类 -->
<div class="xtx_category_subset">
</div>
</div>
<!-- 焦点图 -->
<div class="xtx_banner">
<ul>
<li>
<a href="javascript:;">
<img src="./uploads/banner_1.png" alt="">
</a>
</li>
</ul>
<!-- 切换按钮 -->
<a href="javascript:;" class="prev sprites"></a>
<a href="javascript:;" class="next sprites"></a>
<!-- 指示器 -->
<div class="indicator">
<span></span>
<span></span>
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
<!-- 新鲜好物 -->
<div class="xtx_goods_new xtx_panel">
<div class="wrapper">
<!-- 面板头部 -->
<div class="xtx_panel_header">
<h3>新鲜好物<small>新鲜出炉 品质靠谱</small></h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites"></i>
</a>
</div>
<!-- 商品列表 -->
<div class="xtx_panel_goods_1">
<a href="javascript:;">
<img src="./uploads/new_goods_1.jpg" alt="">
<span class="name">睿米无线吸尘器F8</span>
<span class="price"><small>￥</small>899</span>
</a>
<a href="javascript:;">
<img src="./uploads/new_goods_2.jpg" alt="">
<span class="name">智能环绕3D空调</span>
<span class="price"><small>￥</small>1299</span>
</a>
<a href="javascript:;">
<img src="./uploads/new_goods_3.jpg" alt="">
<span class="name">广东软软糯米煲仔饭</span>
<span class="price"><small>￥</small>129</span>
</a>
<a href="javascript:;">
<img src="./uploads/new_goods_4.jpg" alt="">
<span class="name">罗西机械智能手表</span>
<span class="price"><small>￥</small>3399</span>
</a>
</div>
</div>
</div>
<!-- 人气推荐 -->
<div class="xtx_goods_popular xtx_panel">
<div class="wrapper">
<!-- 面板头部 -->
<div class="xtx_panel_header">
<h3>人气推荐<small>人气爆款 不容错过</small></h3>
</div>
<!-- 商品列表 -->
<div class="xtx_panel_goods_1">
<a href="javascript:;">
<img src="./uploads/popular_1.jpg">
<span class="title">特惠推荐</span>
<span class="alt">我猜得到 你的需要</span>
</a>
<a href="./index-hot.html">
<img src="./uploads/popular_2.jpg">
<span class="title">爆款推荐</span>
<span class="alt">人气好物推荐</span>
</a>
<a href="./index-one.html">
<img src="./uploads/popular_3.jpg">
<span class="title">场景使用一站买全</span>
<span class="alt">编辑精心整理推荐</span>
</a>
<a href="javascript:;">
<img src="./uploads/popular_4.jpg">
<span class="title">领券中心</span>
<span class="alt">发现更多超值优惠券</span>
</a>
</div>
</div>
</div>
<!-- 热门品牌 -->
<div class="xtx_goods_brand xtx_panel">
<div class="wrapper">
<div class="xtx_panel_header">
<h3>热门品牌<small>国际经典 品质保证</small></h3>
<div class="page-bar">
<a href="javascript:;" class="prev sprites"></a>
<a href="javascript:;" class="next sprites active"></a>
</div>
</div>
<!-- 商品列表 -->
<div class="xtx_goods">
<ul>
<li>
<a href="./index-brand.html">
<img src="./uploads/brand_goods_1.jpg" alt="">
</a>
<a href="./brand-list.html">
<img src="./uploads/brand_goods_2.jpg" alt="">
</a>
<a href="javascript:;">
<img src="./uploads/brand_goods_3.jpg" alt="">
</a>
<a href="javascript:;">
<img src="./uploads/brand_goods_4.jpg" alt="">
</a>
<a href="javascript:;">
<img src="./uploads/brand_goods_5.jpg" alt="">
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 分类商品 -->
<div class="xtx_goods_category xtx_panel">
<div class="wrapper">
<!-- 生鲜 -->
<div class="xtx_panel_header">
<h3>生鲜</h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites"></i>
</a>
<div class="tabs-bar">
<a href="javascript:;" class="active">水果</a>
<a href="javascript:;">蔬菜</a>
<a href="javascript:;">肉禽蛋</a>
<a href="javascript:;">裤装</a>
<a href="javascript:;">衬衫</a>
<a href="javascript:;">内衣</a>
</div>
</div>
<!-- 商品列表 -->
<div class="xtx_panel_goods_2">
<ul class="clearfix">
<li>
<a href="javascript:;">
<img src="./uploads/fresh_goods_cover.jpg" alt="">
</a>
<div class="label">
<span>生鲜馆</span>
<span>全场3件8折</span>
</div>
</li>
<li>
<!-- 商品图片 -->
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_1.jpg" alt="">
</div>
</a>
<!-- 商品信息 -->
<div class="meta">
<p class="name">美威 智利原味三文鱼排 240g/袋 4片装</p>
<p class="flag">海鲜年货</p>
<p class="price"><small>￥</small>59</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_2.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只</p>
<p class="flag">火锅食材</p>
<p class="price"><small>￥</small>71.9</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_3.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">三都港 冷冻无公害黄花鱼 700g 2条 袋装</p>
<p class="flag">海鲜水产</p>
<p class="price"><small>￥</small>49.9</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_4.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">渔公码头 大连鲜食入味 即食海参 辽参刺参 调味海</p>
<p class="flag">海鲜年货</p>
<p class="price"><small>￥</small>899</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_5.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">越南进口白心火龙果4个 装 标准果 单果400-550g </p>
<p class="flag"></p>
<p class="price"><small>￥</small>29</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_6.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">广西沃柑 柑橘1.5kg</p>
<p class="flag">新鲜水果</p>
<p class="price"><small>￥</small>59</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_7.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">进口 牛油果 6个装 单果重约130-180g</p>
<p class="flag">新鲜水果</p>
<p class="price"><small>￥</small>39.9</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_8.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">泰国进口山竹5A级 500g </p>
<p class="flag">新鲜水果</p>
<p class="price"><small>￥</small>29.9</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
</ul>
</div>
<!-- 服饰 -->
<div class="xtx_panel_header">
<h3>服饰</h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites"></i>
</a>
<div class="tabs-bar">
<a href="javascript:;" class="active">行李箱</a>
<a href="javascript:;">男士包袋</a>
<a href="javascript:;">女士包袋</a>
<a href="javascript:;">钱包及小提袋</a>
<a href="javascript:;">男鞋</a>
<a href="javascript:;">女鞋</a>
<a href="javascript:;">拖鞋</a>
</div>
</div>
<!-- 商品列表 -->
<div class="xtx_panel_goods_2">
<ul class="clearfix">
<li>
<a href="javascript:;">
<img src="./uploads/clothes_goods_cover.jpg" alt="">
</a>
<div class="label">
<span>服饰馆</span>
<span>3折狂欢</span>
</div>
</li>
<li>
<!-- 商品图片 -->
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_1.jpg" alt="">
</div>
</a>
<!-- 商品信息 -->
<div class="meta">
<p class="name">人本秋季厚底帆布鞋 韩版低帮增高学生</p>
<p class="flag"></p>
<p class="price"><small>￥</small>55</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_2.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">迪士尼真皮针扣表带宽度 14-16mm规格双色压纹 女表带</p>
<p class="flag">海鲜年货</p>
<p class="price"><small>￥</small>20.9</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_3.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">三都港 冷冻无公害黄花鱼 700g 2条 袋装</p>
<p class="flag">海鲜水产</p>
<p class="price"><small>￥</small>209</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_4.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">ONLY夏季新款高腰宽松 七分阔腿裙裤休闲裤</p>
<p class="flag"></p>
<p class="price"><small>￥</small>274.5</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_5.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">拉夫劳伦t恤男正品 </p>
<p class="flag">圆领短袖</p>
<p class="price"><small>￥</small>99</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_6.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">李宁跑步鞋男鞋空气 弧2018春季款</p>
<p class="flag"></p>
<p class="price"><small>￥</small>79</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_7.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">Dickies男鞋2020春季 英伦休闲工装鞋低帮</p>
<p class="flag"></p>
<p class="price"><small>￥</small>179</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/clothes_goods_8.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">北极绒春夏季纯棉背心 男士修身纯色打底</p>
<p class="flag"></p>
<p class="price"><small>￥</small>69</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
</ul>
</div>
<!-- 餐厨 -->
<div class="xtx_panel_header">
<h3>餐厨</h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites"></i>
</a>
<div class="tabs-bar">
<a href="javascript:;" class="active">水果</a>
<a href="javascript:;">蔬菜</a>
<a href="javascript:;">肉禽蛋</a>
<a href="javascript:;">裤装</a>
<a href="javascript:;">衬衫</a>
<a href="javascript:;">内衣</a>
</div>
</div>
<!-- 商品列表 -->
<div class="xtx_panel_goods_2">
<ul class="clearfix">
<li>
<a href="javascript:;">
<img src="./uploads/kitchen_goods_cover.jpg" alt="">
</a>
<div class="label">
<span>餐厨馆</span>
<span>大额优惠<br>等你来拿</span>
</div>
</li>
<li>
<!-- 商品图片 -->
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_1.jpg" alt="">
</div>
</a>
<!-- 商品信息 -->
<div class="meta">
<p class="name">创意可爱不锈钢便携餐具 套装筷子便携三件套</p>
<p class="flag"></p>
<p class="price"><small>￥</small>5.9</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_2.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">三金西瓜霜竹炭牙刷软毛 成人家用家庭装</p>
<p class="flag"></p>
<p class="price"><small>￥</small>20.9</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_3.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">朴（TOPOTO）大卫免手 洗平板拖把拓扑懒人木地 板刮刮乐桶拖布</p>
<p class="flag"></p>
<p class="price"><small>￥</small>129</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_4.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">ONLY夏季新款高腰宽松 七分阔腿裙裤休闲裤</p>
<p class="flag"></p>
<p class="price"><small>￥</small>274.5</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_5.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">金纺不伤手柔顺剂 妈妈的选择</p>
<p class="flag"></p>
<p class="price"><small>￥</small>29</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_6.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">洁成绵柔抹布洗碗巾超 值5片装 洗锅刷碗</p>
<p class="flag"></p>
<p class="price"><small>￥</small>10.9</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_7.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">大卫双驱动旋转拖把桶 免手洗拓扑拖布地拖墩布 </p>
<p class="flag"></p>
<p class="price"><small>￥</small>159</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/kitchen_goods_8.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">斧头牌（AXE）去污地板 清洁剂2L 柠檬清香 </p>
<p class="flag">海鲜年货</p>
<p class="price"><small>￥</small>22.9</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
</ul>
</div>
<!-- 居家 -->
<div class="xtx_panel_header">
<h3>居家</h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites"></i>
</a>
<div class="tabs-bar">
<a href="javascript:;" class="active">咖啡具</a>
<a href="javascript:;">水具酒具</a>
<a href="javascript:;">锅具</a>
<a href="javascript:;">餐具</a>
<a href="javascript:;">功能厨具</a>
<a href="javascript:;">茶具</a>
<a href="javascript:;">清洁保鲜</a>
</div>
</div>
<!-- 商品列表 -->
<div class="xtx_panel_goods_2">
<ul class="clearfix">
<li>
<a href="javascript:;">
<img src="./uploads/home_goods_cover.jpg" alt="">
</a>
<div class="label">
<span>居家馆</span>
<span>全场满减</span>
</div>
</li>
<li>
<!-- 商品图片 -->
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_1.jpg" alt="">
</div>
</a>
<!-- 商品信息 -->
<div class="meta">
<p class="name">菜鸟异常专用链接 非请 勿拍</p>
<p class="flag">海鲜年货</p>
<p class="price"><small>￥</small>8999</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_2.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">【中盐软水盐】汉斯希 尔家用软水机适配</p>
<p class="flag"></p>
<p class="price"><small>￥</small>65</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_3.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">云米净水壶家用直饮台式 净水机渗透过滤自来水</p>
<p class="flag">海鲜年货</p>
<p class="price"><small>￥</small>129</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_4.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">ztk恒温调奶器配件玻璃壶 炖盅</p>
<p class="flag">海鲜年货</p>
<p class="price"><small>￥</small>129</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_5.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">荞麦枕头单人枕芯双人 护颈椎枕头芯</p>
<p class="flag"></p>
<p class="price"><small>￥</small>29</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_6.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">Bear/小熊 LLJ-B04G1 家用多功能切碎机 电动</p>
<p class="flag">料理机</p>
<p class="price"><small>￥</small>10.9</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_7.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">荣事达薄饼机春饼春卷皮 家用博饼机电饼铛 </p>
<p class="flag"></p>
<p class="price"><small>￥</small>159</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/home_goods_8.jpg" alt="">
</div>
</a>
<div class="meta">
<p class="name">美式双人实木床 红实木 显档次</p>
<p class="flag"></p>
<p class="price"><small>￥</small>22.9</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 最新主题 -->
<div class="xtx_goods_topic xtx_panel">
<div class="wrapper">
<div class="xtx_panel_header">
<h3>最新专题</h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites"></i>
</a>
</div>
<div class="xtx_topic">
<ul class="clearfix">
<li>
<a href="javascript:;">
<img src="./uploads/topic_goods_1.jpg" alt="">
<div class="meta">
<p class="title">
吃这些美食才不算辜负自己
<small>餐厨起居洗护好物</small>
</p>
<span class="price"><small>￥</small>29.9起</span>
</div>
</a>
<div class="social">
<span class="like">
<i class="sprites"></i>1220
</span>
<span class="view">
<i class="sprites"></i>1800
</span>
<span class="reply">
<i class="sprites"></i>1220
</span>
</div>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/topic_goods_2.jpg" alt="">
<div class="meta">
<p class="title">
吃这些美食才不算辜负自己
<small>餐厨起居洗护好物</small>
</p>
<span class="price"><small>￥</small>29.9起</span>
</div>
</a>
<div class="social">
<span class="liked">
<i class="sprites"></i>1220
</span>
<span class="view">
<i class="sprites"></i>1800
</span>
<span class="reply">
<i class="sprites"></i>1220
</span>
</div>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/topic_goods_3.jpg" alt="">
<div class="meta">
<p class="title">
吃这些美食才不算辜负自己
<small>餐厨起居洗护好物</small>
</p>
<span class="price"><small>￥</small>29.9起</span>
</div>
</a>
<div class="social">
<span class="like">
<i class="sprites"></i>1220
</span>
<span class="view">
<i class="sprites"></i>1800
</span>
<span class="reply">
<i class="sprites"></i>1220
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 公共底部 -->
<div class="xtx_footer clearfix">
<div class="wrapper">
<!-- 联系我们 -->
<div class="contact clearfix">
<dl>
<dt>客户服务</dt>
<dd class="chat">在线客服</dd>
<dd class="feedback">问题反馈</dd>
</dl>
<dl>
<dt>关注我们</dt>
<dd class="weixin">公众号</dd>
<dd class="weibo">微博</dd>
</dl>
<dl>
<dt>下载APP</dt>
<dd class="qrcode">
<img src="./uploads/qrcode.jpg">
</dd>
<dd class="download">
<span>扫描二维码</span>
<span>立马下载APP</span>
<a href="javascript:;">下载页面</a>
</dd>
</dl>
<dl>
<dt>服务热线</dt>
<dd class="hotline">
400-0000-000
<small>周一至周日 8:00-18:00</small>
</dd>
</dl>
</div>
</div>
<!-- 其它 -->
<div class="extra">
<div class="wrapper">
<!-- 口号 -->
<div class="slogan">
<a href="javascript:;" class="price">价格亲民</a>
<a href="javascript:;" class="express">物流快捷</a>
<a href="javascript:;" class="quality">品质新鲜</a>
</div>
<!-- 版权信息 -->
<div class="copyright">
<p>
<a href="javascript:;">关于我们</a>
<a href="javascript:;">帮助中心</a>
<a href="javascript:;">售后服务</a>
<a href="javascript:;">配送与验收</a>
<a href="javascript:;">商务合作</a>
<a href="javascript:;">搜索推荐</a>
<a href="javascript:;">友情链接</a>
</p>
<p>CopyRight © 小兔鲜儿</p>
</div>
</div>
</div>
</div>
<!-- 电梯 -->
<div class="xtx-elevator">
<ul class="xtx-elevator-list">
<li><a href="javascript:;" data-name="new">新鲜好物</a></li>
<li><a href="javascript:;" data-name="popular">人气推荐</a></li>
<li><a href="javascript:;" data-name="brand">热门品牌</a></li>
<li><a href="javascript:;" data-name="topic">最新专题</a></li>
<li><a href="javascript:;" id="backTop"><i class="sprites"></i>顶部</a></li>
</ul>
</div>
<script>
(function () {
const entry = document.querySelector('.xtx_entry')
const elevator = document.querySelector('.xtx-elevator')
window.addEventListener('scroll', function () {
const n = document.documentElement.scrollTop
elevator.style.opacity = n >= entry.offsetTop ? 1 : 0
})
const backTop = document.querySelector('#backTop')
backTop.addEventListener('click', function () {
window.scrollTo(0, 0)
})
})();
(function () {
const list = document.querySelector('.xtx-elevator-list')
list.addEventListener('click', function (e) {
if (e.target.tagName === 'A' && e.target.dataset.name) {
const old = document.querySelector('.xtx-elevator-list .active')
if (old) old.classList.remove('active')
e.target.classList.add('active')
const top = document.querySelector(`.xtx_goods_${e.target.dataset.name}`).offsetTop
document.documentElement.scrollTop = top
}
})
window.addEventListener('scroll', function () {
const old = document.querySelector('.xtx-elevator-list .active')
if (old) old.classList.remove('active')
const news = document.querySelector('.xtx_goods_new')
const popular = document.querySelector('.xtx_goods_popular')
const brand = document.querySelector('.xtx_goods_brand')
const topic = document.querySelector('.xtx_goods_topic')
const n = document.documentElement.scrollTop
if (n >= news.offsetTop && n < popular.offsetTop) {
document.querySelector('[data-name=new]').classList.add('active')
} else if (n >= popular.offsetTop && n < brand.offsetTop) {
document.querySelector('[data-name=popular]').classList.add('active')
} else if (n >= brand.offsetTop && n < topic.offsetTop) {
document.querySelector('[data-name=brand]').classList.add('active')
} else if (n >= topic.offsetTop) {
document.querySelector('[data-name=topic]').classList.add('active')
}
})
})();
</script>
</body>
</html>
1355
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
