CSS雪碧图（精灵图）使用
1：CSS雪碧图：CSS雪碧图 即 CSS Sprites，也有人叫它CSS精灵图。2：雪碧图的由来：一个网站的页面需要大量的小图片或者小图标，但是大量的图片如果放在服务器上，每次当打开网站并且向服务器发送请求，那么请求的次数将大大增加。由此出现了雪碧图的概念3：用处：是一种CSS图像合并技术，方法...
css雪碧图实现数字切换
vue中 css 雪碧图应用及数字切换demo1. CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。2.使用css雪碧图的优点：利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能。CSS Sprites能减少图片的字节...
CSS Sprites (CSS图像拼合技术)教程工具
什么是CSS Sprites？“Sprite”（精灵）这个词在计算机图形学中有它独特的定义，由于游戏、视频等画质越来越高，必须有一种技术可以智能的处理材质和贴图，并且要 同时保持画面流畅。“Sprite”就是这样一种技术，它将许多图片组合到一个网格上，然后通过程序将每个网格的内容定位到画面上。Spr...
CSS Sprites(CSS图像拼合技术)教程、工具集合
本集合是有一位国外设计师收集整合，并由 oncoding翻译成中文的，感谢他们的辛苦贡献。CSS Sprites技术在国外并不是什么新技术，只不过近两年(尤其08年开始)中国开始流行这个词，大家也开始越来越关注CSS Sprites这个没有标准中文翻译的技术。CSS Sprites这个词如果直译的话...
CSS 图像拼合技术
CSS 图像拼合技术一、图像拼合图像拼合就是单个图像的集合。有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。使用图像拼合会降低服务器的请求数量，并节省带宽。二、图像拼合 - 简单实例与其使用三个独立的图像，不如我们使用这种单个图像（"img_navsprites.gif"）：有了CS...
如何用纯 CSS 创作单元素点阵 loader
效果预览在线演示按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。https://codepen.io/comehope/pen/YvBvBr可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。https:/...
vue build打包后css里的图片路径404不正确的问题
vue build打包后css里的图片路径404在vue-cli项目中build/utils.js中找到如下代码块，添加 publicPath:’../../’if (options.extract) { return ExtractTextPlugin.extract({ ...
HTML&CSS基础学习笔记1.26-input重置表单
重置表单<input>的[type]属性值为"button"的时候表示一个普通的按钮，相当于一个<button>标签。<input>的[type]属性值为"reset"时，表示表单重置，它在页面的表现形式也是个按钮，但点击他的时候会让表单重置到页面刚加载时的状态。...
28.纯 CSS 绘制一个世界上不存在的彭罗斯三角形
原文地址：https://segmentfault.com/a/1190000014946883感想：三个平面图形旋转HTML代码：<!-- penrose: 彭罗斯 --><div class="penrose"> <span></span> ...
css书写规范 & 页面布局规范 &常用案例经验总结
CSS 属性书写顺序(重点)建议遵循以下顺序：布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）自身属性：width / height / margin / paddin...
如何处理CSS3属性前缀
今天闲来无聊，重新来说说CSS3前缀的问题。在春节前和@一丝姐姐说起Sass中有关于gradient的mixins。姐姐说：为什么还要用mixin呢？为什么不使用Autoprefixer？使用Autoprefixer，只需要输入一行代码，编译器帮你做了一切，还纠结个毛mixin。姐姐的一句话让我汗颜...
CSS3属性border-radius绘制多种多样的图形
border-radius，国内翻译成圆角，你可能以为这个属性就是用来画圆角，没错，但是除此之外，它还可以做点别的事情。radius其实指的是边框所在圆的半径，这个CSS3属性不仅能够创建圆角，还可以创建椭圆角（如图下图第7），把这些角按照不同的顺序和大小来展现，能够绘制成多种多样的图形。以下图例就...
[css]需警惕CSS3属性的书写顺序
转载张鑫旭：http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7%E7%9A%84%E4%B9%A6%E5%86%99%E9%A1%BA%E5%BA%8F/一、不同书...
H5、CSS3属性的支持性以及flex
一、项目中用到一个flex属性，但是应用了flex的父容器只设置了width，没有设置height，此时每一个应用了上面提到的属性的样式的div都重叠在了一起，在IE10，IE11出问题，IE9没有问题。（待深入研究）二、距离上一次发布《五大主流浏览器 HTML5 和 CSS3 兼容性大比拼》转眼已...
【原】常见CSS3属性对ios&android&winphone的支持
2个月前，我在博文《webapp开发中兼容Android4.0以下版本的css hack》中写过“那对于做移动网页开发的同事来说，一般只要做好webkit内核浏览器的展现效果就行了” ，在这里纠正下，在目前Wepapp开发中，主要对webkit内核的手机做好各个版本的兼容已经不够了，像其它的高端智能...
移动端 几个css3属性的练习
转行做前端，上班有一个星期了，什么都不懂，今天学习了几个新的css3属性，记录下来。注：所有的测试均是在chrome上手机模式测试，与真实的手机环境可能有误差1：-webkit-tap-heighlight-color:rgba();改变safari 与大部分android机可点击元素，点击时产生的...
半透明全屏蒙层+全屏屏蔽+内容居中+css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://...
HTML CSS微信CSS显示一些总结
微信显示网页是调用腾讯自带的浏览器内核，由于腾讯浏览器内核对css展示效果没有谷歌浏览器好，导致用谷歌浏览器写好的网页，放到微信页面之后，显示的效果就发生变化，所以调整css样式显得那么吃力；1、<li ><img style="width:100%; height:12em;" ...
微信小程序css报错:at-rule or selector expected
在写微信小程序，前几天还好好的，今天换了一个基础库后发现wxml页面报错了 错误提示 虽然页面能够显示，功能能够使用，但是看得很不舒服如何修改： 在微信开发者工具右下角，把HTML换成XML 更改前：更改后： 就没有报错了...
【转】纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素，但大多数人并不给它们设置样式，所以在绝大多数网站它们看起来是一样的。为什么不把你的网站中的Checkbox设置一个与众不同的样式，甚至可以让它看起来一点也不像复选框。在本教程中，我们将创建5个不同的选择框，你可以在你的网站上使用它。c...