盒子模型

练习

练习1

效果图

代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1</title>
    <style>
        * {
            /* 清除所有元素内外边距 */
            padding: 0;
            margin: 0;
        }

        .box {
            height: 600px;
            width: 220px;
            border: 1px solid rgb(160, 155, 155);
            /* 元素水平居中 */
            margin: 0 auto;
            /* 元素顶部外边距的距离 */
            margin-top: 100px;
            font-size: 16px;
        }

        .header {
            background: rgb(255, 123, 0);
            height: 50px;
            color: white;
            text-align: center;
            /* 设置文字高度与元素高度一致可以实现垂直居中的效果 */
            line-height: 50px;
            /* 添加下框线 */
            border-bottom: 1px solid darkgray;
        }

        .body {
            color: rgb(121, 107, 107);
            width: 200px;
            height: 85px;
            /* 添加下框线 */
            border-bottom: 1px solid darkgray;
        }

        .text p {
            font-weight: bold;
            /* 设置外边距-左边 */
            margin-left: 15px;
            height: 50px;
            /* 设置行高 */
            line-height: 50px;
        }

        .text-p span {
            font-size: 14px;
            /* 设置外边距-左边 */
            margin-left: 15px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="header">
            食品饮料分类
        </div>
        <div class="body">
            <div class="text">
                <p>进口食品</p>
                <div class="text-p">
                    <span>进口牛奶</span>
                    <span>巧克力</span>
                    <span>橄榄油</span>
                </div>
            </div>
        </div>
        <div class="body">
            <div class="text">
                <p>休闲食品</p>
                <div class="text-p">
                    <span>零食</span>
                    <span>坚果</span>
                    <span>肉干</span>
                </div>
            </div>
        </div>
        <div class="body">
            <div class="text">
                <p>茗茶</p>
                <div class="text-p">
                    <span>绿茶</span>
                    <span>普洱茶</span>
                    <span>铁观音</span>
                </div>
            </div>
        </div>
        <div class="body">
            <div class="text">
                <p>饮料冲调</p>
                <div class="text-p">
                    <span>咖啡</span>
                    <span>牛奶</span>
                    <span>饮料</span>
                </div>
            </div>
        </div>
        <div class="body">
            <div class="text">
                <p>油调味粮</p>
                <div class="text-p">
                    <span>食用油</span>
                    <span>大米</span>
                    <span>素食</span>
                </div>
            </div>
        </div>
        <div class="body">
            <div class="text">
                <p>食品礼券</p>
                <div class="text-p">
                    <span>月饼</span>
                    <span>粽子</span>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

预览

练习2

效果图

代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2</title>
    <style>
        * {
            /* 清除所有元素内外边距 */
            padding: 0;
            margin: 0;
        }

        .box {
            height: 100px;
            width: 800px;
            background-color: bisque;
            /* 设置弹性布局 */
            display: flex;
            /* 元素水平居中 */
            margin: 0 auto;
        }

        .button {
            /* 设置外边距-顶边 */
            margin-top: 20px;
            height: 50px;
            width: 100px;
            /* 设置边框 */
            border: 1px solid #b8b4b4;
            background-color: rgb(214, 208, 201);
            /* 设置圆角，左上，右上，左下，右下 */
            border-radius: 80px 80px 80px 80px;
            /* 设置文字高度与元素高度一致可以实现垂直居中的效果 */
            line-height: 50px;
            text-align: center;
            font-size: 14px;
            /* 设置外边距-左边 */
            margin-left: 50px;
        }

        .button:hover {
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="button">电视影音</div>
        <div class="button">洗箱洗衣机</div>
        <div class="button">空调</div>
        <div class="button">厨卫</div>
        <div class="button">小家电</div>
    </div>
</body>

</html>

预览

练习3

效果图

代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3</title>
    <style>
        * {
            /* 清除所有元素内外边距 */
            padding: 0;
            margin: 0;
        }

        h2,
        h3 {
            font-weight: bold;
            color: rgb(204, 0, 0);
        }

        p {
            color: rgb(0, 102, 0);
        }

        .body p {
            font-weight: bold;
        }

        .header {
            text-align: center;
        }

        .box {
            /* 元素水平居中 */
            margin: 0 auto;
            width: 1000px;
            height: 690px;
            background-image: url(./images/bg_border.jpg);
            padding-top: 25px;
        }

        .a {
            margin: 0 auto;
            width: 950px;
            height: 650px;
            background-image: url(./images/bg_poem.jpg);
            padding-top: 10px;
        }

        .text {
            line-height: 30px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="a">
            <div class="text">
                <div class="header">
                    <h2>忆江南(1)</h2>
                    <p>唐.白居易</p>
                </div>
                <div class="body">
                    <p>江南好，风景旧曾谙。(2)</p>
                    <p>日出江花红胜火，春来江水绿如蓝，(3)</p>
                    <p>能不忆江南。</p>
                </div>
                <h3>作者介绍</h3>
                <p>
                    772-846,字乐天，太原（今山西）人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州（今属江西）司马，移忠州（今属四川）刺史，又为苏州（今属江苏）、同州（今属陕西大荔）刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响甚大。
                </p>
                <br>
                <h3>注释</h3>
                <p>
                    (1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双凋五十四字，皆平韵。(2)谙（音安）：熟悉。(3)蓝：蓝草，其叶可制青绿染料。
                </p>
                <h3>品评</h3>
                <p>
                    此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳处，而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已甚，方能“忆”之不休，因此，此句又已暗逗结句“能不亿江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，不失为勾通一篇意脉的精彩笔墨。三、四两句对江南之“好”进行形象化的演绎，突出渲染江花、江水红绿相映的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作者善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又深长的韵味，把读者带入余情摇漾的境界中。
                </p>
            </div>
        </div>
    </div>
</body>

</html>

预览

温馨提示：本文最后更新于2023-12-02 11:36:54，某些文章具有时效性，若有错误或已失效，请在下方留言或联系站长。

本站未注明转载的文章均为原创，并采用 CC BY-NC-SA 4.0 授权协议，转载请注明来源，谢谢！

分享是一种美德，当你分享时请你附带上本文链接。

THE END