devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

用html写一个以table承载的可伸缩悬浮窗_网页悬浮窗代码

作者：2023面试高手 | 2024-02-18 20:35:11

赞

踩

网页悬浮窗代码

前言： 

最近web 的css模块快讲完了，每周例行的周一实验课开始，只是这节课的实验内容有点不同于往常，这里是第一次用到了悬浮窗进行html页面的设计。

首先思路是从上周的课程“定位”入手，发现只是用position的fixed值在浏览器窗口建立一个悬浮窗的设计并不能实现我的展开效果，这说明老师开始悄悄上难度了，结合之前学过的浮动和盒子模型，我设计了以下以table格式展开的悬浮窗的模型。

css 代码：

  1.  
  2. .header{
  3.     background-image: url("img/Mountain.jpg");
  4.     height: 200px;
  5. } 
  6. .sidebar{
  7.     background-color:aqua;
  8.     width: 240px;
  9.     height: 400px;
  10.     margin-bottom: 500px;
  11.     float: left;
  12.   
  13. }
  14. .toolbox{
  15.     background-color:brown;
  16.     width: 200px;
  17.     height: 400px;
  18.     position: fixed;
  19.     left: 97%;
  20. }
  21. .toolbox:hover{
  22.     left:91%;
  23. }
  24. .content{
  25.   float:left;
  26.   width: 82%;
  27.   margin-left: 2%;
  28. }
  29. .block{
  30.  float: left;
  31.   background-color: chartreuse;
  32.   width:900px;
  33.   height: 600px;
  34.   margin: 3px;
  35.   padding: 20px 0px;
  36.   display: flex;
  37.   justify-content: center;
  38.   align-items: center;
  39. } 
  40. .block img{
  41.     height: 550px;
  42. } 
  43. .menu-container {
  44.   position: fixed;
  45.   top:170px;
  46.   width: 300px;
  47.   height: 30px;
  48.   display:flex;
  49. }
  50. .menu{
  51.   background-color: plum;
  52.   position:relative;
  53.   width:50px;
  54.   height: 30px;
  55.   margin: 0px;
  56.   overflow: hidden;
  57.   z-index: 0;
  58. }
  59. .menu th{
  60.   background-color:purple;
  61. }
  62. .menu td{
  63.   background-color: pink;
  64. }
  65. .menu:hover{
  66.       width: 85px;
  67.       height: 85px;
  68.       margin-right: -35px;
  69.       position: relative;
  70.       z-index: 1;
  71. }
  72. .footer{
  73.     background-color: darkgreen;
  74.     text-align: center;
  75. }
  76.

代码详解： 

悬浮窗展开的效果可以用div父元素嵌套三个div （div里面是table）来进行总体框架的建设。

要进行展示的项可以用th表头进行书写，注意要进行对齐的话要colspan两个空格，因为下面要进行展开的td标签有两列，不扩展的话第一行会有一个空格，从而使三个表头的项不对齐。

要实现隐藏的效果，就是把宽高设置的小一点，只能显示一个表头所能显示的项，然后overflow用hidden就能实现隐藏。

展开的话就用嵌套里面的类的伪类hover改变他的宽和高，然后注意要使在展开的时候其他的项不动，要计算好隐藏时的宽高和展开时的宽高的差值，用一个负的margin进行弥补，从而实现展开而不动的效果。

注意图层也要改变，改成z-index : 1，在最上层显示，否则会和当前图层的元素有冲突，被当前图层的元素覆盖掉。

最后，还要注意要实现水平排列三个项的需求的话，要使用display的flex布局进行排列。

HTML代码：

  1. <!DOCTYPE html>
  2. <html lang="en" dir="ltr">
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>史诗级定位</title>
  7.     <link rel="stylesheet" href="b.css">
  8.     <style media="screen">
  9.         * {
  10.             margin: 0px;
  11.             padding: 0px;
  12.             font-size: 20px;
  13.         }
  14.     </style>
  15. </head>
  16.  
  17. <body>
  18.     <div class="header">
  19.         <!-- <img src="img/Mountain.jpg" alt=""> -->
  20.     </div>
  21.     <div class = "menu-container">
  22.     <div class = "menu">
  23.         <table >
  24.             <tr>
  25.                 <th align="left" colspan="2"> 盲盒</th>
  26.             </tr>
  27.             <tr>
  28.                 <td >小猫</td> <td>小猫</td>
  29.             </tr>
  30.             <tr>
  31.                 <td>小猫</td> <td>小猫</td>
  32.             </tr>  
  33.         </table>
  34.     </div>
  35.     <div class = "menu">
  36.         <table >
  37.             <tr>
  38.                 <th align="left" colspan="2"> 盲盒</th>
  39.             </tr>
  40.             <tr>
  41.                 <td >小猫</td> <td>小猫</td>
  42.             </tr>
  43.             <tr>
  44.                 <td>小猫</td> <td>小猫</td>
  45.             </tr>  
  46.         </table>
  47.     </div>
  48.     <div class = "menu">
  49.         <table >
  50.             <tr><th align="left" colspan="2"> 盲盒</th></tr>
  51.             <tr>
  52.                 <td >小猫</td> <td>小猫</td>
  53.             </tr>
  54.             <tr>
  55.                 <td>小猫</td> <td>小猫</td>
  56.             </tr>  
  57.         </table>
  58.     </div>
  59. </div>
  60.     <div class="container">
  61.         <div class="toolbox">
  62.             <ul>
  63.                 <li><img src="img/bookBtnRed.png" alt="">这是一个菜单</li>
  64.                 <li><img src="img/bookBtnRed.png" alt="">这是一个菜单</li>
  65.                 <li><img src="img/bookBtnRed.png" alt="">这是一个菜单</li>
  66.             </ul>
  67.         </div>
  68.         <div class="sidebar">
  69.             hahah
  70.         </div>
  71.         <div class="content">
  72.             <div class="block">
  73.                 <img src="img/Mountain.jpg" alt="">
  74.             </div>
  75.             <div class="block">
  76.                 <img src="img/Mountain.jpg" alt="">
  77.             </div>
  78.             <div class="block">
  79.                 <img src="img/Mountain.jpg" alt="">
  80.             </div>
  81.             <div class="block">
  82.                 <img src="img/Mountain.jpg" alt="">
  83.             </div>
  84.         </div>
  85.         <div style="clear:both;"></div>
  86.     </div>
  87.  
  88.     <div class="footer">
  89.         欢迎来到猫猫之家  xx & yy 喵~
  90.     </div>
  91. </body>
  92.  
  93. </html>

总结： 

 最后说下总结吧，当时小草老师说发明css的人简直是个天才的时候真的还不能完全理解他的意思，一个很简单的样式的效果有什么神乎其神，现在写多了慢慢发现其实这是用编程的面向对象的方法对html的网页进行设计，面对一个板块，可以进行分工，可以进行纵向的某个模块的延深，可以专门对一个特定的效果进行分层次的设计（从这点上来说，是艺术不过分），同时呢css能把最基本的展示效果和html的标签的语义分开来进行专门的设计，分工合作我觉得的确清晰明了。盒子模型的确还有很多函待开发的地方，相信会开出更多更可爱的猫猫盲盒。

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/110399
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号