三行三列的定位布局中演示QQ客服的固定定位
16lz
2021-07-14
我们通常在网页布局中希望加入QQ客服列表,这里在三行三列的定位布局中演示下QQ客服的固定定位,以下是效果图和源码示例:
实例
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>三行三列的定位布局中演示QQ客服的固定定位</title><style>/*在线QQ客服的固定定位:滚动浏览器QQ客服框位置保持不变*/.qq{width:16.8rem;height:32.8rem;/*border:5pxsolidrgb(206,205,205);*/right:0em;bottom:5em;position:fixed;/*对QQ客服框进行置顶显示,以免被覆盖*/z-index:9999;}/*三行三列的定位布局*/*{margin:0;padding:0;box-sizing:border-box;}:root{font-size:10px;}body{font-size:1.6rem;}header,footer{height:5rem;background-color:lightcyan;}.container{margin:0.5rem0;min-height:calc(100vh-11rem);position:relative;}.containermain{/*border:1pxsolidred;*/position:absolute;left:20.5rem;right:20.5rem;background-color:lightblue;min-height:inherit;}.containeraside{width:20rem;background-color:yellow;min-height:inherit;position:absolute;}.containeraside:first-of-type{left:0;top:0;}.containeraside:last-of-type{right:0;top:0;}</style></head><body><!--QQ客服的固定定位演示结果嘛,一行搞定--><divclass="qq"><imgsrc="https://img.php.cn/upload/image/314/432/404/1626188810561389.png"alt="QQ客服"title="QQ客服"></div><!--三行三列的定位布局--><header>头部</header><divclass="container"><aside>左侧</aside><main>内容区</main><aside>右侧</aside></div><footer>底部</footer></body></html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
更多相关文章
- 前端作业-在线QQ客服的固定定位&三行三列的定位布局
- 固定定位以及三行三列的定位布局
- 在线客服固定定位和三行三列布局
- CSS固定定位及传统三行三列布局实例
- 固定定位的联系客服+简易的三行三列布局
- 固定定位,三行三列定位布局
- html之常用布局实例
- 定位以及三行三列布局方式
- 固定定位及传统三行三列布局练习