用html写一个以table承载的可伸缩悬浮窗

小竹子14

于 2023-10-31 23:38:54 发布

阅读量418

点赞数 5

本文链接：https://blog.csdn.net/weixin_73529240/article/details/134151255

版权

前言：

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

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

css 代码：


.header{
    background-image: url("img/Mountain.jpg");
    height: 200px;
} 
.sidebar{
    background-color:aqua;
    width: 240px;
    height: 400px;
    margin-bottom: 500px;
    float: left;
  
}
.toolbox{
    background-color:brown;
    width: 200px;
    height: 400px;
    position: fixed;
    left: 97%;
}
.toolbox:hover{
    left:91%;
}
.content{
  float:left;
  width: 82%;
  margin-left: 2%;
}
.block{
 float: left;
  background-color: chartreuse;
  width:900px;
  height: 600px;
  margin: 3px;
  padding: 20px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
} 
.block img{
    height: 550px;
} 
.menu-container {
  position: fixed;
  top:170px;
  width: 300px;
  height: 30px;
  display:flex;
}
.menu{
  background-color: plum;
  position:relative;
  width:50px;
  height: 30px;
  margin: 0px;
  overflow: hidden;
  z-index: 0;
}
.menu th{
  background-color:purple;
}
.menu td{
  background-color: pink;
}
.menu:hover{
      width: 85px;
      height: 85px;
      margin-right: -35px;
      position: relative;
      z-index: 1;
}
.footer{
    background-color: darkgreen;
    text-align: center;
}

代码详解：

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

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

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

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

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

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

HTML代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>史诗级定位</title>
    <link rel="stylesheet" href="b.css">
    <style media="screen">
        * {
            margin: 0px;
            padding: 0px;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="header">
        <!-- <img src="img/Mountain.jpg" alt=""> -->
    </div>
    <div class = "menu-container">
    <div class = "menu">
        <table >
            <tr>
                <th align="left" colspan="2"> 盲盒</th>
            </tr>
            <tr>
                <td >小猫</td> <td>小猫</td>
            </tr>
            <tr>
                <td>小猫</td> <td>小猫</td>
            </tr>  
        </table>
    </div>
    <div class = "menu">
        <table >
            <tr>
                <th align="left" colspan="2"> 盲盒</th>
            </tr>
            <tr>
                <td >小猫</td> <td>小猫</td>
            </tr>
            <tr>
                <td>小猫</td> <td>小猫</td>
            </tr>  
        </table>
    </div>
    <div class = "menu">
        <table >
            <tr><th align="left" colspan="2"> 盲盒</th></tr>
            <tr>
                <td >小猫</td> <td>小猫</td>
            </tr>
            <tr>
                <td>小猫</td> <td>小猫</td>
            </tr>  
        </table>
    </div>
</div>
    <div class="container">
        <div class="toolbox">
            <ul>
                <li><img src="img/bookBtnRed.png" alt="">这是一个菜单</li>
                <li><img src="img/bookBtnRed.png" alt="">这是一个菜单</li>
                <li><img src="img/bookBtnRed.png" alt="">这是一个菜单</li>
            </ul>
        </div>
        <div class="sidebar">
            hahah
        </div>
        <div class="content">
            <div class="block">
                <img src="img/Mountain.jpg" alt="">
            </div>
            <div class="block">
                <img src="img/Mountain.jpg" alt="">
            </div>
            <div class="block">
                <img src="img/Mountain.jpg" alt="">
            </div>
            <div class="block">
                <img src="img/Mountain.jpg" alt="">
            </div>
        </div>
        <div style="clear:both;"></div>
    </div>

    <div class="footer">
        欢迎来到猫猫之家  xx & yy 喵~
    </div>
</body>

</html>

总结：

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