CSS-小米布局案例

最新推荐文章于 2024-06-01 23:21:16 发布

一夕ξ

最新推荐文章于 2024-06-01 23:21:16 发布

阅读量309

点赞数

分类专栏：前端学习文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_45387575/article/details/122636446

版权

前端学习专栏收录该内容

77 篇文章 7 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        .da1 {
            width: 1537px;
            height: 567px;
            margin: 200px auto;
            text-align: center;
        }
        
        .dd1 {
            float: left;
            background-color: #a09e9e;
            width: 294px;
            height: 567px;
        }
        
        .dd3 {
            width: 1540px;
            height: 567px;
            background-image: url(831e0eb28e01980ebf713f867de5033f.webp);
            background-position: center;
            background-repeat: no-repeat;
        }
        
        ul {
            margin-top: 10px;
            margin-bottom: 10px;
        }
        
        li {
            list-style: none;
            display: block;
            height: 55px;
            font-size: 25px;
            color: white;
            text-align: left;
            line-height: 55px;
        }
        
        li:hover {
            background-color: rgb(233, 176, 19);
        }
        
        p {
            margin-left: 30px;
            font-weight: 400
        }
    </style>
</head>

<body>
    <div class='da1'>
        <div class='dd1'>
            <ul>
                <li>
                    <p> 手机</p>
                </li>
                <li>
                    <p>电视</p>
                </li>
                <li>
                    <p>笔记本 平板</p>
                </li>
                <li>
                    <p>家电</p>
                </li>
                <li>
                    <p>出行 穿戴</p>
                </li>
                <li>
                    <p>智能 路由器</p>
                </li>
                <li>
                    <p>电源 配件</p>
                </li>
                <li>
                    <p>健康 儿童</p>
                </li>
                <li>
                    <p>耳机 音响</p>
                </li>
                <li>
                    <p>生活 箱包</p>
                </li>
            </ul>
        </div>

        <a href='https://www.mi.com/buy/detail?product_id=15565' target='_blank'>
            <div class='dd3'>
            </div>
        </a>

    </div>
</body>

</html>

为了观察每个盒子加上去之后的效果，可以提前给他们一个背景颜色，看效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1200px;
            height: 460px;
            margin: 0 auto;
            background-color: pink;
        }
        
        .left {
            float: left;
            width: 230px;
            height: 460px;
            background-color: purple;
        }
        
        .right {
            float: right;
            ;
            width: 970px;
            height: 460px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class='box'>
        <div class='left'>

        </div>
        <div class='right'></div>
    </div>
</body>

</html>

一夕ξ

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS-小米布局案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...
复制链接

扫一扫