当前位置：网站首页>盒子模型小练习

盒子模型小练习

2022-08-05 05:25:00 【Y-琼眸】

上一篇文章已经讲了盒子模型的基本内容了，再简单总结一下

盒子模型分为：内容区、内边距、边框、外边框

1.内容区content 元素中所有子元素和文本内容都在内容区排列

           width   设置宽  

           height  设置高

2.边框border  给元素设置边框,边框是盒子的边缘

   边框里必须要指定三个样式:样式 大小 颜色

3.内边距padding 是内容区到边框的距离

4.外边框margin 是边框到页面边上的距离

接下来我们来做一个小练习。

大家看看下面这个图片

 我相信大家一定可以做出来

那些下面附上我自己敲的内容，大家可以对照着看看，要是有什么问题也可以提出来一起研究研究，毕竟我写也不是最完美的。

<!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>美容chanp</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #686A6B;
        }

        main {
            width: 600px;
            height: 600px;
            background-color: #EEE7E1;
        }

        .box {
            margin-left: 120px;
            width: 340px;
            height: 376px;
            background-color: white;
        }

        h2 {
            color: white;
            font-size: 18px;
            text-indent: 10px;
            width: 340px;
            height: 50px;
            line-height: 50px;
            background-color: #E9185A;
        }

        li {
            border-bottom: #B8B5B5 1.5px dashed;
            line-height: 35px;
        }

        span {
            vertical-align: middle;
            color: white;
            display: inline-block;
            width: 25px;
            height: 25px;
            line-height: 25px;
            background-color: black;
            border-radius: 50%;
            text-align: center;
        }
        a:hover{
            color: #E9185A;
        }
        a:hover span{
            background-color: #E9185A;
        }
    </style>
</head>

<body>
    <main>
        <div class="box">
            <h2>
                大家都喜欢买的美容产品
            </h2>
            <ul>
                <li>
                    <a href="#"><span>1</span> 雅诗兰黛即时修护眼部精华霜15ml</a>
                </li>
                <li>
                    <a href="#"><span>2</span> 伊丽莎白雅顿显效复合活肤霜 75ml</a>
                </li>
                <li>
                    <a href="#"><span>3</span> OLAY玉兰油多效修护霜 50g</a>
                </li>
                <li>
                    <a href="#"><span>4</span> 巨型一号丝瓜水320ML</a>
                </li>
                <li>
                    <a href="#"><span>5</span> 倩碧保湿洁肤水2号 200ml</a>
                </li>
                <li>
                    <a href="#"><span>6</span> 比度克细肤淡印霜 30g</a>
                </li>
                <li>
                    <a href="#"><span>7</span> 兰芝 (LANEIGE)夜间修护锁水面膜 80ml</a>
                </li>
                <li>
                    <a href="#"><span>8</span> SK-II护肤精华露 215ml</a>
                </li>
                <li>
                    <a href="#"><span>9</span> 欧莱雅青春密码活颜精华肌底液</a>
                </li>
            </ul>
        </div>
    </main>
</body>

</html>

这就是今天的小练习，大家一定要自己敲一敲。

原网站

版权声明
本文为[Y-琼眸]所创，转载请带上原文链接，感谢
https://blog.csdn.net/rbh200812/article/details/126144916

边栏推荐

猜你喜欢

随机推荐