课程作业：

  1. 制作一个在线QQ客服的固定定位(QQ客服用图片就行);
  2. 仿课堂案例写一个三行三列的定位布局, 色块或边框代表内容就可以;
  3. 将之前落下的作业补齐;
  4. 在mdn上预习flex和js的知识,下周要学习.

作业内容：

1、制作一个在线QQ客服的固定定位

知识点：

1、引用iconfont图标制作客服窗口

2、使用position:fixed；固定定位在线客服窗口位置在右边

实例代码：

  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>在线QQ客服固定定位</title>
  8.     <link
  9.       rel="stylesheet"
  10.       href="//at.alicdn.com/t/font_2650193_58a6zhtdo67.css"
  11.     />
  12.     <style>
  13.       html {
  14.         background-color: bisque;
  15.         min-height: 1500px;
  16.       }
  18.       .kefu {
  19.         width: 7em;
  20.         border: 1px solid;
  21.         padding: 20px;
  22.         margin: 20px;
  23.         text-align: center;
  24.         background-color: #3860f4;
  25.         position: fixed;
  26.         top: 30vh;
  27.         right: 0;
  28.       }
  29.       .icon-kefu {
  30.         color: #ffffff;
  31.         font-size: 6em;
  32.       }
  34.       .kefu-01 {
  35.         color: #ffffff;
  36.       }
  37.     </style>
  38.   </head>
  39.   <body>
  40.     <h1>在线客服联系固定窗口</h1>
  41.     <div class="kefu">
  42.       <a class="kefu-01">在线客服联系</a>
  43.       <br />
  44.       <div class="kefu-img"><i class="iconfont icon-kefu"></i></div>
  45.       <div class="kefu-lianxi">
  46.         <button>点击我联系客服</button>
  47.       </div>
  48.     </div>
  49.   </body>
  50. </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.     <link
  9.       rel="stylesheet"
  10.       href="//at.alicdn.com/t/font_2650193_58a6zhtdo67.css"
  11.     />
  13.     <style>
  14.       * {
  15.         margin: 0;
  16.         padding: 0;
  17.         box-sizing: border-box;
  18.       }
  20.       /* body *:not(.container) {
  21.         background-color: lightgreen;
  22.       } */
  24.       :root {
  25.         font-size: 10px;
  26.       }
  28.       body {
  29.         font-size: 1.6rem;
  30.       }
  32.       header,
  33.       footer {
  34.         height: 10rem;
  35.         text-align: center;
  36.         background-color: lightskyblue;
  37.         min-width: inherit;
  38.       }
  40.       .container {
  41.         margin: 0.5rem 0;
  42.         position: relative;
  43.         /* min-height: 600px; */
  44.         min-height: calc(100vh - 21rem);
  45.       }
  47.       .container aside {
  48.         width: 20rem;
  49.         background-color: yellow;
  50.         min-height: inherit;
  51.         position: absolute;
  52.         /* text-align: center; */
  54.         /* 绝对定位必须要有一个定位父级元素(定位元素) */
  55.         position: absolute;
  56.       }
  58.       /* 右侧定位 */
  59.       .container aside:last-of-type {
  60.         right: 0;
  61.         top: 0;
  62.       }
  64.       .container main {
  65.         position: absolute;
  66.         left: 20.5rem;
  67.         right: 20.5rem;
  68.         background-color: lightcoral;
  69.         min-height: inherit;
  70.       }
  72.       img {
  73.         position: relative;
  74.         width: 100%;
  75.         height: 100%;
  76.       }
  78.       nav {
  79.         display: inline;
  80.       }
  82.       footer div {
  83.         line-height: 10rem;
  84.       }
  86.       .kefu {
  87.         /* width: 9em; */
  88.         border: 1px solid;
  89.         padding: 5px;
  90.         margin: 15px;
  91.         text-align: center;
  92.         background-color: #3860f4;
  93.       }
  94.       .icon-kefu {
  95.         color: #ffffff;
  96.         font-size: 6em;
  97.       }
  99.       .kefu-01 {
  100.         color: #ffffff;
  101.       }
  102.     </style>
  103.   </head>
  104.   <body>
  105.     <header>
  106.       <img src="./img/banner.jpg" alt="" />
  107.     </header>
  108.     <div class="container">
  109.       <aside>左边</aside>
  110.       <main>中间</main>
  111.       <aside>
  112.         <div class="kefu">
  113.           <a class="kefu-01">在线客服联系</a>
  114.           <br />
  115.           <div class="kefu-img"><i class="iconfont icon-kefu"></i></div>
  116.           <div class="kefu-lianxi">
  117.             <button>点击我联系客服</button>
  118.           </div>
  119.         </div>
  120.       </aside>
  121.     </div>
  122.     <footer>
  123.       <div>
  124.         友情链接:
  125.         <nav class="nav-1"><a href="http://www.php.cn"></a></nav>
  126.         <nav class="nav-2">
  127.           <a href="http://www.haofanghui.net">好房会网站</a>
  128.         </nav>
  129.       </div>
  130.     </footer>
  131.   </body>
  132. </html>

最终效果：

更多相关文章

  1. 固定定位以及三行三列的定位布局
  2. 在线客服固定定位和三行三列布局
  3. 固定定位的联系客服+简易的三行三列布局
  4. 固定定位，三行三列定位布局
  5. html之常用布局实例
  6. 定位以及三行三列布局方式
  7. 固定定位及传统三行三列布局练习
  8. QQ在线客服，定位布局
  9. 在线QQ客服的固定定位以及三行三列的定位布局

随机推荐

  1. php类和对象的关系
  2. 深入理解PHP与WEB服务器交互
  3. php变量的作用域
  4. php语言的优势是什么
  5. 原生 PHP 实现支付宝 App 第三方登录获取
  6. php魔术常量使用方法
  7. php怎么远程连接oracle
  8. php八大数据类型有哪些
  9. php的优势与缺点
  10. php怎么接入公众号