弹出层基础布局

来源：互联网发布：单片机最小系统板编辑：程序博客网时间：2024/05/22 16:39

（1）加载层

一个固定宽高的元素在水平垂直方向居中：

.center{

top: 0;

left: 0;

bottom: 0;

right: 0;

margin: auto;

position: absolute;

height: 100px;

width: 100px;

}

一个不定宽高元素水平垂直居中：

.middle{    position: absolute;    top:50%;    left:50%;    transform:translate(-50%,-50%);    -webkit-transform:translate(-50%,-50%);    -moz-transform:translate(-50%,-50%);    -ms-transform:translate(-50%,-50%);    -o-transform:translate(-50%,-50%);}

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,target-densitydpi=device-dpi">    <title>弹出层</title>    <style>        *{padding:0;margin:0;}        .proper{            position: absolute;            width: 100%;            height: 100%;            left:0;            top:0;            right: 0;            background-image: url("../public/images/loading-2.gif");            background-repeat: no-repeat;            background-position: center;            background-size: 24px 24px;            opacity: .5;        }    </style></head><body>    <div class="proper"></div></body></html>

（2）提示层

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,target-densitydpi=device-dpi">    <title>弹出层</title>    <style>        *{padding:0;margin:0;}        .tips{            position: absolute;            width: 80px;            height: 80px;            background-color: #333;            opacity: .5;            border-radius: 8px;            left:50%;            right: 0;            top: 50%;            bottom: 0;            margin-left: -40px;            margin-top: -40px;        }        .tips-img{            width: 24px;            height: 24px;            margin-top: 20px;        }        .container{text-align: center;}        .tips .text{font-family: 'Microsoft Yahei', verdana;font-size: 14px;color: #fff;line-height: 32px;}    </style></head><body>    <div class="tips">        <div class="container">            <img src="../public/images/loading-2.gif" class="tips-img">            <p class="text">加载中...</p>        </div>    </div></body></html>

阅读全文

0 0