PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

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

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

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

在线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. }
  13. .content .contentDiv{
  14. width: 100px;
  15. height: 400px;
  16. background-color: #cac8f0;
  17. border-radius: 10px;
  18. text-align: center;
  19. position: fixed;
  20. top: 300px;
  21. right: 50px;
  22. }
  23. img{
  24. width: 50px;
  25. height: 50px;
  26. margin-top: 20px;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <div class="content">
  32. <div class="contentDiv">
  33. <div><img src="1.png"></div>
  34. <div><img src="2.png"></div>
  35. <div><img src="3.png"></div>
  36. <div><img src="4.png"></div>
  37. <div><img src="5.png"></div>
  38. </div>
  39. </div>
  40. </body>
  41. </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;
  46. }
  47. footer{
  48. width: 100vm;
  49. height: 5rem;
  50. background-color: #cac8f0;
  51. margin-top: 0.5rem;
  52. }
  53. </style>
  54. </head>
  55. <body>
  56. <!-- 头部 -->
  57. <header>头部</header>
  58. <!-- 主体 -->
  59. <div class="content">
  60. <aside class="content_l">左侧</aside>
  61. <main class="container">主体</main>
  62. <aside class="content_r">右侧</aside>
  63. </div>
  64. <!-- 底部 -->
  65. <footer>底部</footer>
  66. </body>
  67. </html>
上一条: 0629作业 下一条: table表格的运用
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议