526互联

HTML5 小米浮动和手机购买板块

发布时间 2023-11-30 14:45:57作者: 诺言1107

小米官方手机购买板块

重点内容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;
}