CSS小测试

上面是样式：注意使用div 和a标签 要求鼠标放到链接上的时候会进行变色

下面是代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小测试</title>
<style>
#father {
width: 300px;
height: 300px;
border: 1px solid red;
padding: 10px; /*设置内边距*/
}
a {
width: 100px;
height: 100px;
background: #ff0099;
display: block;
text-decoration: none;
line-height: 100px;
/*line-height 和a标签一样大才能保证文本居中
这个可以理解为X轴的居中 */
text-align: center;
/* text-align: center; 这个可以理解为Y轴的居中
两者一起中即可展现出文字剧中的样式 */
color: white;
}
a:hover {
background: blue;
}
.a1 {
}
.a2 {
float: right;
position: relative;
top: -100px;
}
.a3 {
position: relative;
left: 100px;
}
.a4 {
}
.a5 {
position: relative;
left: 200px;
top: -100px;

}

</style>


</head>
<body>
<div id="father">
<a href="" class="a1">链接1</a>
<a href="" class="a2">链接2</a>
<a href="" class="a3">链接3</a>
<a href="" class="a4">链接4</a>
<a href="" class="a5">链接5</a>
</div>
</body>
</html>

 

 

posted @ 2021-12-14 17:16  码奴2002  阅读(60)  评论(0)    收藏  举报