zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    OpenCV (十二)阈值操作
    OpenCV (十一)图像金字塔
    OpenCV (十)提取水平线与垂直线
    OpenCV (九)形态学操作:开操作,闭操作,形态学梯度,顶帽,黑帽
    电商平台资料学习
    四、eslint配置rules
    三、export和export default区别
    二、安装国际化
    一、vue安装
    vue执行命令时提示错误——vue : 无法加载文件 C:UsersAdministratorAppDataRoaming pmvue.ps1,因为在此系统上禁止运行脚本
  • 原文地址:https://www.cnblogs.com/xuan584521/p/6216283.html
Copyright © 2011-2022 走看看