TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索

08、HTML&CSS-图片整合

zyz
2018-04-12
/
0 评论
/
756 阅读
/
正在检测是否收录...
04/12

一、CSS Sprites的原理(图片整合技术)/CSS精灵

  • 什么是图片整合?
    将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-position来实现背景图片的定位技术;
  • 图片整合的优势:
    1)通过图片整合来减少对服务器的请求次数,从而提高页面的加载速度;

2)通过整合图片来减小图片的体积;

二、CSS Sprites的实现方法

  • 什么是滑动门

    滑动门是一个形象的称呼,它利用CSS背景图像可层叠性,并允许彼此之上进行滑动来创造一些特殊动态效果;
  • 滑动门特征:

    通过滑动门技术,可以使CSS设计出来的导航菜单兼具传统布局的图像效果,与CSS布局的高效扩展性;
    

三、隐藏滚动条技巧

思路: 
  父元素较小,子元素较大(子元素中的滚动条是需要隐藏的),给父元素添加oveflow,即将超出部分隐藏;

<div style="height: 300px;  width: 120px; background:red" class="scroll"> 
        <!-- 子元素的滚动条需要隐藏-->
    <div style="height:100%; width: 140px;" class=“content”> 
            ……
    </div>
</div>

<style>
    /* 父元素是可以进行滚动的,另外将子元素超出部分隐藏(即是滚动条部分)*/
   .scroll{
        /* 水平方向: 隐藏滚动条*/
        overflow-x: hidden;
        /* 垂直方向: 需要滚动,而不能将超出部分隐藏!!*/
        overflow-y: auto;
    }    
    .content{
        overflow-x: hidden;
    }
</style>
赞(0)
评论 (0)