search

博客列表 >在线QQ客服的固定定位以及三行三列的定位布局

在线QQ客服的固定定位以及三行三列的定位布局

麦兜的故事
麦兜的故事原创
2021年07月03日 17:39:16596浏览

在线QQ客服的固定定位

预览图片

相关代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>在线QQ客服</title>
  7.     <style type="text/css">
  8.     *{
  9.         margin: 0;
  10.         padding: 0;
  11.         box-sizing: border-box;
  12.     }
  14.     .content .contentDiv{
  15.         width: 100px;
  16.         height: 400px;
  17.         background-color: #cac8f0;
  18.         border-radius: 10px;
  19.         text-align: center;
  20.         position: fixed;
  21.         top: 300px;
  22.         right: 50px;
  23.     }
  24.     img{
  25.         width: 50px;
  26.         height: 50px;
  27.         margin-top: 20px;
  28.     }
  30. </style>
  31. </head>
  32. <body>
  33.     <div class="content">
  34.         <div class="contentDiv">
  35.             <div><img src="1.png"></div>
  36.             <div><img src="2.png"></div>
  37.             <div><img src="3.png"></div>
  38.             <div><img src="4.png"></div>
  39.             <div><img src="5.png"></div>            
  40.         </div>
  41.     </div>
  43. </body>
  44. </html>

三行三列的定位布局

预览效果

相关代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>三行三列的定位布局</title>
  7.     <style type="text/css">
  8.     *{
  9.         margin: 0;
  10.         padding: 0;
  11.         box-sizing: border-box;
  12.         text-align: center;
  13.     }
  14.     header{
  15.         width: 100vm;
  16.         height: 5rem;
  17.         background-color: #cac8f0;
  18.         margin-bottom: 0.5rem;
  19.     }
  20.     .content{
  21.         /*width: 100vm;*/
  22.         /*height: 40rem;*/
  23.         background-color: #e0e0e0;
  24.         position: relative;
  25.     }
  26.     .content .content_r{
  27.         position: absolute;
  28.         right: 0;
  29.         top: 0;
  30.         margin-left: 0.5rem;
  31.     }
  32.     .content .container{
  33.         /* width: 79%; */
  34.         height: 40rem;
  35.         position: absolute;
  36.         top: 0;
  37.         left:20rem;
  38.         right: 20.5rem;
  39.         background-color: #cac8f0;    
  40.         margin-left: 0.5rem;
  41.     }
  42.     aside{
  43.         width: 20rem;
  44.         height: 40rem;
  45.         background-color: #cac8f0;
  47.     }
  48.     footer{
  49.         width: 100vm;
  50.         height: 5rem;
  51.         background-color: #cac8f0;
  52.         margin-top: 0.5rem;
  53.     }
  54. </style>
  55. </head>
  56. <body>
  58.     <!-- 头部 -->
  59.     <header>头部</header>
  61.     <!-- 主体 -->
  62.     <div class="content">
  63.         <aside class="content_l">左侧</aside>
  65.         <main class="container">主体</main>
  67.         <aside class="content_r">右侧</aside>
  68.     </div>
  69.     <!-- 底部 -->
  70.     <footer>底部</footer>
  72. </body>
  73. </html>
上一条：0629作业下一条：table表格的运用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多