滑动门技术

山河月色

于 2021-07-18 10:34:02 发布

阅读量771

点赞数 1

分类专栏： css 文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_52412801/article/details/118873968

版权

滑动门技术主要通过父子标签嵌套实现，常用于前端开发中的按钮或导航栏美化。文章介绍了对称和不对称两种滑动门效果的实现方式，包括设置背景图片、内边距和定位等技巧，以及如何处理不对称滑动门时的间隙问题。

摘要由CSDN通过智能技术生成

滑动门技术

滑动门技术的实现主要是通过两个父子标签互相嵌套来实现的
例给a标签嵌套了一个span标签分别给a和span设置其背景图片其中给a的背景图片让他放在左顶部 span放在右顶部通过设置内边距来填充左右的距离通过内容来填充进而实现滑动们的技术

代码如下
两侧对称滑动门

<div class="box">
    <div class="list">
        <ul class="clearfix">
            <!-- li做布局 a铺左侧 span铺图右侧 -->
            <li><a href="#"><span>首页</span></a></li>
            <li><a href="#"><span>首页首页</span></a></li>
            <li><a href="#"><span>首页首页首尔</span></a></li>
            <li><a href="#"><span>首</span></a></li>
            <li><a href