小米商城浮动练习 html5&&css

最新推荐文章于 2022-09-15 08:41:31 发布

zxkzhang

最新推荐文章于 2022-09-15 08:41:31 发布

阅读量945

点赞数 1

分类专栏：实例代码

本文链接：https://blog.csdn.net/zxkzhang/article/details/100176599

版权

本文通过三个步骤详细介绍了如何使用HTML5和CSS来制作小米商城的浮动布局。首先，制作导航栏；其次，处理图片的浮动效果；最后，将所有元素组合，完成效果展示。

摘要由CSDN通过智能技术生成

第一步制作导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mi商城</title>

    <style>
        *{
            margin: 0;
            padding:0;
        }
        .box{
            height: 40px;
            background: rgb(51,51,51);
        }
        .box .nav{
            height: 40px;
            width: 1240px;
            margin: auto;
        }
        .box .nav .left{
            float: left;
        }
        .box .nav .right{
            float: right;
        }
       .left li {
           float: left;
           list-style-type: none;
           line-height: 40px;
           margin-left: 20px;
           color: white;
       }
        .right li{
            float: right;
            list-style-type: none;
            line-height: 40px;
            margin-right: 20px;
            color: white;
        }
    </style>

</head>
<body>
    <div class="box">
        <div class="nav">
            <ul class="left">
                <li>小米商城</li>
                <li>MIUI</li>
                <li>IoT</li>
                <li>云服务</li>
                <li>金融</li>
                <li>有品</li>
                <li>小爱开放平台</li>
                <li>企业团购</li>
            </ul>
            <ul class="right">
                <li>资质证照</li>
                <li>协议规则</li>
                <li>下载app</li>
                <li>Select Location</li>
            </ul>
        </div>
    </div>
</body>
</html>

第二步图片浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机</title>

    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
            background:rgb(245,245,245) ;
        }
        .box{
            text-align: center;
            width: 230px;
            height: 300px;
            background: white;
            float: left;
            margin-left: 15px;
            border-radius: 5px;
            margin-top: 5px;
        }
        .box .img{
            margin: 8px auto;
            width: 200px;
            height: 200px;
        }
        .box .text1{
            font-size: 15px;
        }
        .box .text2{
            font-size: 12px;
            margin-top: 3px;
            color:rgb(194,194,194);
        }
        .box .text3{
            font-size: 13px;
            margin-top: 5px;
            color: