html怎么制作上下移动的门

html-css021

html怎么制作上下移动的门,第1张

html制作上下移动的门步骤如下：

1、门体，所述门体设置于门框的内侧，且门体可相对门框上下滑动。

2、配重组件，所述配重组件设置于门框的内部，所述配重组件的一端与门体固定连接。

3、优选地，所述门框的内侧设置有滑轨，所述门体的侧面与滑轨滑动连接。

思路:用一个大盒子装下两个盒子,然后给大盒子设置postion:relative,然后给需要移动的盒子设置position:absolute.

<style>

    .banner{

        width:100%

        height:400px

        position:relative

    }

    .banner .nav{

        position:absolut

        right:10px

        top:150px

    }

</style>

<div class="box">

    <div class="banner"><img src="..."></div>

    <div class="nav">这个盒子是需要挪动的</div>

</div>