博主信息
博文 18
粉丝 0
评论 0
访问量 12767
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
浮动与定位实例 2019-04-26
偏执的博客
原创
788人浏览过
  1. 绝对定位登录窗口

  2. 实例

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    	<title>绝对定位做登录窗口</title>
    	<style type="text/css">
    body {
    	margin:0;
    	background-image:url("C:/Users/wxd-mac-win/Documents/学习/0426/static/images/php.jpg");
    	background-size: cover;
    	
    }
    
    .shade {
    	position:absolute;
    	/*左上角*/
    	left:0;
    	top:0;
    	width:100%;
    	height:100%;
    	background-color: black;
    	opacity:0.7;
    }
    
    
    .login {
    	height: 220;
        width:420;
    	background-color: lightblue;
    	position:absolute;
    	left: 50%;
    	top:50%;
        margin-left:-210px;
    	margin-top:-110px;
    
    }
    
      .world{
                width:420px;
                height:160px;
                text-align:center;
            }
    
    
    
    	</style>
    
    </head>
    <body>
    <div class="shade"></div>
    <div class="login">
    <div class="world">
    <form action="" method="post">
       <p>
           <label for="usename">帐号:</label>
           <input type="text" name="usename" id="usename" autofocus placeholder="不超过8个字母" requied>
       </p>
    
       <p>
           <label for="password">密码:</label>
           <input type="password" id="password" name="password" placeholder="6-12个字母">
       </p>
    
       <p><button>登录</button></p>
    </form></div></div>
    
    </body>
    </html>

    运行实例 »

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

    2.固定定位实现QQ客服效果

实例

<!DOCTYPE html>
<html>
<head>
	<title>固定定位QQ客服效果</title>
	<style type="text/css">

body {
	height: 2000px
}

.serve {
     width:150px;
     height:80px;
     background-color: lightyellow;
     position: fixed;
     right:0;
     bottom:50%; 
}




	</style>
</head>
<body>
<div class="serve">

<span class="title">在线咨询</span><br>
<span class="signature">服务时间 9:00-20:00</span>
</div>

</body>
</html>

运行实例 »

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


批改状态:未批改

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

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

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