实训第四天CSS的简单应用

最新推荐文章于 2021-08-03 18:52:42 发布

智慧女孩不秃头&

最新推荐文章于 2021-08-03 18:52:42 发布

阅读量157

点赞数 2

文章标签： css 定位 html

本文链接：https://blog.youkuaiyun.com/qq_45284063/article/details/117554470

版权

这篇博客主要介绍了在实训第四天中关于CSS的学习内容，包括盒子模型、边框和定位的基础知识。作者通过实践《花样边框》的练习，要求实现元素在浏览器中的居中展示，并使用了多种颜色，如gray、brown、white、black和#eeeeee。博客内容包含了6个Div的实验代码，旨在帮助读者掌握CSS基础和实际应用。

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

知识学习：

目标：

1、掌握CSS基础属性

2、根据需求搜索对应CSS属性

知识：

1.CSS盒子模型

2、边框

3、定位

练习：完成《花样边框》练习

要求：整体居中于浏览器

颜色提示：gray，brown，white，black，#eeeeee（可更改）

Div数量：6

实验效果：

实验代码：

<!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>
        .box1{
            background-color: white;
            border: 5px dashed  #000000;    /*虚线边框*/
            margin: 0 auto;
            height: 500px;
            width: 500px;
            position: relative;
        }

        .box2{
            background-color: white;
            border: 5px solid  gray;   /*实线边框*/
            /* margin: 0 auto; */
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            height: 400px;
            width: 400px;
        }

        .box3{
            background-color: rgb(156, 13, 13);
            /* border: 10px solid  gray;   实线边框 */
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            height: 300px;
            width: 300px;
        }

        .box4{
            background-color: rgb(156, 13, 13);
            border: 5px dashed white;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            height: 200px;
            width: 200px;
        }
        .box5{
            background-color: rgb(156, 13, 13);
            border: 5px dashed white;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            height: 150px;
            width: 150px;
        }
        .box6{
            background-color: white;
            border: 5px solid  black;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            height: 80px;
            width: 80px;
        }
    </style>
</head>
<body>

    <div class="box1">
        <div class="box2">
            <div class="box3">
                <div class="box4">
                    <div class="box5">
                        <div class="box6">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>