1. 制作一个在线QQ客服的固定定位(QQ客服用图片就行)

<!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>
    <link rel="stylesheet" href="./css/kf.css">
</head>
<body>
    <div class="kf">
        <img src="https://ibb.co/4NS2nYZ" alt="" class="tp">
    </div>
</body>
</html>

kf.css

.tp{
    position: fixed;
    left: 80%;
}
html{
    background-color: cornsilk;
    position: relative;
    min-height: 1500px;
}

三行三列的定位布局

<!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>Document</title>
    <link rel="stylesheet" href="./css/xm3.css">
</head>
<body>
    <header>
        <h1>页眉</h1>
    </header>
   <div class="mainbody">
    <aside class="left">左边栏</aside>
       <main class="main">中间栏</main>
       <aside class="right">右边栏</aside>
</div>
    <footer>
        <h1>页脚</h1></footer>
</body>
</html>

css样式

body.css

@import url(/css/header.css);
@import url(/css/footer.css);
@import url(./mainbody.css);
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

mainbody.css

.mainbody{
    background-color: beige;
    height: 80vh;
    display: flex;
  }
  .main{
      width: 60%;
    background-color: rgb(107, 184, 19);
    min-height: 20vh;
  }
.left{
    background-color: violet;
    min-width: 20%;
    min-height: 20vh;
}
.right{
    min-width: 20%;
    min-height: 20vh;
    background-color: lawngreen;
}

header.css

header{
    background-color: aqua;
    width: 100vw;
    height: 10vh;
    line-height: 10vh;
    text-align: center;
}

footer.css

footer{
    background-color: aqua;
    height: 10vh;
    line-height: 10vh;
    text-align: center;
}

固定定位和三行三列布局

1. 制作一个在线QQ客服的固定定位(QQ客服用图片就行)

kf.css

三行三列的定位布局

css样式

相关文章

固定定位 和 三行三列布局

1. 制作一个在线QQ客服的固定定位(QQ客服用图片就行)

kf.css

三行三列的定位布局

css样式

相关文章

固定定位和三行三列布局