小米网页HTML5 CSS布局实践-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_58200396/article/details/124166063

本文介绍了使用HTML5和CSS技术实现小米网页的布局案例，详细探讨了前端开发中的布局技巧和方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小米网页布局小案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body{
                background-color: rgb(243, 243, 243);
            }
            .header{
                width:1226px;
                height:58px;
                /* background-color: rgb(187, 187, 187); */
                margin:0 auto;
            }
            span{
                float:left;
                line-height: 58px;
                font-size: 24px;
                font-weight:20;
            }
            a{
                text-decoration: none;
                float:right;
                line-height:58px;
                color: black;
            }
            .container{
                width: 1226px;
                height: 1000px;
                margin: 0 auto;
              
            }
            .container-left{
                width: 234px;
                height: 612px;
                background-color: coral;
                float: left;
            }
            .container-right{
                width: 992px;
                height: 1000px;
                float: right;
                /* background-color: rgb(233, 233, 233); */
            }
            
            li{
                list-style: none;
                width: 236px;
                height: 300px;
                background-color: rgb(255, 255, 255);
                float: left;
                margin: 0px 0px 12px 12px;
            }
            .container-left>img{
                width: 234px;
                height:612px;
            }
            li>img{
                margin: 12px 18px 0px 18px;
            }
            .p1{
                margin: 0px 64px 0px 64px;
              
            }
            .p2{
                margin: 0px 82px 0px 82px;
                font-size: 14px;
                color: darkgrey;
            }
            .span2{
                /* display: inline-block; */
                margin: -10px 96px 0px 96px;
                font-size: 12px;
                color: rgb(255, 0, 0);
            }
            li:hover{
                    box-shadow: 0px 0px 20px 0px rgb(158, 157, 157);
                    transition: 3s;
                }
                a>img{
                    width: 18px;
                    height: 18px;
                    border-radius: 10px;
                    vertical-align: -3px;
                }
        </style>
    </head>
    <body>
        <div class="header">
            <span>手机</span>
            <p><a href="#">查看更多<img src="./img/icon-slides.png"></a></p>


        </div>
        <div class="container">
            <div class="container-left">
                <img src="img/left_mi.jpg" alt="" title="">
            </div>
            <div class="container-right">
                <ul>
                    <li><img src="./img/mi_11.jpg" alt="" title=""><p class="p1">Xiaomi MIX 4</p><p class="p2">CUP全面屏</p><span class="span2">4999元</span></li>
                    <li><img src="./img/mi_11.jpg" alt="" title=""><p class="p1">Xiaomi MIX 4</p><p class="p2">CUP全面屏</p><span class="span2">4999元</span></li>
                    <li><img src="./img/mi_11.jpg" alt="" title=""><p class="p1">Xiaomi MIX 4</p><p class="p2">CUP全面屏</p><span class="span2">4999元</span></li>
                    <li><img src="./img/mi_11.jpg" alt="" title=""><p class="p1">Xiaomi MIX 4</p><p class="p2">CUP全面屏</p><span class="span2">4999元</span></li>
                    <li><img src="./img/mi_11.jpg" alt="" title=""><p class="p1">Xiaomi MIX 4</p><p class="p2">CUP全面屏</p><span class="span2">4999元</span></li>
                    <li><img src="./img/mi_11.jpg" alt="" title=""><p class="p1">Xiaomi MIX 4</p><p class="p2">CUP全面屏</p><span class="span2">4999元</span></li>
                    <li><img src="./img/mi_11.jpg" alt="" title=""><p class="p1">Xiaomi MIX 4</p><p class="p2">CUP全面屏</p><span class="span2">4999元</span></li>
                    <li><img src="./img/mi_11.jpg" alt="" title=""><p class="p1">Xiaomi MIX 4</p><p class="p2">CUP全面屏</p><span class="span2">4999元</span></li>
                </ul>
                
            </div>


        </div>

    </body>
</html>