关于htmlcss的笔记

2019-04-22

1、固定悬浮框

核心语法：

1 2	position:fixed; z-index:99;

固定在右上方

/*固定在右上方*/
.fixedRight{
    background-color: limegreen;
    height: 200px;
    width: 200px;
    position: fixed!important;
    right: 20px;
    top:20px;
    z-index: 99;
}

只要改变right、left、top、bottom的值便可以得到自己想要得

底部悬浮

只需更改bottom的值，调左右便可以了


/*固定在底部*/
.fixedBottom{
    background-color: greenyellow;
    position: fixed;
    height: 40px;
    width: 100%;
    bottom: 0px;
    left: 20px;
    z-index: 99;
}

2、居中

/*居中*/
.center{
    display:-webkit-flex;
    -webkit-justify-content:center;
    -webkit-align-items: center;
}

随鼠标移动的悬浮框的实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
    #floatDiv{
        position: absolute;
        height: 40px;
        width: 150px;
        background-color: deepskyblue;
    }
    </style>
    <body>
        <div id="floatDiv" style="">
            我是悬浮的
        </div>
    </body>
    <script>
        document.onmousemove=function(even){
            // 获得当前鼠标的坐标，设置浮动框坐标为鼠标坐标
            var floatDiv = document.getElementById("floatDiv");
            floatDiv.style.top = even.clientY +"px";
            floatDiv.style.left = even.clientX+"px";
        }
    </script>
</html>

雷姆蓝

#91bef0