position格式布局

布局大体分为:

 位置——position 

  绝对坐标                                                                      

                   absolute                                                                         

                   绝对定位的元素                                                    

                   不受其他位置影响                                                        

                   可通过z-index进行层次分级

                   body来定位自己                                          

   相对坐标

                    设置  top和left之后  

                    relative 

                     同级元素定位 

                     实际占有页面

                     可通过z-index进行层次分级   

 锁定(广告)坐标

                      fixed

                      不会随滚动条滚动而滚动

 

 

 

 

 

 

全局去下划线

 

a<text-decoration:none>

 

指向下划线,用于超链接

 

a : hover
<texe-decoration:none>

 

 

 

 

指向隐藏与定位————战!111

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
            .aa {
                width: 100px;
                height: 50px;
                background-color: #0FF;                      
                position: relative;/*相对坐标*/
                overflow: hidden; /*超出部分隐藏掉*/
                cursor: pointer; /*指向变小手*/} 
            .aa:hover {    /*当指向aa的时候*/
                overflow: visible;/*超出部分显示*/
            }
            
            .bb {
                width: 100px;
                height: 50px;
                background-color: #C00;
                position: relative;
                top: 50px;
                overflow: hidden;
            }
            
            .bb:hover {
                overflow: visible;
            }
            
            .cc {
                width: 100px;
                height: 50px;
                background-color: #F69;
                position: relative;
                margin-left: 100px;
            }
            
            .ee {
                width: 100px;
                height: 50px;
                background-color: #0F0;
                position: relative;
                top: 50px;
                overflow: hidden;
            }
            
            .ee:hover {
                overflow: visible
            }
            
            .ff {
                width: 100px;
                height: 50px;
                background-color: #000;
                position: relative;
                left: 100px;
            }
        </style>
    </head>

    <body>
        <div class="aa">
            <div class="bb">
                <div class="cc"></div>
            </div>
            <div class="ee">
                <div class="ff"></div>
            </div>

        </div>
    </body>

</html>

 

posted @ 2016-12-23 22:25  长腿野生璇  阅读(278)  评论(1编辑  收藏  举报