day_08

每天一句:如果你不能接受最差的我,你就不配拥有最好的我 !如果你在我最低谷的时候离开, 你就不要在我最辉煌的时候回来 !— 科比
一、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>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,646评论 1 45
  • day01­_起源和结构 结构:Xhtml xml 表现:CSS 行为:DOM ECMAScript 以上都属于W...
    Sakura_明妃阅读 1,233评论 0 1
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,223评论 4 61
  • 没有读书时间吗? 生活紧张、工作忙碌算不了什么。要记住做好自己人生中重要的事情,才是真正的时间管理和真正的人生经营...
    星云幸运阅读 187评论 0 1