不用框架！仅用HTML+CSS+JS手搓淘宝/京东首页
原载 来源
购物车界面
myCart.css
@charset "gb2312";
/* CSS Document */
body{
margin:0px;
padding:0px;
font-size:12px;
line-height:20px;
color:#333;
}
ul,li,ol,h1,dl,dd{
list-style:none;
margin:0px;
padding:0px;
}
a{
color:#1965b3;
text-decoration: none;
}
a:hover{
color:#CD590C;
text-decoration:underline;
}
img{
border:0px;
vertical-align:middle;
}
#header{
height:40px;
margin:10px auto 10px auto;
width:800px;
clear:both;
}
#nav{
margin:10px auto 10px auto;
width:800px;
clear:both;
}
#navlist{
width:800px;
margin:0px auto 0px auto;
height:23px;
}
#navlist li{
float:left;
height:23px;
line-height:26px;
}
.navlist_red_left{
background-image:url(../images/taobao_bg.png);
background-repeat:no-repeat;
background-position:-12px -92px;
width:3px;
}
.navlist_red{
background-color:#ff6600;
text-align:center;
font-size:14px;
font-weight:bold;
color:#FFF;
width:130px;
}
.navlist_red_arrow{
background-color:#ff6600;
background-image:url(../images/taobao_bg.png);
background-repeat:no-repeat;
background-position:0px 0px;
width:13px;
}
.navlist_gray{
background-color:#e4e4e4;
text-align:center;
font-size:14px;
font-weight:bold;
width:150px;
}
.navlist_gray_arrow{
background-color:#e4e4e4;
background-image:url(../images/taobao_bg.png);
background-repeat:no-repeat;
background-position:0px 0px;
width:13px;
}
.navlist_gray_right{
background-image:url(../images/taobao_bg.png);
background-repeat:no-repeat;
background-position:-12px -138px;
width:3px;
}
#content{
width:800px;
margin:10px auto 5px auto;
clear:both;
}
.title_1{
text-align:center;
width:50px;
}
.title_2{
text-align:center;
}
.title_3{
text-align:center;
width:80px;
}
.title_4{
text-align:center;
width:80px;
}
.title_5{
text-align:center;
width:100px;
}
.title_6{
text-align:center;
width:80px;
}
.title_7{
text-align:center;
width:60px;
}
.line{
background-color:#a7cbff;
height:3px;
}
.shopInfo{
padding-left:10px;
height:35px;
vertical-align:bottom;
}
.num_input{
border:solid 1px #666;
width:25px;
height:15px;
text-align:center;
}
.cart_td_1,.cart_td_2,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7,.cart_td_8{
background-color:#e2f2ff;
border-bottom:solid 1px #d1ecff;
border-top:solid 1px #d1ecff;
text-align:center;
padding:5px;
}
.cart_td_1,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7{
border-right:solid 1px #FFF;
}
.cart_td_3{
text-align:left;
}
.cart_td_4{
font-weight:bold;
}
.cart_td_7{
font-weight:bold;
color:#fe6400;
font-size:14px;
}
.hand{
cursor:pointer;
}
.shopend{
text-align:right;
padding-right:10px;
padding-bottom:10px;
}
.yellow{
font-weight:bold;
color:#fe6400;
font-size:18px;
line-height:40px;
}myCar.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝购物车页面</title>
<link href="css/myCart.css" rel="stylesheet" />
</head>
<body>
<div id="header"><img src="images/taobao_logo.gif" alt="logo" /></div>
<div id="nav">您的位置：<a href="#">首页</a> > <a href="#">我的淘宝</a> > 我的购物车</div>
<div id="navlist">
<ul>
<li class="navlist_red_left"></li>
<li class="navlist_red">1. 查看购物车</li>
<li class="navlist_red_arrow"></li>
<li class="navlist_gray">2. 确认订单信息</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">3. 付款到支付宝</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">4. 确认收货</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">5. 评价</li>
<li class="navlist_gray_right"></li>
</ul>
</div>
<div id="content">
<form action="" method="post" name="myform">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">
<tr>
<td class="title_1"><input id="allCheckBox" type="checkbox" value=""/>全选</td>
<td class="title_2" colspan="2">店铺宝贝</td>
<td class="title_3">获积分</td>
<td class="title_4">单价（元）</td>
<td class="title_5">数量</td>
<td class="title_6">小计（元）</td>
<td class="title_7">操作</td>
</tr>
<tr>
<td colspan="8" class="line"></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">纤巧百媚时尚鞋坊</a> 卖家：<a href="#">纤巧百媚</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
</tr>
<tr id="product1">
<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product1"/></td>
<td class="cart_td_2"><img src="images/taobao_cart_01.jpg" alt="shopping"/></td>
<td class="cart_td_3"><a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a><br />
颜色：棕色 尺码：37<br />
保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td>
<td class="cart_td_4">5</td>
<td class="cart_td_5">138.00</td>
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_1" type="text" value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">香港我的美丽日记</a> 卖家：<a href="#">lokemick2009</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
</tr>
<tr id="product2">
<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product2" /></td>
<td class="cart_td_2"><img src="images/taobao_cart_02.jpg" alt="shopping"/></td>
<td class="cart_td_3"><a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g</a><br />
保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td>
<td class="cart_td_4">12</td>
<td class="cart_td_5">265.00</td>
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_2" type="text" value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">实体经营</a> 卖家：<a href="#">林颜店铺</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
</tr>
<tr id="product3">
<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product3"/></td>
<td class="cart_td_2"><img src="images/taobao_cart_03.jpg" alt="shopping"/></td>
<td class="cart_td_3"><a href="#">蝶妆海?蓝清滢粉底液10#（象牙白）</a><br />
保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td>
<td class="cart_td_4">3</td>
<td class="cart_td_5">85.00</td>
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_3" type="text" value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">红豆豆的小屋</a> 卖家：<a href="#">taobao豆豆</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
</tr>
<tr id="product4">
<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product4"/></td>
<td class="cart_td_2"><img src="images/taobao_cart_04.jpg" alt="shopping"/></td>
<td class="cart_td_3"><a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a><br />
保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td>
<td class="cart_td_4">12</td>
<td class="cart_td_5">12.00</td>
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_4" type="text" value="2" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td colspan="3"><a id="deleteAll" href="javascript:void(0);"><img src="images/taobao_del.jpg" alt="delete"/></a></td>
<td colspan="5" class="shopend">商品总价（不含运费）：<label id="total" class="yellow"></label> 元<br />
可获积分 <label class="yellow" id="integral"></label> 点<br />
<input name=" " type="image" src="images/taobao_subtn.jpg" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
素材自取 
补充js 逻辑实现界面功能
window.onload = function () {
// 获取结算按钮并添加点击事件
var checkoutButton = document.getElementById('purchase');
checkoutButton.addEventListener('click', function (event) {
event.preventDefault(); // 阻止表单提交的默认操作
var total = document.getElementById('total').textContent;
var points = document.getElementById('integral').textContent;
alert('您的订单总价是: ' + total + '元，您将获得积分: ' + points + '点。');
});
};
// 当 DOM 完全加载后执行
document.addEventListener('DOMContentLoaded', function() {
// 获取全选复选框的 DOM 元素
var allCheckBox = document.getElementById('allCheckBox');
// 获取所有商品前的复选框的 DOM 元素
var itemCheckBoxes = document.querySelectorAll('input[name="cartCheckBox"]');
// 获取“删除所选”按钮的 DOM 元素
var deleteAllButton = document.getElementById('deleteAll');
// 绑定点击事件到所有删除链接
var deleteLinks = document.querySelectorAll('.delete-item');
// 获取所有增加按钮并添加点击事件
var addButtons = document.querySelectorAll('.cart_td_6 .hand[alt="add"]');
// 获取所有减少按钮并添加点击事件
var minusButtons = document.querySelectorAll('.cart_td_6 .hand[alt="minus"]');
// 更新总计和积分的函数
function updateTotal() {
var total = 0;
var points = 0;
var productItems = document.querySelectorAll('.product-item');
productItems.forEach(function (item) {
var price = parseFloat(item.querySelector('.cart_td_5').textContent);
var point = parseFloat(item.querySelector('.cart_td_4').textContent);
var quantity = parseInt(item.querySelector('.num_input').value, 10);
var subtotal = price * quantity;
var subpoint = point * quantity;
// 总价
total += subtotal;
// 积分
points += subpoint;
// 更新小计
item.querySelector('.cart_td_7').textContent = subtotal.toFixed(2);
});
// 更新页面上的总价和积分
document.getElementById('total').textContent = total.toFixed(2);
document.getElementById('integral').textContent = points;
}
// 获取所有增加按钮并添加点击事件
var addButtons = document.querySelectorAll('.cart_td_6 .hand[alt="add"]');
addButtons.forEach(function (addButton) {
addButton.addEventListener('click', function () {
var input = this.previousElementSibling;
var newValue = parseInt(input.value, 10) + 1;
input.value = newValue;
updateTotal();
});
});
// 获取所有减少按钮并添加点击事件
minusButtons.forEach(function (minusButton) {
minusButton.addEventListener('click', function () {
var input = this.nextElementSibling;
var newValue = parseInt(input.value, 10) - 1;
if (newValue >= 1) { // 防止数量小于1
input.value = newValue;
updateTotal();
}
});
});
// 页面加载时也更新一次总计和积分
updateTotal();
// 更新全选复选框的状态
function updateAllCheckBox() {
var allChecked = Array.from(itemCheckBoxes).every(function(cb) {
return cb.checked;
});
allCheckBox.checked = allChecked;
var anyChecked = Array.from(itemCheckBoxes).some(function(cb) {
return cb.checked;
});
// 如果没有任何商品被选中，全选复选框也应该反映这一状态
allCheckBox.indeterminate = anyChecked && !allChecked;
}
// 点击全选框时，所有商品前的框样式变为被选中
allCheckBox.addEventListener('change', function() {
// 设置每个商品前的复选框的状态与全选复选框的状态相同
itemCheckBoxes.forEach(function(checkbox) {
checkbox.checked = allCheckBox.checked;
});
});
// 如果所有商品前的框样式都为选中，此时全选功能框要变为选中
itemCheckBoxes.forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
// 检查是否所有的商品复选框都被选中
var allChecked = Array.from(itemCheckBoxes).every(function(cb) {
return cb.checked;
});
// 如果都被选中，则设置全选复选框为选中状态；否则，设置为未选中状态
allCheckBox.checked = allChecked;
});
});
//删除该商品
deleteLinks.forEach(function(link) {
link.addEventListener('click', function(event) {
// 阻止链接的默认行为
event.preventDefault();
// 获取当前商品的元素
var productItem = this.closest('.product-item');
// 获取关联的店铺ID
var shopId = productItem.getAttribute('data-shop-id');
// 删除商品行
productItem.remove();
// 检查是否还有其他商品属于这个店铺
var remainingItems = document.querySelectorAll('.product-item[data-shop-id="' + shopId + '"]');
if(remainingItems.length === 0) {
// 如果没有，也删除店铺行
var shopItem = document.getElementById(shopId);
shopItem.remove();
}
// 更新总计等信息
updateTotal();
// 更新全选框信息
updateAllCheckBox();
});
});
deleteAllButton.addEventListener('click', function() {
// 获取所有被选中的商品复选框
var selectedCheckboxes = document.querySelectorAll('input[name="cartCheckBox"]:checked');
selectedCheckboxes.forEach(function(checkbox) {
// 获取当前商品的元素
var productItem = checkbox.closest('.product-item');
// 获取关联的店铺ID
var shopId = productItem.getAttribute('data-shop-id');
// 删除商品行
productItem.remove();
// 检查是否还有其他商品属于这个店铺
var remainingItems = document.querySelectorAll('.product-item[data-shop-id="' + shopId + '"]');
if(remainingItems.length === 0) {
// 如果没有，也删除店铺行
var shopItem = document.getElementById(shopId);
shopItem.remove();
}
});
// 更新总计等信息
updateTotal();
// 更新全选框信息
updateAllCheckBox();
});
// 添加表单提交事件监听器
registerForm.onsubmit = function(event) {
// 阻止表单默认提交行为
event.preventDefault();
// 获取结算按钮并添加点击事件
var checkoutButton = document.getElementById('purchase');
checkoutButton.addEventListener('click', function (event) {
event.preventDefault(); // 阻止表单提交的默认操作
var total = document.getElementById('total').textContent;
var points = document.getElementById('integral').textContent;
alert('您的订单总价是: ' + total + '元，您将获得积分: ' + points + '点。');
});
};
});
轮播图实现
slider.css
* {
box-sizing: border-box;
}
body, html {
padding: 0;
margin-top: 30px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-container {
position: relative;
width: 190px; /* 调整为适当的宽度 */
height: 450px; /* 调整为适当的高度 */
overflow: hidden;
}
.carousel-slide {
position: relative;
}
.carousel-item {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
z-index: 1;
transition: opacity 0.5s, z-index 0s 0.5s;
}
.carousel-item img{
width: 190px;
height: 150px;
}
.carousel-item img:hover {
opacity: 0.5;
transition: opacity 0.3s ease-in-out; /* 平滑的过渡效果 */
}
.carousel-item.active {
opacity: 1;
z-index: 2;
}
/* 按钮通用样式 */
.carousel-container button {
position: absolute;
width: 25px; /* 半圆的直径 */
height: 35px; /* 半圆的高度 */
opacity: 0; /* 默认透明度为 0，即不可见 */
visibility: hidden; /* 默认不可见 */
transition: opacity 0.3s ease, visibility 0.3s ease;
background-color: #bac2be;
color: white;
border: none;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
z-index: 3;
border-radius: 20px 0 0 20px; /* 左边半圆形 */
outline: none;
}
.carousel-container:hover button {
opacity: 1; /* 鼠标悬停时透明度为 1，即完全可见 */
visibility: visible; /* 鼠标悬停时变为可见 */
}
.carousel-container button:hover {
background-color: #7e7e86; /* 按钮颜色 */
transition: opacity 0.3s ease-in-out; /* 平滑的过渡效果 */
}
#nextBtn {
left: 0;
border-radius: 0 20px 20px 0; /* 右边半圆形 */
}
#prevBtn {
right: 0;
}
slider.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东首页轮播图</title>
<link rel="stylesheet" href="./css/slider.css">
<script src="./js/index.js" defer></script>
</head>
<body>
<div class="carousel-container">
<div class="carousel-slide">
<div class="carousel-item">
<img src="./images/images1-1.jpg" alt="Image 9">
<img src="./images/images1-2.jpg" alt="Image 1">
<img src="./images/images1-3.jpg" alt="Image 2">
</div>
<div class="carousel-item">
<img src="./images/images2-1.jpg" alt="Image 3">
<img src="./images/images2-2.jpg" alt="Image 4">
<img src="./images/images2-3.jpg" alt="Image 5">
</div>
<div class="carousel-item">
<img src="./images/images3-1.jpg" alt="Image 3">
<img src="./images/images3-2.jpg" alt="Image 4">
<img src="./images/images3-3.jpg" alt="Image 5">
</div>
</div>
<button id="prevBtn">❯</button>
<button id="nextBtn">❮</button>
</div>
</body>
</html>
index.js
document.addEventListener('DOMContentLoaded', function() {
var carouselItems = document.querySelectorAll('.carousel-item');
var prevBtn = document.getElementById('prevBtn');
var nextBtn = document.getElementById('nextBtn');
var currentIndex = 0;
function updateCarousel() {
carouselItems.forEach(function(item, index) {
item.classList.remove('active');
if(index === currentIndex) {
item.classList.add('active');
}
});
}
prevBtn.addEventListener('click', function() {
currentIndex = (currentIndex - 1 + carouselItems.length) % carouselItems.length;
updateCarousel();
});
nextBtn.addEventListener('click', function() {
currentIndex = (currentIndex + 1) % carouselItems.length;
updateCarousel();
});
// 初始化轮播图
updateCarousel();
});
素材 
选项卡切换功能
tabbar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tab Bar with Products</title>
<link rel="stylesheet" href="./css/tabbar.css">
</head>
<body>
<div class="tab-bar">
<button class="tab-link" data-product="Product1" onclick="openTab(event, 'Product1')">玩具乐趣</button>
<button class="tab-link" data-product="Product2" onclick="openTab(event, 'Product2')">中外名酒</button>
<button class="tab-link" data-product="Product3" onclick="openTab(event, 'Product3')">个人护理</button>
<button class="tab-link" data-product="Product4" onclick="openTab(event, 'Product4')">食品饮料</button>
<button class="tab-link" data-product="Product5" onclick="openTab(event, 'Product5')">家纸轻品</button>
<button class="tab-link" data-product="Product6" onclick="openTab(event, 'Product6')">生鲜冷冻</button>
</div>
<div id="Product1" class="tab-content">
<!-- 商品信息页-->
<div class="product-grid">
<div class="product-item">
<img src="./images/tab1.jpg" class="img-hover" alt="Product 1">
<p class="text-below">汾酒 53度出口瓷瓶汾酒500ML*6瓶 裸瓶装 山西杏花村清香型白酒 53%vol 500mL 6瓶</p>
</div>
<div class="product-item">
<img src="./images/tab2.jpg" class="img-hover" alt="Product 2">
<p class="text-below">张裕 第九代珍藏级解百纳蛇龙珠葡萄酒750ml*6瓶整箱装国产红酒</p>
</div>
<div class="product-item">
<img src="./images/tab3.jpg" class="img-hover" alt="Product 3">
<p class="text-below">蓝带（Blue ribbon）经典啤酒 11度640ml*12瓶</p>
</div>
<div class="product-item">
<img src="./images/tab4.jpg" class="img-hover" alt="Product 4">
<p class="text-below">五粮液生态酿酒公司 国鼎金荷熊猫1.5L 52度礼盒装酒水</p>
</div>
</div>
</div>
<div id="Product2" class="tab-content">
<!-- 商品信息页-->
<div class="product-grid">
<div class="product-item">
<img src="./images/tab1.jpg" class="img-hover" alt="Product 1">
<p class="text-below">汾酒 53度出口瓷瓶汾酒500ML*6瓶 裸瓶装 山西杏花村清香型白酒 53%vol 500mL 6瓶</p>
</div>
<div class="product-item">
<img src="./images/tab2.jpg" class="img-hover" alt="Product 2">
<p class="text-below">张裕 第九代珍藏级解百纳蛇龙珠葡萄酒750ml*6瓶整箱装国产红酒</p>
</div>
<div class="product-item">
<img src="./images/tab3.jpg" class="img-hover" alt="Product 3">
<p class="text-below">蓝带（Blue ribbon）经典啤酒 11度640ml*12瓶</p>
</div>
<div class="product-item">
<img src="./images/tab4.jpg" class="img-hover" alt="Product 4">
<p class="text-below">五粮液生态酿酒公司 国鼎金荷熊猫1.5L 52度礼盒装酒水</p>
</div>
</div>
</div>
<div id="Product3" class="tab-content">
<!-- 商品信息页-->
<div class="product-grid">
<div class="product-item">
<img src="./images/tab1.jpg" class="img-hover" alt="Product 1">
<p class="text-below">汾酒 53度出口瓷瓶汾酒500ML*6瓶 裸瓶装 山西杏花村清香型白酒 53%vol 500mL 6瓶</p>
</div>
<div class="product-item">
<img src="./images/tab2.jpg" class="img-hover" alt="Product 2">
<p class="text-below">张裕 第九代珍藏级解百纳蛇龙珠葡萄酒750ml*6瓶整箱装国产红酒</p>
</div>
<div class="product-item">
<img src="./images/tab3.jpg" class="img-hover" alt="Product 3">
<p class="text-below">蓝带（Blue ribbon）经典啤酒 11度640ml*12瓶</p>
</div>
<div class="product-item">
<img src="./images/tab4.jpg" class="img-hover" alt="Product 4">
<p class="text-below">五粮液生态酿酒公司 国鼎金荷熊猫1.5L 52度礼盒装酒水</p>
</div>
</div>
</div>
<div id="Product4" class="tab-content">
<!-- 商品信息页-->
<div class="product-grid">
<div class="product-item">
<img src="./images/tab1.jpg" class="img-hover" alt="Product 1">
<p class="text-below">汾酒 53度出口瓷瓶汾酒500ML*6瓶 裸瓶装 山西杏花村清香型白酒 53%vol 500mL 6瓶</p>
</div>
<div class="product-item">
<img src="./images/tab2.jpg" class="img-hover" alt="Product 2">
<p class="text-below">张裕 第九代珍藏级解百纳蛇龙珠葡萄酒750ml*6瓶整箱装国产红酒</p>
</div>
<div class="product-item">
<img src="./images/tab3.jpg" class="img-hover" alt="Product 3">
<p class="text-below">蓝带（Blue ribbon）经典啤酒 11度640ml*12瓶</p>
</div>
<div class="product-item">
<img src="./images/tab4.jpg" class="img-hover" alt="Product 4">
<p class="text-below">五粮液生态酿酒公司 国鼎金荷熊猫1.5L 52度礼盒装酒水</p>
</div>
</div>
</div>
<div id="Product5" class="tab-content">
<!-- 商品信息页-->
<div class="product-grid">
<div class="product-item">
<img src="./images/tab1.jpg" class="img-hover" alt="Product 1">
<p class="text-below">汾酒 53度出口瓷瓶汾酒500ML*6瓶 裸瓶装 山西杏花村清香型白酒 53%vol 500mL 6瓶</p>
</div>
<div class="product-item">
<img src="./images/tab2.jpg" class="img-hover" alt="Product 2">
<p class="text-below">张裕 第九代珍藏级解百纳蛇龙珠葡萄酒750ml*6瓶整箱装国产红酒</p>
</div>
<div class="product-item">
<img src="./images/tab3.jpg" class="img-hover" alt="Product 3">
<p class="text-below">蓝带（Blue ribbon）经典啤酒 11度640ml*12瓶</p>
</div>
<div class="product-item">
<img src="./images/tab4.jpg" class="img-hover" alt="Product 4">
<p class="text-below">五粮液生态酿酒公司 国鼎金荷熊猫1.5L 52度礼盒装酒水</p>
</div>
</div>
</div>
<div id="Product6" class="tab-content">
<!-- 商品信息页-->
<div class="product-grid">
<div class="product-item">
<img src="./images/tab1.jpg" class="img-hover" alt="Product 1">
<p class="text-below">汾酒 53度出口瓷瓶汾酒500ML*6瓶 裸瓶装 山西杏花村清香型白酒 53%vol 500mL 6瓶</p>
</div>
<div class="product-item">
<img src="./images/tab2.jpg" class="img-hover" alt="Product 2">
<p class="text-below">张裕 第九代珍藏级解百纳蛇龙珠葡萄酒750ml*6瓶整箱装国产红酒</p>
</div>
<div class="product-item">
<img src="./images/tab3.jpg" class="img-hover" alt="Product 3">
<p class="text-below">蓝带（Blue ribbon）经典啤酒 11度640ml*12瓶</p>
</div>
<div class="product-item">
<img src="./images/tab4.jpg" class="img-hover" alt="Product 4">
<p class="text-below">五粮液生态酿酒公司 国鼎金荷熊猫1.5L 52度礼盒装酒水</p>
</div>
</div>
</div>
<script src="./js/index.js"></script>
</body>
</html>
tabbar.css
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
margin: 10px;
}
.tab-bar {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: #ffffff;
font-size: large;
}
.tab-link {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: background-color 0.3s;
border-radius: 15px 15px 0px 0px;
width: 165px;
height: 70px;
font-size: large;
}
.tab-link:hover {
background-color: #ddd;
}
/* 激活状态的标签样式 */
.tab-link.active {
font-size: 1.2em; /* 字体变大 */
background-color: red; /* 背景变为红色 */
color: white; /* 字体变为白色 */
}
.tab-content {
display: flex;
width: 100%;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
.tab-content img {
max-width: 100%;
height: auto;
}
h3 {
margin: 10px 0;
}
.tab-content {
animation: fadeIn 0.5s;
}
/* 图片悬停放大效果 */
.tab-content img {
transition: transform 0.5s ease;
}
.tab-content img:hover {
transform: scale(1.05);
}
/* 定义渐显动画 */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* 商品网格布局 */
.product-grid {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
/* 商品项样式 */
.product-item {
flex-basis: 22%; /* 每项占据22%，留下一些间隙 */
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
margin: 10px;
text-align: center;
}
/* 商品图片样式 */
.product-item img {
width: 100%;
height: auto;
transition: transform 0.5s ease;
}
.product-item img:hover {
transform: scale(1.1);
}
/* 商品名称样式 */
.product-item h3 {
margin: 0.5em 0;
}
/* 确保tab内容能正确显示 */
.tab-content {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 20px;
box-sizing: border-box;
}
/* 图片悬停时的样式 */
.img-hover:hover {
opacity: 0.5; /* 图片变半透明 */
}
/* 鼠标悬停在图片上时，下方文字的样式 */
.img-hover:hover + .text-below {
color: red; /* 文字变为红色 */
}
.text-below{
display: -webkit-box;
font-size: 12px;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
color: #252525;
}index.js
function openTab(evt, productName) {
var i, tabcontent, tablinks;
// Get all elements with class="tab-content" and hide them
tabcontent = document.getElementsByClassName("tab-content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.opacity = "0";
setTimeout(function(index) {
tabcontent[index].style.display = "none";
}, 500, i); // Set timeout to allow fade out effect before display none
}
// Get all elements with class="tab-link" and remove the class "active"
tablinks = document.getElementsByClassName("tab-link");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab with a fade in effect
setTimeout(function(productName) {
document.getElementById(productName).style.display = "block";
setTimeout(function(productName) {
document.getElementById(productName).style.opacity = "1";
}, 10, productName); // Set a slight delay before fading in
}, 500, productName);
// Add "active" class to the current tab link
evt.currentTarget.className += " active";
}
// 绑定鼠标悬停事件到所有的 tab 链接
function bindHoverToTabs() {
var tablinks = document.getElementsByClassName("tab-link");
for (let i = 0; i < tablinks.length; i++) {
tablinks[i].addEventListener('mouseenter', function(event) {
// 调用 openTab 函数并传入事件和产品名称
openTab(event, event.target.getAttribute('data-product'));
});
}
}
// 在页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', (event) => {
// 默认点击第一个 tab 链接
document.querySelector('.tab-link').click();
// 绑定鼠标悬停事件
bindHoverToTabs();
});
素材随便几张图片即可
原文发布于 CSDN