zoukankan      html  css  js  c++  java
  • css中的position实例

     

    代码
    <html>
    <head>
    <style type="text/css">
    body
    {
     text-align
    :center;   /*使它的子元素div居中*/  
     
    /*如果它的子元素不指定text-align的话,那么它的子元素的text-align属性值就会继承他的父元素的text-align属性值。在这里就是text-align为center*/
    }
     .a
     
    {
        border
    :1px solid #000099;
        margin
    :20px;
        width
    :900px;
        height
    :700px;
        margin-left
    :auto;/*这句CSS居中的意思就是让div自己调整左右margin间隔的距离以达到水平居中的效果。*/
        margin-right
    :auto;
        text-align
    :left;
     
    }
     .b
     
    {
        background-color
    :#99FF66;
        width
    :600px;
        height
    :500px;
        position
    :relative;  /*relative是相对于自己来定位的,例如:#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px。*/
        top
    :50px;
        left
    :50px;
     
    }
     .c
     
    {
        background-color
    :#FF0099;
        width
    :300px;
        height
    :300px;
        position
    :absolute;
        
    /*
          如果这里position设置为absolute,那么它的父元素的position要设置为relative,否则它的位置将会相对于body而言。
        
    */
        top
    :20px;
        left
    :20px;
     
    }
    </style>
    </head>
    <body>
    <div class="a">
      我是a
      
    <div class="b">
      我是b
          
    <div class="c">
          我是c
          
    </div>
      
    </div>
    </div>
    </body>
    </html>
  • 相关阅读:
    C# 实现类库并调用
    C# pictureBox.Image获得图片的三种方法
    C# 指针使用总结
    C++ 怎样让函数返回数组
    C# 枚举与位枚举(Enum)
    Labview调用C#动态链接库dll
    C# partial 作用
    C# Internal关键字小结
    C# => 运算符
    C# 中 ??、 ?、 ?: 、?.、?[ ]
  • 原文地址:https://www.cnblogs.com/yangruipretty/p/1734011.html
Copyright © 2011-2022 走看看