zoukankan      html  css  js  c++  java
  • css定位

    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;
    }

  • 相关阅读:
    再见 2020, 愿“山河无恙,人间皆安”| 年终总结
    Oracle
    Linux安装
    线程池
    AutoJS
    VSCode
    c++ 解析yaml文件
    管道: 哪些命令能直接从管道的输出中读取?
    K8S 集群部署
    Android项目实战(六十一):pdf文件用图片方式预览
  • 原文地址:https://www.cnblogs.com/mumu597/p/9694264.html
Copyright © 2011-2022 走看看