首页 > Web开发 > 详细

CSS——滑动门

时间:2017-11-08 14:12:17      阅读:159      评论:0      收藏:0      [点我收藏+]

在背景图片中可以对图片进行圆角设置,但是这样是写死的。如下图:

技术分享

情况分析:如果我们li标签中的文字变少了或者变多了,我们就需要重新定义背景图片。所以我们使用滑动门技术。它将图片特殊地方进行分割。宽度利用的是字体的宽度,在加上padding进行调整。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">

        <style type="text/css">

             li{
                 list-style: none;
                 float:left;
             }

            li a{
                 
                  height: 35px;
                  background-image: url("bg_r1_c1.png");
                  background-repeat: no-repeat;
                  padding-left: 7px;
                  display: inline-block;
                 color: white;
             }

             li span{
                 height: 35px;
                  background-image: url("bg_r1_c2.png");
                  background-repeat: no-repeat;
                  background-position: right;
                  display: inline-block;
                  padding-right:22px;
                 line-height: 35px;
              }
        </style>
    </head>
    <body>

          <ul>
               <li>
                    <a href="#">
                         <span>百度一下</span>
                    </a>
               </li>

                <li>
                    <a href="#">
                         <span>百度</span>
                    </a>
               </li>
                <li>
                    <a href="#">
                         <span>中国新闻网</span>
                    </a>
               </li>
          </ul>
    </body>
</html>

效果:

技术分享

CSS——滑动门

原文:http://www.cnblogs.com/wuqiuxue/p/7803467.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!