孙肖宁

CSS滑动门技术
制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,如下图所示,即为设置了圆角背景的导航。而且每个元素的大...
扫描右侧二维码阅读全文
21
2018/02

CSS滑动门技术

制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,如下图所示,即为设置了圆角背景的导航。而且每个元素的大小都是不确定的,有内容来决定元素的大小,但是每个元素的边框都是一样的。这就引入看滑动门技术。
20180221085243.png

特点:
1 实用性,能够根据导航条菜单文本长度自动调节宽度;
2 简洁性,它可以用简单背景小图来实现炫彩的导航条风格,大大减少网页载入内容。
3 适用性,可以多层套用,实现双层滑动门炫彩风格,也可以实现网页其他模块的一些特殊效果。

案例:
图片1.png
对于这种两端都为圆角的滑动门效果,一共需要3部分,首先把图片分为3部分:
20180221085621.png20180221085635.png20180221085648.png
两端采用两个div,采用两个圆角图形作为背景,或者直接img引入两张圆角图形,中间div采用平铺背景矩形。
如果有鼠标经过的效果,可以定义a标签,借助span标签,转换成行内块,实现此效果。
html

<div class="left"></div>
<div class="con">测试滑动门技术</div>
<div class="right"></div>

css

 .left{
        width:10px;
        height:100px;
        background-image:url(left.png);
        float:left;
}
.right{
       width:10px;
       height:100px;
       background-image:url(right.png);
       float:left;
}
.con{            
         height:100px;
         background-image:url(con.png);
         background-repeat:repeat-x;
         float:left;
         line-height: 100px;
}
Last modification:February 21st, 2018 at 09:12 am
If you think my article is useful to you, please feel free to appreciate

One comment

  1. 千行

    以前经常用

Leave a Comment