下面将展示我写的关于固定定位的QQ客服页面代码及效果图
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="static/css/demo2.css"> </head> <body> <h2>QQ客服</h2> <div class="a1"> <button onclick="a()">X</button> <h1>QQ在线</h1> <h1>咨询客服</h1> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
.a1{
width: 350px;
height: 250px;
background-color: lemonchiffon;
position: fixed;
right: 0;
bottom: 50%;
}
button{
float:right ;
margin-top: 10px;
margin-right: 20px;
border: none;
background: none;
}
h1{
position: relative;
left: 50px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
上面代码及效果图运用了固定方法的一些属性等
2.本次我学到了固定定位和浮动的用法
position:fixed ;固定定位
float:right; 向左浮动
position: relative;相对定位 设置字体位置
