小米官方手机购买板块
重点内容css浮动加背景颜色
.xiaomi1{
float: left;
background: white;
width: 234px;
height: 260px;
text-align: center;
margin-top: 50px;
margin-left: 10px;
padding-top: 20px;
padding-bottom: 20px;
transition: 1s;
}
transition: 1s; 是CSS中用于设置过渡效果的属性。这属性用于指定元素在状态改变时以动画效果平滑过渡的时间。
.xiaomi1:hover{
/* 浮动效果 */
transform: translate(-2px);
box-shadow: 11px 10px 8px rgb(0, 0, 0);
}
transform: translate(-2px); 是CSS中的变换属性，用于对元素进行平移（移动）操作。在这个例子中，元素沿水平方向向左平移2像素。
box-shadow 规则表示在元素的右下方添加一个水平偏移为11px、垂直偏移为10px、模糊半径为8px的黑色阴影。
- 效果图片
- HTML页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米商城 - Xiaomi 13、Redmi K60、MIX FOLD 2，小米电视官方网站</title>
<!-- logo -->
<link rel="shortcut icon" href="https://cdn.cnbj1.fds.api.mi-img.com/mi.com-assets/shop/img/logo-mi2.png" type="image/x-icon">
<!-- 调用css -->
<link rel="stylesheet" href="./lx.css">
</head>
<body>
<div class="xiaomi">
<div class="xiaomi2">
<img class="datp" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/68fdde5ce4b3e8988c6940f8a92afdfc.png?thumb=1&w=293&h=768&f=webp&q=90" alt="">
</div>
<div class="xiaomi1">
<a href="https://www.mi.com/shop/buy?product_id=19288">
<img class="tpy" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202310251928_35fb2880108e9aa56fdcf7f894249f26.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<div class="mz">Xiaomi 14 Pro</div>
<div class="js">徕卡Summilux可变光圈镜头｜小米澎湃OS</div>
<div class="jg">4999元起</div>
</a>
</div>
<div class="xiaomi1">
<a href="https://www.mi.com/shop/buy?product_id=19300">
<img class="tpy" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202310251928_35fb2880108e9aa56fdcf7f894249f26.png?thumb=1&w=300&h=300&f=webp&q=90" alt="">
<div class="mz">Xiaomi 14</div>
<div class="js">徕卡光学Summilux镜头｜小米澎湃OS｜第三代骁龙®8移动平台</div>
<div class="jg">3999元起</div>
</a>
</div>
<div class="xiaomi1">
<a href="https://www.mi.com/shop/buy?product_id=19184">
<img class="tpy" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202309200030_9a6a9bf107f4b4a7a25e4ccedf0c1174.png?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<div class="mz"> Redmi Note 13 Pro</div>
<div class="js"> 小金刚品质</div>
<div class="jg">1399元起
<del class="scjg">1499元</del>
</div>
</a>
</div>
<div class="xiaomi1">
<a href="https://www.mi.com/shop/buy?product_id=19184">
<img class="tpy" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202309200030_9a6a9bf107f4b4a7a25e4ccedf0c1174.png?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<div class="mz"> Redmi Note 13 Pro+</div>
<div class="js"> 天玑 7200-Ultra 处理器</div>
<div class="jg">1899元起
<del class="scjg">1999元</del>
</div>
</a>
</div>
<div class="hh"></div>
<div class="xiaomi3">
<a href="https://www.mi.com/shop/buy?product_id=19184">
<img class="tpy" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202309200030_9a6a9bf107f4b4a7a25e4ccedf0c1174.png?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<div class="mz"> Redmi Note 13 5G </div>
<div class="js"> 1 亿像素 更快更清晰</div>
<div class="jg">1099元起
<del class="scjg">1199元</del>
</div>
</a>
</div>
<div class="xiaomi3">
<a href="https://www.mi.com/shop/buy?product_id=19184">
<img class="tpy" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202308111609_92d3c7105793aed5afd3e609132840c9.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<div class="mz"> Xiaomi MIX Fold 3 </div>
<div class="js">轻薄折叠屏丨徕卡光学丨全焦段四摄</div>
<div class="jg">8999元起</div>
</a>
</div>
<div class="xiaomi3">
<a href="https://www.mi.com/shop/buy?product_id=19184">
<img class="tpy" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202308122142_7e259a200b6aaec5a2c0445a665e38c3.png?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<div class="mz"> Redmi K60 至尊版</div>
<div class="js">旗舰体验全面超预期</div>
<div class="jg">2799元起</div>
</a>
</div>
<div class="xiaomi3">
<a href="https://www.mi.com/shop/buy?product_id=19184">
<img class="tpy" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202308122142_7e259a200b6aaec5a2c0445a665e38c3.png?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<div class="mz"> Redmi 12 5G</div>
<div class="js"> 5G 骁龙芯，大屏大电量 </div>
<div class="jg">949元起</div>
</a>
</div>
</div>
</body>
</html>
- css页面
/* css*/
a{
text-decoration: none;
}
body{
background: #f5f5f5;
}
.xinomi{
float: left;
}
.xiaomi1{
float: left;
background: white;
width: 234px;
height: 260px;
text-align: center;
margin-top: 50px;
margin-left: 10px;
padding-top: 20px;
padding-bottom: 20px;
transition: 1s;
}
.xiaomi1:hover{
/* 浮动效果 */
transform: translate(-2px);
box-shadow: 11px 10px 8px rgb(0, 0, 0);
}
.xiaomi2{
float: left;
background: white;
margin-top: 50px;
margin-left: 75px;
}
.xiaomi3{
float: left;
background: white;
width: 234px;
height: 260px;
text-align: center;
margin-top: 12px;
margin-left: 10px;
padding-top: 20px;
padding-bottom: 20px;
transition: 1s;
}
.xiaomi3:hover{
/* 浮动效果 */
transform: translate(-2px);
box-shadow: 11px 10px 8px rgb(0, 0, 0);
}
.datp{
float: left;
height: 614px;
width: 234px;
}
.tpy{
width: 160px;
height: 160px;
}
.mz{
font-size: 14px;
margin: 0px 10px 2px;
}
.js{
font-size: 12px;
color: #b0b0b0;
margin: 0px 10px 10px;
/* 设置文本不换行 */
white-space: nowrap;
/* 设置多余文本以省略号出现 */
text-overflow: ellipsis;
/* 截掉多余的内容 */
overflow: hidden;
}
.jg{
font-size: 14px;
color: #ff6700;
margin: 0px 10px 14px;
}
.scjg{
color: #b0b0b0
}
.hh{
overflow: hidden;
}
标签：浮动,Redmi,小米,top,HTML5,10px,元起,margin,left From： https://www.cnblogs.com/yanrong0913/p/17867285.html