PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布
首页
课程
路径
文章
PHP培训
精品课
下载
最新更新

博客列表 > 前端作业-在线QQ客服的固定定位&三行三列的定位布局

前端作业-在线QQ客服的固定定位&三行三列的定位布局

︷肉園耔︷
︷肉園耔︷ 原创
2021年07月08日 00:42:50 508浏览
  • 作业1：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>Document</title>
  8.     <style>
  9.         *{
  10.             padding: 0;
  11.             margin: 0;            
  12.         }
  13.         .kh{
  15.               width: 150px;
  16.               height: 170px;
  17.               margin: 100px 140px;
  18.         }
  19.         .kh ul li{
  20.             list-style:none;
  21.         }
  26.         .kh .left{
  27.              display: inline-block;
  28.              width: 31px;
  29.              height: 170px;
  30.              background-color: red;
  31.              position: relative;
  32.             color: white;
  34.         }
  35.         .kh  .left li{
  36.             position: absolute;
  37.             top: 6%;
  38.             left: 6px;
  39.         }
  40.         .kh  .left li img{
  41.             position: absolute;
  42.             top: 95px;
  43.             left: -3px;
  44.             right: 0px;
  45.             width: 25px;
  46.              height: 20px;
  48.         }
  51.         .kh .right{
  52.             display: inline-block;
  53.             float:right;
  54.             width: 119px;
  55.             position: relative;
  56.         }
  57.         .kh .right li{
  58.             text-align: center;
  59.             font-size: 6px;
  60.         }
  62.         .kh .right li img{
  63.             width: 30px;
  64.             height: 33px;
  65.             text-align: center;
  66.         }
  67.     </style>
  68. </head>
  69. <body>
  72.        <div class="kh">
  73.               <ul class="left">
  74.                   <li>在线客服</li>
  75.                   <li><img src="./demo8/信息.png" alt=""></li>
  76.               </ul>
  78.             <ul class="right">
  79.                 <li><img src="./demo8/QQ.png" alt=""></li>
  80.                 <li>QQ客服</li>
  82.                  <br>
  83.                 <li><img src="./demo8/电话.png" alt=""></li>
  84.                 <li>4000-121-929</li>
  85.                 <li>(7 X 24小时)</li>
  86.             </ul>
  87.     </div>
  91. </body>
  92. </html>
  • 作业2 三行三列的定位布局

— 图例

— 代码

  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.     <style>
  9.         *{
  10.         padding: 0;
  11.          margin: 0;
  12.         box-sizing: border-box; 
  13.          }
  14.        header {
  15.             background-color: red;
  16.             width: 400px;
  17.             text-align: center;
  18.          }
  19.          .zt{
  20.              width: 400px;
  21.              height: 200px;
  22.              background-color:burlywood;
  23.              position: relative;
  24.              text-align: center;
  25.          }
  26.          .zt div {
  27.              width: 40px;
  28.              height: 200px;
  29.              position:absolute;
  30.              text-align: center;
  31.          }
  32.          .zt  div:first-of-type{
  34.             top: 0;
  35.             left: 0;
  36.             background-color: yellowgreen;
  37.          }
  38.          .box .zt  main {
  39.              width: 320px;
  40.             height: 200px;
  41.             position: absolute;
  42.             left: 41px;
  43.             right: 41px;
  45.          }
  46.          .zt div:last-of-type{
  48.              top: 0;
  49.              right: 0;
  50.              background-color: cadetblue;
  51.          }
  52.          footer{
  53.             width: 400px;
  55.              text-align: center;
  56.              background-color: fuchsia;
  58.          }
  59.     </style>
  60. </head>
  61. <body>
  63.    <div class="box">
  64.      <header>头部</header>
  65.      <div class="zt">
  66.          <div>左边</div>
  67.          <main>主体主体主体主体</main>
  68.          <div>右边</div>
  69.      </div>     
  70.      <footer>底部</footer>
  73.    </div>
  74. </body>
  75. </html>
上一条： 常量、变量与函数 下一条： mysql当查询某字段结果为空并赋值
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多
热门课程