相对定位练习

最新推荐文章于 2024-12-27 15:22:25 发布

q1575290554

最新推荐文章于 2024-12-27 15:22:25 发布

阅读量508

点赞数

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

本文链接：https://blog.youkuaiyun.com/Q1575290554/article/details/125477135

版权

前端专栏收录该内容

28 篇文章

订阅专栏

本文介绍了如何使用div和a标签在页面上创建粉色背景的链接，设置宽度和高度为100px，并通过CSS实现鼠标悬停效果。同时，运用相对定位技巧调整每个链接的位置，如#first位于左上角，#second偏移200px和-100px等。

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

使用div和a标签布局页面

每个超链接宽度和高度都是100px，背景颜色粉色，鼠标指针移上去变为蓝色
使用相对定位改变每个超链接的位置

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位练习</title>

    <link rel="stylesheet" href="css/style.css">

</head>
<body>
<div id="box">
    <a href="#" id="first">链接一</a>
    <a href="#" id="second">链接二</a>
    <a href="#" id="third">链接三</a>
    <a href="#" id="four">链接四</a>
    <a href="#" id="five">链接五</a>
</div>
</body>
</html>

body{
    padding: 50px;
}

#box{
    width: 300px;
    height: 300px;
    border: 1px solid green;
    padding: 10px;
}
a{
    width: 100px;
    height: 100px;
    text-decoration: none;
    background: #e67589;
    color: white;
    line-height: 100px;
    text-align: center;
    display: block;
}
a:hover{
    background: #7878df;
}
#first{

}
#second{
    position: relative;
    left: 200px;
    top: -100px;
}
#third{
    position: relative;
    left: 100px;
    top: -100px;
}
#four{
    position: relative;
    left: 200px;
    top: -100px;
}
#five{
    position: relative;
    top: -200px;
}