css+html应用实例1：滑动门技术的简单实现

时间 2020-06-18

标签 css+html css html 应用实例滑动技术简单实现栏目 CSS 繁體版

原文原文链接

关于滑动门，如今的页面中好多地方都会用到滑动门，通常用做于导航背景，它的官方解释以下：html

滑动门：根据文本自适应大小，根据背景的层叠性制做，并容许他们在彼此之上进行滑动，以创造出一些特殊的效果。程序员

为何不少人喜欢用滑动门呢，由于有些时候导航的字体长度不一致，长长短短实在很差弄背景图片之类啥的，若是单独根据不一样的长度调用不一样的背景图片太麻烦不说服务器压力服务器

也太大，因此滑动门技术应运而生，它能够根据元素自己的长度而调节背景图片的长度，至始至终只用到两张图片，网页加载速度提升不说，程序员工做量也减小了。字体

效果图以下：url

1.准备图片以下：（left.jpg和right.jpg是由1.jpg分割而来的）)spa

2.代码：rest

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .top{height: 35px;width: 600px;margin: 0 200px;background: url("imags/2.jpg"); }
    .top ul{margin: 0;padding: 0;list-style: none;}
    .top ul li{float: left;line-height: 30px;}
    .top ul li:nth-child(1){margin-left: 15px;}/*选择第一个li并单独style*/
    .top ul li a{text-decoration: none;display:block;padding: 0 0 0 15px;}/*不设置高度它本身会默认和父级同样大*/
    .top ul li a b{color: white;padding: 0px 15px 0 0;display:block;}/*块级元素才能拥有宽高度*/
    .top ul li:hover a{background:url(imags/left.jpg)  ;}
    .top ul li:hover b{background:url(imags/right.jpg) no-repeat right top;color: black;}/*背景图片不重复显示（横向和竖各都不重复）并从元素的右上方开始显示*/
</style>
<body>
<div class="top">
    <ul>
        <li><a href="#"><b>Interesting</b></a></li><!--滑动门技术关键在于必定存在嵌套关系，至少两级*/-->
        <li><a><b>Dlfgagi Ulsaafasdf</b></a></li><!--这里li里套a再套span，经过a和span显示图片左右边框*/-->
        <li><a><b>FDASDF</b></a></li><!--a和span也就是所谓的左右钩子*/-->
        <li><a><b>Zing</b></a></li>
        <li><a><b>FAasssiopg</b></a></li>
    </ul>
</div>
</body>
</html>