CSS方块定位的练习-CFANZ编程社区

大家好，今天我们来分享一下CSS方块定位的练习

我们这一次我们使用方块练习css相对定位

看图：
在这里插入图片描述

这是我们的成品，就是几个超链接方块，你鼠标点上去，它的颜色会由粉色变成蓝色

第一部分的源码;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px; 
            /*定义红色边框的宽度*/
            height: 300px;
            /*定义红色边框的高度*/
            border: 2px solid red;
        /*    我们写了一个红色边框*/
        }
    /*    这是我们css部分*/
    </style>
</head>
<body>
<div id="box" >
     <a class="a1" href="#">链接1</a>
<!--    这是超链接标签，不过我们并没有指向他在哪-->
   <a class="a2" href="#">链接2</a>
    <a class="a3" href="#">链接3</a>
    <a class="a4" href="#">链接4</a>
    <a class="a5" href="#">链接5</a>

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

显示网页效果：

在这里插入图片描述

写源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            /*定义红色边框的宽度*/
            height: 300px;
            /*定义红色边框的高度*/
            border: 2px solid red;
        /*    我们写了一个红色边框*/
            padding: 10px;  
        /*    定义内边框*/
            
        }
        a{
            width: 100px;    
            /*定义宽度*/
            height: 100px;
            /*定义高度*/
            text-decoration: none;
            /*把默认的下划线给取消掉*/
            background: deeppink;   
            /*背景颜色*/
            line-height: 100px;
            /*定义行高*/
            text-align: center;
            /*文本居中*/
            color: white;  
        /*    定义字体颜色*/
        }
    /*    这是我们css部分*/
    </style>
</head>
<body>
<div id="box" >
  <a class="a1" href="#">链接1</a>
<!--    这是超链接标签，不过我们并没有指向他在哪-->
   <a class="a2" href="#">链接2</a>
    <a class="a3" href="#">链接3</a>
    <a class="a4" href="#">链接4</a>
    <a class="a5" href="#">链接5</a>
</div>
</body>
</html>

显示效果

在这里插入图片描述

 display: block;    
    /*    把它变成块级元素  */

看效果：
在这里插入图片描述
这就是它的效果

我们看到这样的效果并不是我们想要的

我们接下来就要使用到平移，来实现博客中第一张图的效果：

 /*    把它变成块级元素  */
            a:hover{
                background: blue;

            }
            .a2,.a4{
                position: relative;
                left: 200px;
                top: -100px;
            }
            .a5{
                position: relative;
                left: 100px;
                top: -300px;
            }

显示效果：
在这里插入图片描述

在这里插入图片描述
到这里CSS方块定位的练习就完成了

下面试全部的源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            /*定义红色边框的宽度*/
            height: 300px;
            /*定义红色边框的高度*/
            border: 2px solid red;
        /*    我们写了一个红色边框*/
            padding: 10px;
        /*    定义内边框*/

        }
        a {
            width: 100px;
            /*定义宽度*/
            height: 100px;
            /*定义高度*/
            text-decoration: none;
            /*把默认的下划线给取消掉*/
            background: deeppink;
            /*背景颜色*/
            line-height: 100px;
            /*定义行高*/
            text-align: center;
            /*文本居中*/
            color: white;
            /*    定义字体颜色*/
            display: block;
        }
        /*    把它变成块级元素  */
            a:hover{
                background: blue;

            }
            .a2,.a4{
                position: relative;
                left: 200px;
                top: -100px;
            }
            .a5{
                position: relative;
                left: 100px;
                top: -300px;
            }

        
    /*    这是我们css部分*/
    </style>
</head>
<body>
<div id="box" >
    <a class="a1" href="#">链接1</a>
<!--    这是超链接标签，不过我们并没有指向他在哪-->
    <a class="a2" href="#">链接2</a>
    <a class="a3" href="#">链接3</a>
    <a class="a4" href="#">链接4</a>
    <a class="a5" href="#">链接5</a>


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

好了，关于CSS方块定位的练习就讲到这里了，谢谢大家