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

作业1：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>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;            
        }
        .kh{
              width: 150px;
              height: 170px;
              margin: 100px 140px;
        }
        .kh ul li{
            list-style:none;
        }
        .kh .left{
             display: inline-block;
             width: 31px;
             height: 170px;
             background-color: red;
             position: relative;
            color: white;
        }
        .kh  .left li{
            position: absolute;
            top: 6%;
            left: 6px;
        }
        .kh  .left li img{
            position: absolute;
            top: 95px;
            left: -3px;
            right: 0px;
            width: 25px;
             height: 20px;
        }
        .kh .right{
            display: inline-block;
            float:right;
            width: 119px;
            position: relative;
        }
        .kh .right li{
            text-align: center;
            font-size: 6px;
        }
        .kh .right li img{
            width: 30px;
            height: 33px;
            text-align: center;
        }
    </style>
</head>
<body>
       <div class="kh">
              <ul class="left">
                  <li>在线客服</li>
                  <li><img src="./demo8/信息.png" alt=""></li>
              </ul>
            <ul class="right">
                <li><img src="./demo8/QQ.png" alt=""></li>
                <li>QQ客服</li>
                 <br>
                <li><img src="./demo8/电话.png" alt=""></li>
                <li>4000-121-929</li>
                <li>(7 X 24小时)</li>
            </ul>
    </div>
</body>
</html>

作业2 三行三列的定位布局

— 图例

— 代码

<!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>
    <style>
        *{
        padding: 0;
         margin: 0;
        box-sizing: border-box; 
         }
       header {
            background-color: red;
            width: 400px;
            text-align: center;
         }
         .zt{
             width: 400px;
             height: 200px;
             background-color:burlywood;
             position: relative;
             text-align: center;
         }
         .zt div {
             width: 40px;
             height: 200px;
             position:absolute;
             text-align: center;
         }
         .zt  div:first-of-type{
            top: 0;
            left: 0;
            background-color: yellowgreen;
         }
         .box .zt  main {
             width: 320px;
            height: 200px;
            position: absolute;
            left: 41px;
            right: 41px;
         }
         .zt div:last-of-type{
             top: 0;
             right: 0;
             background-color: cadetblue;
         }
         footer{
            width: 400px;
             text-align: center;
             background-color: fuchsia;
         }
    </style>
</head>
<body>
   <div class="box">
     <header>头部</header>
     <div class="zt">
         <div>左边</div>
         <main>主体主体主体主体</main>
         <div>右边</div>
     </div>     
     <footer>底部</footer>
   </div>
</body>
</html>

相关文章