随笔分类 - HTML和CSS
摘要：一。用css雪碧图 1.简介 CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中， 利用CSS的“background-image”，“background- repeat”，“background-position”的
阅读全文
摘要：Less为css预处理器 首先先去下载一个koala编译器软件，然后运行打开 新建一个项目目录，在css文件夹中新建一个后缀为less的文件，然后拉入koala软件中，然后运行 ，你的css文件夹中就会多出一个css文件 然后就可以编写less文件了，编写过程中可以在css文件里查看详细信息。 以下
阅读全文
摘要：H5项目常见问题及注意事项 Meta基础知识： H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 //一、HTML页面结构 <meta name="viewport" content="width=device-width,initial-sca
阅读全文
摘要：Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。 除此之外，Web Storage拥有setItem,ge
阅读全文
摘要：一。px特点： 1. IE无法调整那些使用px作为单位的字体大小； 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； 3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。 px像素（Pixel）。相对长度单位。像素px是相对于显
阅读全文
摘要：面试web前端开发，不管是笔试还是面试，都会涉及到各种专业技术问题，整理了一些常见的web前端面试题及答案，希望对大家有所帮助。 1、常用那几种浏览器测试？有哪些内核(Layout Engine)? (Q1) 浏览器：IE，Chrome，FireFox，Safari，Opera。 (Q2) 内核：T
阅读全文
摘要：一。css3中animation动画各种属性详解： animation Value: [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation
阅读全文
摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width:400px; height: 400
阅读全文
摘要：一、左右侧固定，中间自适应布局 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .clearfix:afte
阅读全文
摘要：<!DOCTYPE html><html> <meta name=" " content=" " charset="utf-8"/> <head> <style type="text/css"> *{ margin: 0; padding: 0; } /*方法一*/ /*#divbox{ borde
阅读全文
摘要：一、什么是CSS Hack？ 不同的浏览器对CSS的解析结果是不同的，因此会导致相同的CSS输出的页面效果不同，这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程，就叫CSS Hack。 CSS Hack常见的有三种形式：CSS属性Hack、CSS
阅读全文
摘要：一，svg可以在浏览器中直接打开 二，在html使用<img/>标签引用 三，直接在html中使用svg标签 四，作为css背景 SVG支持ie9+ ,chrome 33.0+,firefox 28.0+,safari 7.0+ 下面是一个结合了html5中的知识做简单的小demo <!DOCTYP
阅读全文
摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> .inaline{ overflow: hidden; white-space:nowrap; //
阅读全文
摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>进度条</title> </head> <body> <canvas id="canvas"></canvas> <script type="text/javascript"> va
阅读全文
