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>
  12.     <div class="kf">
  13.         <img src="https://ibb.co/4NS2nYZ" alt="" class="tp">
  14.     </div>
  16. </body>
  17. </html>

kf.css

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

三行三列的定位布局

  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>
  17.    <div class="mainbody">
  18.     <aside class="left">左边栏</aside>
  19.        <main class="main">中间栏</main>
  20.        <aside class="right">右边栏</aside>
  23. </div>
  27.     <footer>
  28.         <h1>页脚</h1></footer>
  29. </body>
  30. </html>

css样式

body.css

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

mainbody.css

  1. .mainbody{
  2.     background-color: beige;
  3.     height: 80vh;
  4.     display: flex;
  6.   }
  10.   .main{
  11.       width: 60%;
  12.     background-color: rgb(107, 184, 19);
  14.     min-height: 20vh;
  15.   }
  17. .left{
  18.     background-color: violet;
  19.     min-width: 20%;
  20.     min-height: 20vh;
  22. }
  23. .right{
  24.     min-width: 20%;
  25.     min-height: 20vh;
  26.     background-color: lawngreen;
  28. }

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{
  3.     background-color: aqua;
  4.     height: 10vh;
  5.     line-height: 10vh;
  6.     text-align: center;
  7. }

更多相关文章

  1. 0702 作业请求老师审批
  2. CSS_0702作业
  3. 关于定位的总结以及相关单位的理解
  4. 三行三列的定位布局中演示QQ客服的固定定位
  5. 前端作业-在线QQ客服的固定定位&三行三列的定位布局
  6. 固定定位以及三行三列的定位布局
  7. 在线客服固定定位和三行三列布局
  8. CSS固定定位及传统三行三列布局实例
  9. 固定定位的联系客服+简易的三行三列布局

随机推荐

  1. 解决Flutter 编译异常path_provider
  2. Android App开发基础篇—数据存储(SP和文
  3. 服务器搭建快速入门——适用于Android应
  4. Android下的配置管理之道之高通拆仓
  5. Android开发规范详解
  6. 【Android】进程与线程基本知识
  7. 【Android】Android 多个APK数据共享
  8. android httpclient基本用法
  9. Android 应用程序签名、发布
  10. 获取Android SDK 源代码并在Eclipse中关