首页 > > 网页制作 > css >

css定位

2018-09-29 03:51:56来源：博客园阅读 ()

html部分

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css定位</title>
<link rel="stylesheet" href="2.css">
</head>
<body>
<h1>定位：相对定位</h1>
<p>我是个俗气至顶的人，见山是山，见海是海，见花便是花。</p>
<p1>我是个俗气至顶的人，见山是山，见海是海，见花便是花。</p1>
<p>唯独见了你，云海开始翻涌，江潮开始澎湃，昆虫的小触须挠着全世界的痒。</p>
<p2>唯独见了你，云海开始翻涌，江潮开始澎湃，昆虫的小触须挠着全世界的痒。</p2>
<p>你无需开口，我和天地万物便通通奔向你。</p>
<p3>你无需开口，我和天地万物便通通奔向你。</p3><br>
<img src="2.jpg" width="450" height="312">
<h2>定位：绝对定位</h2>
<p>我是个俗气至顶的人，见山是山，见海是海，见花便是花。</p>
<p4>我是个俗气至顶的人，见山是山，见海是海，见花便是花。</p4>
<p>唯独见了你，云海开始翻涌，江潮开始澎湃，昆虫的小触须挠着全世界的痒。</p>
<p5>唯独见了你，云海开始翻涌，江潮开始澎湃，昆虫的小触须挠着全世界的痒。</p5>
<p>你无需开口，我和天地万物便通通奔向你。</p>
<p6>你无需开口，我和天地万物便通通奔向你。</p6><br>
<h3>定位：绝对定位</h3>
<p>我是个俗气至顶的人，见山是山，见海是海，见花便是花。</p>
<p7>我是个俗气至顶的人，见山是山，见海是海，见花便是花。</p7>
<p>唯独见了你，云海开始翻涌，江潮开始澎湃，昆虫的小触须挠着全世界的痒。</p>
<p8>唯独见了你，云海开始翻涌，江潮开始澎湃，昆虫的小触须挠着全世界的痒。</p8>
<p>你无需开口，我和天地万物便通通奔向你。</p>
<p9>你无需开口，我和天地万物便通通奔向你。</p9><br>
</body>
</html>
css部分

p1
{
   color:red;
}
p2
{
   color:red;
}
p3
{
   color:red;
}
p4
{
   color:red;
}
p5
{
   color:red;
}
p6
{
   color:red;
}
p7
{
   color:red;
}
p8
{
   color:red;
}
p9
{
   color:red;
}
p2
{
position:relative;
left:-20px
}
p3
{
position:relative;
left:20px
}
h2
{
   font-size:35px;
}
p4
{
position:absolute;
left:20px;
top:730px
}p5
{
position:absolute;
left:-20px;
top:765px
}
p6
{
position:absolute;
left:40px;
top:805px
}
p7
{
position:fixed;
right:5px;
top:200px;
}
p8
{
position:fixed;
right:5px;
top:300px;
}
p9
{
position:fixed;
right:5px;
top:400px;
}