大家好,今天我们来分享一下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方块定位的练习就讲到这里了,谢谢大家