zoukankan      html  css  js  c++  java
  • css10定位属性

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>定位属性</title>
        <style type="text/css">
            /*
               position
              01.relative:相对定位,相对于自身原来的位置
              02.absolute:绝对定位,相当于父级
              03.fixed : 固定定位    相对于浏览器
              04.static :默认值
            */
        img{
            position: fixed;  /*固定定位*/
            left: 50px;
            top: 20px;
        }
       #a{
           position: absolute; /*绝对定位*/
           top: 20px;
           height: 50px;
           width: 50px;
           background-color: blue;
       }
       #b{
           height: 50px;
           width: 50px;
           background-color: deeppink;
       }
       #c{
           position: relative; /*相对定位*/
           height: 50px;
           width: 50px;
           background-color: green;
       }
        </style>
    </head>
    <body>
    
        <div id="a"></div>
        <div id="b"></div>
        <div id="c"></div>
      <img src="image/cat.jpg"  width="50px" height="50px">
    </body>
    </html>

    运行效果图

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>相对定位</title>
        <style  type="text/css">
             div{
                 margin: 10px;
                 padding: 5px;
                 font-size: 12px;
                 line-height: 25px;
             }
    /*
    position属性:
      static:默认值,没有定位!
      relative:相对定位! 相对于自身原来的位置!也就是现在的位置,按照定位能还原到原本的位置!
                设置相对定位的盒子,原本的位置会被留下来!
    */
            #father{
                border: 1px solid  red;
            }
            #first{
                border: 1px dashed  orange;
                background-color:orange ;
                position: relative;
                /*top: 20px;
                left: 20px;*/
            }
            #second{
                border: 1px dashed  pink;
                background-color:pink ;
                position: relative;
                float: right;
            }
            #third{
                border: 1px dashed  yellowgreen;
                background-color:yellowgreen ;
                position: relative;
            }
        </style>
    </head>
    <body>
      <div id="father">
           <div id="first">第1个盒子</div>
           <div id="second">第2个盒子</div>
           <div id="third">第3个盒子</div>
      </div>
    </body>
    </html>
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>花样连接</title>
        <style type="text/css">
             div{
                 width: 300px;
                 height: 300px;
                 border: 1px solid red;
                 padding: 10px;
             }
            a{
                display: block;
                height: 80px;
                width: 80px;
                background-color:pink ;
                text-decoration: none;
                text-align: center;
                line-height: 80px;
            }
            #a2,#a4{
                position: relative;
                left:180px;
                top: -80px;
            }
            #a5{
                position: relative;
                left:90px ;
                top: -240px;
            }
            a:hover{
                background: blue;
                text-decoration: underline;
                color: deeppink;
            }
    
        </style>
    </head>
    <body>
    <div id="box">
        <a href="#" id="a1">链接1</a>
        <a href="#" id="a2">链接2</a>
        <a href="#" id="a3">链接3</a>
        <a href="#" id="a4">链接4</a>
        <a href="#" id="a5">链接5</a>
    </div>
    </body>
    </html>
    /*
    position属性:
      static:默认值,没有定位!
      relative:相对定位! 相对于自身原来的位置!也就是现在的位置,按照定位能还原到原本的位置!
                设置相对定位的盒子,原本的位置会被留下来!
      absolute:绝对定位:相对于离当前元素最近的一个已经定位的父级元素为基准!
                如果父级元素没有设置定位属性,则以浏览器为准!
                元素的位置发生变化之后,脱离了标准的文档流!它原来的位置不会保留!
      fixed: 固定定位! 相对于浏览器的!
      z-index: 设置层叠! 数值越大,离我们越近!  对于没有设置position属性的元素无效!
    */
  • 相关阅读:
    Oracle创建表空间、创建用户以及授权、查看权限
    zf2 数据库连接
    ZF2.0用户向导 —— 6. 数据库及模型(Models)
    zf2配置
    zend framework2使用教程【一】安装
    config/application.config.php
    zf2\config\application.config.php
    zf2 数据库album demo
    albumController.php
    登录
  • 原文地址:https://www.cnblogs.com/999-/p/6051320.html
Copyright © 2011-2022 走看看