计算机编程

像网页的导航栏的文字可以利用滑动门技术做。滑动门就是根据字的多少自动收缩,不必根据字的多少再去调宽度。像导航栏这种的都需要链接,则以一个a标签作为父亲,他的孩子可以设置为span。span标签通常写文字。在css中,对a标签给予一个背景图片,而这个背景图片就可以作为滑动门的出现效果。将a转化为行内块元素,对其进行高度设定,背景图片默认left左对齐,不用改。然后在span标签中,再次加入此背景图片,对其转换为行内块,设定宽高,进行right右对齐。对于其中的字的padding值根据实际需要调整。进而这个滑动门就可以实现,即使改变span标签中的文字多少,里面的背景图片就会自动收缩。注,字的多少不会是无限,而是根据背景图片的宽度而定。

1.精灵图

名称:精灵图 Sprite chart。它的由于来,每次请求网站的时候都会去请求图片,太麻烦。

网站中有很多的小的图片,为了将服务器处理太多的请求,我们把一些小的不经常变化的图片放在一张大图上面,来方便请求。

图片 1

淘宝的精灵图.png

就是将网站上面一些不太变化的小的背景图标放在一个大的图片上在请求的时候一次性的将这些图片拿过来。

精灵图应用:

Background-positioin: x坐标 y坐标;
eg:
background-positioin: url(images/taobao.png) no-repeat 0 -133px;

改变容器的位置是不会影响背景图片的!!

图片 2

精灵图坐标.png

精灵图的制作:
使用Adobe Fireworks CS5

图片 3

Adobe Fireworks CS5.png

1. 放的都是一些小的不太变化的背景图片。
2. 精灵图的宽度一定要大于图片上最大小背景图。
3. 两个精灵图之间一定留一定的间隙
4. 精灵图的下面一定要留足空间,(是为了将来继续向精灵图中添加新的图片)

注意:如果给一个行内元素设置了position:absolute,那么这个行内元素会自动转成行内块元素。

行内元素:span,u,b,i,strong
块级元素:h1,h2,h3--h6,div,p
eg:

.new {
      width: 25px;
      height: 20px;
      position: absolute;
}
text-indent首行缩进属性

使用场景:
比如京东,在使用的时候是在一个a标签中放入京东的文字,再通过这个属性将文字缩进屏幕之外,然后给a标签一个背景图片。仅仅只是为了添加页面的一个权重。这个文字所占的权重就要高。这个文字不是给用户看的,而是给搜索引擎看的。

图片 4

text-indent.png

注意: 负值是允许的。如果值是负数,将第一行左缩进。默认值0, 能继承。

其他新闻
  • 像网页的导航栏的文字可以利用滑动门技术做。滑动门就是根据字的多少自动收缩,不必根据字的多少再去调宽度。像导航栏这种的都需要链接,则以一个a标签作为父亲,他的孩子可以...
    2019-12-27
  • 背景:基于vue写的组件库,用docsify生成文档,部分组件中的属性为驼峰命名,比如styleName这种,使用了demoBox插件进行在线运行,但是运行出来驼峰式的属性全被转成了小写,例如styl...
    2019-12-27
  • 给定一个存储整数的数组,整数个数任意。去除其中不能被3和5同时整除的数据,并将剩余数据排序后输出。例如a=[30,15,3,45,5,10,9,60,150,75]输出:[15,30,45,60,75,150] 7-1 给定N个(长整型...
    2019-12-27
友情链接

公司名称巴黎人电玩
版权所有:Copyright © 2015-2019 http://www.zhongqiangjy.com. 巴黎人电玩有限公司 版权所有

友情链接

Copyright © 2015-2019 http://www.zhongqiangjy.com. 巴黎人电玩有限公司 版权所有
公司地址http://www.zhongqiangjy.com