用JavaScript做精灵图

【用JavaScript做精灵图】的更多相关文章

用JavaScript做精灵图

用JavaScript做精灵图精灵图可以不用在给每一个小块一一的修改位置.主要原理是找到整张的背景图与li的下标的数学关系. 这是一大张背景图,这个背景图的位置其实是有规律的,每两张之间间隔一个固定长度,这个固定长度刚好等于一个小图标的长度,我们使用的这个图间隔44px. CSS样式如下图所示样式代码如下: <style> *{ margin: 0; padding: 0; } body{ background-color: skyblue; } .conve{ width: 290px…

第9天：CSS精灵图

今天重点学习了CSS精灵图. "CSS精灵",英语css sprite,所以也叫做"CSS雪碧"技术.是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. css精灵有什么优点,就是减少了http请求.比如4张小图片,原本需要4个http请求.但是用了css精灵,小图片变为了一张图,http请求只有1个了. 用ps选框工具选择需要显示的部分,点开信息面板,width和height就是盒子的宽高,鼠标…

Uint 7.文本和字体属性,background,精灵图和3种定位

一. 文本属性 CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本属性和字体属性</title> <style type="text/css">…

《javascript面向对象精要》读书笔记

<javascript面向对象精要> 买这本书的原因主要是因为作者,Nicholas C. Zakas 牛X闪闪的js专家,读过js高程的应该都知道他,而这本书是他的最新力作,感觉也是js高程的精华版,满满地全是姿势,但这本书可不适合入门,读之前最好略懂js. 第一章原始类型和引用类型原始类型还是老生常谈的那5个:boolean,number,string,null,undefined. 但我始终认为typeof null 为object不应严重到作为一个错误来看待,毕竟null就是一个空…

03.JavaScript 面向对象精要--理解对象

JavaScript 面向对象精要--理解对象尽管JavaScript里有大量内建引用类型,很可能你还是会频繁的创建自己的对象.JavaScript中的对象是动态的. 一.定义属性当一个属性第1次被添加给对象时JavaScript在对上上调用了一个名为 [[Put]]的内部方法,该方法会在对象上创建一个新节点保存属性,就像哈希表上第一次添加一个键一样这个操作不仅指定了初始值也定义了属性的一些特征 1.1 [[Put]]内部方法 [[Put]]在对象上创建一个自有属性 1.2 [[Set]…

CSS.05 -- 规避脱标定位的盒子居中、CSS标签规范、溢出隐藏、内容移除（网页优化）、CSS精灵图

规避脱标定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 Margin-right:auto: 定位的盒子剧中先左右走父元素盒子的一半50%,在向左走盒子的一半(margin-left:负值) 步骤: 设置父盒子为相对定位 / 设置盒子left 值为父盒子宽度一半 / 设置子盒子左边距为自己宽度一半 CSS标签包含规范规范: 行内元素尽量包…

用javascript做别踩白块游戏1

初学Javascript做的一个别踩白块小游戏,代码简陋,如下: <!DOCTYPE html> <html> <head>  <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,…

H5 40-CSS精灵图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>40-CSS精灵图</title> <style> .box{ width: 86px; height: 28px; background-image: url(images/weibo.png); background-position: -4…

Css - 精灵图

Css - 精灵图css sprite 一个页面文档上总是会有N多的图标小图片,它们都是以背景图的方式嵌入文档,每个小图片需要一个url的css属性,每个url都指向一个服务器地址的链接,每个链接都代表要向服务器发起一次请求,这就给文档加载带来了一定的延迟,所谓精灵图是指将需要的多张小图片做成一张大图,只需要利用css的background-position对图片进行合理的背景设置即可减轻服务端压力,同时还缩短了文档载入的时间. * { margin: 10px auto; …

javascript面向对象精要第三章对象整理精要

什么是对象的数据属性?什么是对象的访问器属性?[put]方法是默认创建数据属性的,访问器属性不包含值而是定义了一个单属性被读取时调用的函数(getter)和当一个属性被写入时调用的函数(setter).访问器属性仅需要getter或setter中的任意一个,当然也可以两者都有. 关于javascript面向对象精要第三章对象整理如下…