博客列表 >第五课 浮动与定位 4月26日

第五课 浮动与定位 4月26日

Wenlong的博客
Wenlong的博客原创
2019年04月28日 10:36:00771浏览

4月26日作业

1.用绝对定位制作登录页
2.用固定定位实现qq客服效果

###############################

浮动(folat)

1.文档流: html元素默认按照书写的顺序在浏览器中,遵循先从左到右,再从上到下进行排列
2.布局前提: 通常先将元素从文档流中脱离,这样才能随心所欲的操作
3.元素脱离文档流的手段: 浮动和绝对定位

定位(position)

定位:将元素在页面中重新排列,分为四类
1.静态定位: 浏览器默认方式, 即文档流中的位置
2.相对定位: (relative)元素并未脱离文档流,只是相对于它原来的位置,做相对移动,参照物是该元素在文档流中的位置九宫格.png

如图:设置一个位置宽高都是1px,要是想从1位置移动到9位置; position:relative;top:-2px;left;-2px;所移动的参照位置就是1位置;

3.绝对定位: (absolate)元素脱离文档流重新排列,不论元素之前是什么类型,全部转为块元素,支持宽高,参照物是他的定位父级元素或窗口,如果父级元素设置了相对定位,绝对定位的参照物就是父级元素,如果父级元素没有做相对定位,参照物则是

4.固定定位: (fixed)始终相对于浏览器的窗口做为定位父级,进行定位

绝对定位实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位登陆界面</title>
    <style>
        body{
            background-image:url("https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/04/0E/ChMkJlxG_ruIR3nAABa65fI7gMMAAuhmQIXEVwAFrr9023.jpg");
           /* height: 2000px;*/
            background-size: cover;
        }
        .shade{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;

            /* 将背景设置为纯黑,并通过透明度使背影内容透出来 */
            background-color: black;
            opacity: 0.5;
        }
        .login{
            color: white;
            padding-top: 20px;
            text-align: center;
            border: 1px solid #888888;
            width: 500px;
            height: 200px;
            background-color: black;
            opacity: 0.8;
          position: absolute;
            top:50%;
            left: 50%;
        }
        .login{
            margin-top: -100px;
            margin-left: -250px;
        }
        input,label{
            margin: 10px;
        }
    button{
        margin: 5px;
    }
     a{
         padding-right: 10px;
     }
        </style>
</head>
<body>
<div class="shade">
    <div class="login">
        <label for="username">用户名:</label>
        <input type="text" name="username" id="username"><br>
        <label for="password">密   码:</label>
        <input type="password" name="password" id="password"><br>
        <button>登陆</button><button>取消</button>
        <p><a href="">请注册</a>|<a href="" style="padding-left: 10px;">忘记密码?</a></p>
    </div>
</div>
</body>
</html>

运行实例 »

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

QQ客服实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{width:100%;height:2000px;background-image:url("https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/04/0E/ChMkJlxG_ruIR3nAABa65fI7gMMAAuhmQIXEVwAFrr9023.jpg");}
        .qq{width: 500px;height: 300px;border: solid 1px;background-color: #FF9966;position: fixed;right: 0%; top:60%;}
        h2{margin-left:40px;margin-top: 40px; }
    </style>
</head>
<body>
<div class="qq">
    <h2>客服1</h2>
    <h2>客服2</h2>
    <h2>客服3</h2>
</div>
</div>
</body>
</html>

运行实例 »

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


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议