TypechoJoeTheme

小屿's Blog

统计
登录
用户名
密码

相对定位练习

2021-01-22
/
0 评论
/
76 阅读
/
正在检测是否收录...
01/22
  • 使用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;
}
朗读
赞(0)
版权属于:

小屿's Blog

本文链接:

http://koibito.top/index.php/archives/102/(转载时请注明本文出处及文章链接)

评论 (0)
夜空
码农生来就只知道前进
59 文章数
7 评论量

人生倒计时

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月