如何删除侧边栏以使网页更具响应性

How to remove sidebar to make web page more responsive

本文关键字：网页 响应 侧边栏 何删除 删除      更新时间：2023-09-26

我的网页设计包括一个侧边栏和文章部分。当重新调整网页大小时，侧边栏应该消失，新按钮应该出现在右边。然而，我不明白如何消失侧边栏，并把新的一个放在右边。我该怎么办？

页面

________  _____                                  _________  ___
|      |  |   |   after re-sizing viewport,      |        | | |
|      |  |   |   I should get this web page --> |        | |_|
|      |  |   |                                  |        | 
|      |  |   |                                  |        |
|______|  |___|                                  |________|

我已经实现了类似于html的索引；

<link   href="css/large-page-design.css"    
        rel="stylesheet"    
        type="text/css" />
<link   href="css/medium-page-design.css"  
        rel="stylesheet"    
        type="text/css" 
        media="only screen and (min-width: 700px ) and (max-width: 1000px) and (min-height: 500px)">

并且，在index.html中，我已经填充了侧边栏内容，如；

<div id="sidebar">
    <div id="page-information">
            <h1>My web page</h1>
    </div>
    <!-- other two div elements with its content-->
</div>

除了html之外，我还将large-page-design.css声明为；

@import url('sidebar.css') screen;
#sidebar{
    top:0px;
    height: 519px; 
    width: 325px;
    float: right;
    background: none; 
    position:relative; 
}

并且，在sidebar.css中，我有；

#page-information{
    background-image:url(...);
    background-repeat: no-repeat;
    height: 75px;
    width: 300px;
    position:relative;
}

使用媒体查询隐藏侧栏，并使用display property 显示按钮

将此添加到大页面设计.css 中

#sideButton{
   display:none;
   }

将此添加到介质页面设计.css 中

 #sidebar{
     display:none;
   }
   #sideButton{
     display:block;
    }

在Html 中具有#sideButton元素

相关文章：