Html+Css__利用Css_Positon_fixed_实现的简单的浮动划窗

设置相对于浏览器定位的悬浮窗需要设置 position:fixed ,  即相对于浏览器定位。

并可利用:top, right, bottom, left进行设置。 

截图如下:



核心代码:

/*边栏的属性*/
.board_aside{
    position: fixed;
    top:40%;
    left:90%;
    border:2px solid red;
    border-radius: 5px;
    width:40px;
    height:190px;
    z-index: 10;
    /*让父div模拟table,让其具有valign属性,使得子元素可以vertical-align属性*/
    display:table;
    background-color:#888888;
}

边栏的html

<!--浮动栏布局-->
    <div class="board_aside">
        <div class="board_aside_list">
            <div class="board_aside_element">
                <a href="#top">
                    <img src="./src/img/aside_connect_us.png"/>
                </a>
            </div>
            <div class="board_aside_element">
                <a href="#top">
                    <img src="./src/img/aside_service.png"/>
                </a>
            </div>
            <div class="board_aside_element">
                <a href="#top">
                    <img src="./src/img/aside_attention.png"/>
                </a>
            </div>
            <div class="board_aside_element">
                <a href="#top">
                    <img src="./src/img/aside_top.png"/>
                </a>
            </div>
        </div>
    </div>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值