作业内容：

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>Document</title>
  8.     <style>
  9.         *{
  10.             margin: 0px;
  11.             padding: 0px;
  12.             box-sizing: border-box;
  13.         }
  14.         body{
  15.             /* position: relative; */
  16.         }
  17.         div img{
  18.             position: fixed;
  19.             right: 0px;
  20.             top: 30px;
  21.         }
  22.         div{
  23.             width: 100%;
  24.             height: 10000px;
  25.             background-color: brown;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div><img src="./1.png" alt=""></div>
  32. </body>
  33. </html>

2. 仿课堂案例写一个三行三列的定位布局, 色块或边框代表内容就可以;

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>三行三列布局</title>
  8.   </head>
  9.   <style>
  10.       :root{
  11.           font-size: 10px;
  12.       }
  13.     *{
  14.         margin: 0px;
  15.         padding: 0px;
  16.         box-sizing: border-box;
  17.     }
  18.     body{
  19.         font-size: 16px;
  20.     }
  21.     footer,header{
  22.         height: 5em;
  23.         background-color: thistle;
  24.     }
  25.     .container{
  26.         min-height: calc(100vh - 2 * 5em - 2 * 1rem);
  27.         background-color: tomato;
  28.         position: relative;
  29.         margin:1rem 0px;
  30.     }
  31.     .container aside{
  32.         width: 20rem;
  33.         min-height: inherit;
  34.         position: absolute;
  35.     }
  36.     .container aside:first-child{
  37.         background-color: wheat;
  38.         top: 0px;
  39.         left: 0px;
  40.     }
  41.     .container aside:last-child{
  42.         background-color: yellowgreen;
  43.         top: 0px;
  44.         right: 0px;
  45.     }
  46.     .container main{
  47.         min-height: inherit;
  48.         background-color: blueviolet;
  49.         position: absolute;
  50.         top: 0px;
  51.         left: 21rem;
  52.         right: 21rem;
  53.         margin: 0rem 1rem;
  54.     }
  55.   </style>
  56.   <body>
  57.        <header>页眉</header>
  58.        <div class="container">
  59.            <aside>左侧</aside>
  60.            <main>内容</main>
  61.            <aside>右侧</aside>
  62.        </div>
  63.        <footer>页脚</footer>
  64.   </body>
  65. </html>

3. 将之前落下的作业补齐;

4. 在mdn上预习flex和js的知识,下周要学习.

更多相关文章

  1. 固定定位的联系客服+简易的三行三列布局
  2. CSS-作业
  3. html之常用布局实例
  4. 0630作业
  5. QQ在线客服，定位布局
  6. 在线QQ客服的固定定位以及三行三列的定位布局
  7. 7/30号作业
  8. 运营级在线客服/来客客服/带非常完整的搭建教程/带评价管理
  9. 0628前端作业

随机推荐

  1. android空间动画
  2. Android Studio 官方示例源码地址
  3. android:layout_marginLeft 与 android:l
  4. RelativeLayout常用属性介绍-----开发日
  5. Android Intent 用法汇总
  6. Android学习—— Android资料之-系统自带
  7. Android ImageButton android:scaleType
  8. Android: WebView tips & tricks
  9. android广播动态注册与发送流程分析
  10. Android(安卓)核心分析 之六 -----IPC框