登录  /  注册
博主信息
博文 14
粉丝 0
评论 0
访问量 6261
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
神奇的内外边距,定位属性,和浮动属性详解。2019年4月28日10点22分
蔡小逗
原创
811人浏览过

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ登录遮罩框</title>
    <style>
        body{
            background: url("../static/images/im.qq.com.png");
            background-size: 100% auto;
        }
        .zhezhao{
            position: absolute;
            left: 0;
            top: 0;
            height: 4000px;
            width: 100%;
            background-color: #000000;
            opacity: 0.7;
        }
        .login{

            position: fixed;
            left: 50%;
            top: 50%;
            margin-left:-318px;
            margin-top: -185px;
            width: 626px;
            height: 370px;
        }
        .kf1{
            position: fixed;
            right: 0;
            bottom: 150px;
        }
        .kf2{
            position: fixed;
            right: 0;
            top: 200px;
        }
    </style>
</head>

<body>
            <div class="zhezhao"></div>
            <div class="login" onclick="this.style.display='none'">
                <img src="../static/images/login.png" alt="登录">
            </div>
            <div class="kf1">
                <img src="../static/images/im.png" alt="">
            </div>
            <div class="kf2">
                <img src="../static/images/kf.png" alt="">
                
            </div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

微信截图_20190428095902.png

微信截图_20190428100950.png

搞懂的绝对定位,相对定位,固定定位。相对定位:相对于元素本身的位置进行定位,绝对定位相对于父元素定位,无父元素就是相对于body进行定位,设置父元素就要给父元素设置 position属性,绝大多数场景用position:relative;子元素就是position: absolute;

批改状态:未批改

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学