简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 三行三列的定位布局中演示QQ客服的固定定位
Blogger Information
Blog 7
fans 0
comment 0
visits 5325
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
三行三列的定位布局中演示QQ客服的固定定位
X光头
Original
603 people have browsed it

我们通常在网页布局中希望加入QQ客服列表，这里在三行三列的定位布局中演示下QQ客服的固定定位，以下是效果图和源码示例：

QQ.png

2.png

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三行三列的定位布局中演示QQ客服的固定定位</title>
    <style>

/* 在线QQ客服的固定定位:滚动浏览器QQ客服框位置保持不变*/
        .qq{
            width: 16.8rem;
            height: 32.8rem;
            /* border: 5px solid rgb(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.5rem 0;
            min-height: calc(100vh - 11rem);
            position: relative;
    
        }
        .container main{
            /* border: 1px solid red; */
            position: absolute;
            left: 20.5rem;
            right: 20.5rem;
            background-color:lightblue;
            min-height: inherit;
        }
        .container aside{
            width: 20rem;
            background-color: yellow;
            min-height: inherit;
    
            position:absolute;
        }
        .container aside:first-of-type{
            left: 0; 
            top: 0;
        }
        .container aside:last-of-type{
            right: 0;
            top: 0;
        }
    
    </style>

</head>
<body>
    <!-- QQ客服的固定定位 演示结果嘛，一行搞定-->
    <div class="qq"><img src="https://img.php.cn/upload/image/314/432/404/1626188810561389.png" alt="QQ客服" title="QQ客服"></div>
    <!-- 三行三列的定位布局 -->
<header>头部</header>
<div class="container">
    <aside>左侧</aside>
    <main>内容区</main>
    <aside>右侧</aside>
</div>
<footer>底部</footer>
</body>
</html>

运行实例 »

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


Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！