小米官方手机购买板块
重点内容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; }