简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >CSS固定定位及传统三行三列布局实例

CSS固定定位及传统三行三列布局实例

不在线先生
不在线先生原创
2021年07月05日 23:48:30719浏览

课程作业：

  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">PHP中文网</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>

最终效果：

上一条：flex容器与项目的认识和常用属性下一条：0705作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多