登录  /  注册
博主信息
博文 45
粉丝 0
评论 1
访问量 31917
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
使用css的定位制作登录页面
源逸
原创
950人浏览过

1.相对定位position:relative;它是相对于当前位置来进行定位

2.绝对定位position:absolute;它是脱离了原文档流,需要给它一个参照物,所以给它套一个父级来作为参照

3.使用绝对定位要结合相对定位来使用,如果需要使用绝对定位,应给绝对定位添加一个父级来参照,这就相对于父级来定位元素

4.固定定位position:fixed;顾名思义就是固定

5.本篇使用到Font Awesome字体库来美化页面

实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用定位制作登录页面和在线客服(固定定位,绝对定位,相对定位)2019/04/26</title>
    <link rel="stylesheet" href="static/lib/font-awesome-4.7.0/css/font-awesome.min.css">
    <style type="text/css">
        *{margin:0;padding:0;}
        button{border:none;}
        a:link {text-decoration:none;}
        a:visited {text-decoration:none;}
        body{
            height:2000px;
        }
        .log-img{
            position:relative;
            margin-top: 70px;
            width:100%;
            height:600px;
            background-image: url("https://gtms01.alicdn.com/tps/i1/TB1GTCYLXXXXXcHXpXXcoeQ2VXX-2500-600.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
        }
        .log-weight{
            height: 18px;
            line-height: 18px;
            font-size: 16px;
            color: #3c3c3c;
            margin-top: 9px;
            padding-bottom: 8px;
            font-weight: 700;
        }
        .form-log{
            position:absolute;
            background-color:#E9E9F2;
            top: 260px;
            right: 229px;
            width:350px;
            height:300px;
            text-align:center;
        }
        .log-input input{
            width:250px;
            height:32px;
        }
        .log-input{
            position:relative;
        }
        .user{
            display:block;
            position:absolute;
            background-color:#ddd;
            color:#fff;
            width:35px;
            height:35px;
            left:12px;
            top:30px;
        }
        .log-input input{
            margin:29px;
        }
        button{
            display:block;
            position:absolute;
            width:255px;
            height:38px;
            color:#fff;
            text-align:center;
            line-height: 32px;
            left:47px;
            top:240px;
            background-color:#F52B00;
        }
        button:hover{
            background-color:#ff4400;
        }
        .comment{
            position:fixed;
            right:5px;
            bottom:11px;
        }
        .comment :hover{
            color:lightblue;
        }
    </style>
</head>
<body>
    <div class="log-img"></div>
    <div class="form-log">
        <div>
        <form action="" method="">
            <div class="log-weight">密码登录</div>
        <div class="log-input">
            <libel class="user"><i class="fa fa-user fa-2x"></i></libel>
            <input type="text" placeholder="会员名/手机/邮箱" autofocus required>
        </div>
        <div class="log-input">
            <libel class="user"><i class="fa fa-lock fa-2x"></i></libel>
            <input type="password" required>
        </div>
            <div class="sub">
                <button>登录</button>
            </div>
        </form>
        </div>
    </div>
    <div class="comment" title="在线客服"><a href=""><i class="fa fa-comments fa-2x"></i></a></div>
</body>
</html>

运行实例 »

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


批改状态:未批改

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

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

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