Correction status:Uncorrected
Teacher's comments:
浮动与经典布局的详解
时间:2018年8月18号 天气:阴转晴天
1. 编程:固定定位制作QQ在线客 服:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固定定位操作</title> <style> .box2{ height: 2500px; width: 100%; } .box1{ width: 125px; height: 185px; background-color: white; border: 2px solid lightgray; z-index: 5px; /*box-shadow: -1px -1px gray;*/ position: fixed; top: 50%; right: 0px; display:table-cell ; text-align: center; vertical-align: middle; } .box1 p,span{ font-size: 1rem; font-weight: lighter; /*margin-top: 5px;*/ /*margin-bottom: 5px;*/ margin: 10px 5px; } /*img,p,span{*/ /*text-align: center;*/ /*}*/ </style> </head> <body> <div class="box2"> <div class="box1"> <a href="http://kf.qq.com/"><img src="img/code.jpg" alt="腾讯客 服"></a> <p>关注微信公众号</p> <span>向腾讯客 服提问</span> </div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
本机运行图: