以下是一个简单的示例:
Markup
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
position: absolute;
left: 50px;
top: 50px;
}
.div2 {
position: absolute;
left: 200px;
top: 200px;
}
</style>
</head>
<body>
<h1>标题</h1>
<div class="div1">这是第一个div</div>
<div class="div2">这是第二个div</div>
</body>
</html>
在这个示例中,我们首先定义了两个div元素的样式。position: absolute;
表示这两个div元素是绝对定位的,即它们的位置相对于最近的已定位祖先元素(如果没有已定位的祖先元素,则相对于初始包含块)。left
和top
属性用于设置这两个div元素的位置。
我们在HTML中创建了两个div元素,并分别赋予了它们类名div1
和div2
,这样,我们就可以通过CSS来控制这两个div元素的位置了。
我们在页面上显示了一个标题和一个段落,当你打开这个HTML文件时,你会看到两个div元素按照我们设定的位置排列在一起,形成了一个连线的效果。
还没有评论,来说两句吧...