固定定位 和 三行三列布局

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>QQ客服固定定位</title>
  8. <link rel="stylesheet" href="./css/kf.css">
  9. </head>
  10. <body>
  11. <div class="kf">
  12. <img src="https://ibb.co/4NS2nYZ" alt="" class="tp">
  13. </div>
  14. </body>
  15. </html>

kf.css

  1. .tp{
  2. position: fixed;
  3. left: 80%;
  4. }
  5. html{
  6. background-color: cornsilk;
  7. position: relative;
  8. min-height: 1500px;
  9. }

三行三列的定位布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <link rel="stylesheet" href="./css/xm3.css">
  9. </head>
  10. <body>
  11. <header>
  12. <h1>页眉</h1>
  13. </header>
  14. <div class="mainbody">
  15. <aside class="left">左边栏</aside>
  16. <main class="main">中间栏</main>
  17. <aside class="right">右边栏</aside>
  18. </div>
  19. <footer>
  20. <h1>页脚</h1></footer>
  21. </body>
  22. </html>

css样式

body.css

  1. @import url(/css/header.css);
  2. @import url(/css/footer.css);
  3. @import url(./mainbody.css);
  4. *{
  5. padding: 0;
  6. margin: 0;
  7. box-sizing: border-box;
  8. }

mainbody.css

  1. .mainbody{
  2. background-color: beige;
  3. height: 80vh;
  4. display: flex;
  5. }
  6. .main{
  7. width: 60%;
  8. background-color: rgb(107, 184, 19);
  9. min-height: 20vh;
  10. }
  11. .left{
  12. background-color: violet;
  13. min-width: 20%;
  14. min-height: 20vh;
  15. }
  16. .right{
  17. min-width: 20%;
  18. min-height: 20vh;
  19. background-color: lawngreen;
  20. }

header.css

  1. header{
  2. background-color: aqua;
  3. width: 100vw;
  4. height: 10vh;
  5. line-height: 10vh;
  6. text-align: center;
  7. }

footer.css

  1. footer{
  2. background-color: aqua;
  3. height: 10vh;
  4. line-height: 10vh;
  5. text-align: center;
  6. }