CSS浮动练习-小米手机模块

磁悬浮电冰箱

已于 2023-07-17 17:24:03 修改

阅读量70

点赞数

文章标签： css 前端 javascript

于 2023-07-17 17:22:45 首次发布

本文链接：https://blog.csdn.net/weixin_64776610/article/details/131771137

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
   
        ul{
            list-style: none;
        }

       .da{
            height: 100%;
            width: 234px;
            float: left;
            background-repeat: no-repeat;
            margin:50px;
            
       }
       div{
            background-color: #f5f5f5;
            margin: auto;  
            width: auto; 
            
            
       } 
       .div1{
            height: 50%;
            background-color:#ffffff ;
            float: left;
            padding: 20px 0px;
            background-repeat: no-repeat;
            margin: 5px;

           
       }
       .div2{
            height: 50%;
            
            float: left;
            padding: 20px 0px;
            background-repeat: no-repeat;
            margin: 5px;
            background-color:#ffffff ;
       }
       .div3{
            height: 50%;
            
            float: left;
            padding: 20px 0px;
            background-repeat: no-repeat;
            margin: 5px;
            background-color:#ffffff ;
       }
       .div4{
            height: 50%;
            
            float: left;
            padding: 20px 0px;
            background-repeat: no-repeat;
            margin: 5px;
            background-color:#ffffff ;
       }
       .div5{
            height: 50%;
            
            float: left;
            padding: 20px 0px;
            background-repeat: no-repeat;
            margin: 5px;
            background-color:#ffffff ;
       }
       .div6{
            height: 50%;
            
            float: left;
            padding: 20px 0px;
            background-repeat: no-repeat;
            margin: 5px;
            background-color:#ffffff ;
       }
       .div7{
            height: 50%;
            
            float: left;
            padding: 20px 0px;
            background-repeat: no-repeat;
            margin: 5px;
            background-color:#ffffff ;
       }
       .div8{
            height: 50%;
            
            float: left;
            padding: 20px 0px;
            background-repeat: no-repeat;
            margin: 5px;
            background-color:#ffffff ;
       }
       .clear::after{
        content: '';
        display: block;
        clear: both;
       }
       .zi1{
            font-size: 14px;
            color: #333;
            overflow: hidden;
            text-align: center;
       }
       .zi2{
        text-align: center;
        overflow: hidden;
       }
       .zi3{
            color: #ff6700;
            text-align: center;
            
       }
       .zi4{
        text-decoration: line-through;
        margin: 10px;
       }
    </style>
</head>
<body>
    <div class="div">
       <ul class="da">
        <img src="./img/1.jpg" >
       </ul>
       <ul class="clear">
            <div class="div1">
                <img src="./img/2.jpg">
                <p class="zi1">Redmi Note 12T Pro</p>
                <p class="zi2">年度 LCD 屏幕之光</p>
                <p class="zi3">1499起<span class="zi4">1599</span>元</p>
            </div>
            <div class="div2">
                <img src="./img/3.jpg">
                <p class="zi1">Redmi Note 12T Pro</p>
                <p class="zi2">年度 LCD 屏幕之光</p>
                <p class="zi3">1499起<span class="zi4">1599</span>元</p>
            </div>
            <div class="div3">
                <img src="./img/4.jpg">
                <p class="zi1">Redmi Note 12T Pro</p>
                <p class="zi2">年度 LCD 屏幕之光</p>
                <p class="zi3">1499起<span class="zi4">1599</span>元</p>
            </div>
            <div class="div4">
                <img src="./img/5.jpg">
                <p class="zi1">Redmi Note 12T Pro</p>
                <p class="zi2">年度 LCD 屏幕之光</p>
                <p class="zi3">1499起<span class="zi4">1599</span>元</p>
            </div>
            <div class="div5">
                <img src="./img/6.jpg">
                <p class="zi1">Redmi Note 12T Pro</p>
                <p class="zi2">年度 LCD 屏幕之光</p>
                <p class="zi3">1499起<span class="zi4">1599</span>元</p>
            </div>
            <div class="div6">
                <img src="./img/7.jpg">
                <p class="zi1">Redmi Note 12T Pro</p>
                <p class="zi2">年度 LCD 屏幕之光</p>
                <p class="zi3">1499起<span class="zi4">1599</span>元</p>
            </div>
            <div class="div7">
                <img src="./img/8.jpg">
                <p class="zi1">Redmi Note 12T Pro</p>
                <p class="zi2">年度 LCD 屏幕之光</p>
                <p class="zi3">1499起<span class="zi4">1599</span>元</p>
            </div>
            <div class="div8">
                <img src="./img/9.jpg">
                <p class="zi1">Redmi Note 12T Pro</p>
                <p class="zi2">年度 LCD 屏幕之光</p>
                <p class="zi3">1499起<span class="zi4">1599</span>元</p>
            </div>
            </ul>
    </div>
</body>
</html>