首页 > 代码库 > 1223格式布局！！！

1223格式布局！！！

2024-08-28 23:39:36   257人阅读

布局大体分为：                             绝对坐标                                  相对坐标                                       锁定（广告）坐标

 位置——position                        absolute                                 relative                                                  fixed

                                                   绝对定位的元素                        同级元素定位                                     设置  top和left之后  

                                                  不受其他位置影响                      实际占有页面                                      不会随滚动条

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

                                                body来定位自己

 

 

全局去下划线

 

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>

 

1223格式布局！！！


联系
我们