CSS方块定位的练习

最新推荐文章于 2024-07-24 11:19:07 发布

iijik55

最新推荐文章于 2024-07-24 11:19:07 发布

阅读量267

点赞数

分类专栏：前端 html 面试文章标签： css css3 html

本文链接：https://blog.csdn.net/iijik55/article/details/123155706

版权

本文介绍了CSS方块定位的练习，通过实例展示了如何使用相对定位和平移改变方块颜色，提供了一步步的源码展示和效果演示，旨在帮助读者掌握CSS定位技术。文章末尾还分享了前端开发的学习思路和资源。

摘要由CSDN通过智能技术生成

大家好，今天我们来分享一下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=&