随笔分类 - html/css
摘要：1、空心文字实现思路 思路：融合背景+文字阴影 <style> body { background: #000;text-align: center;} h1 {font-size: 90px;color: #000; text-shadow: 1px 0 #fff, 1px 1px #fff, 1
阅读全文
摘要：1、合并js、css 2、js文件放置在后面 3、css放置head中 4、雪碧图 5、图片懒加载 6、图片压缩 7、js，css代码压缩 8、html代码结构简洁清晰 9、css选择器书写规范
阅读全文
摘要：一个页面中有头部、底部和中间内容区域，底部固定在屏幕底端。 方法一、在main上使用fixed定位，加上overflow-y属性。 不推荐这个fixed方案，因为页面偶尔卡住不动。 方法二、中间的main不设定位，高度100%，再padding头部和尾部， 其中头部和底部的定位设为absolute会
阅读全文
摘要：1、 .father { display: table-cell; text-align: center; vertical-align: middle; width:500px;height: 500px; } .child { display: inline-block; } 2、 .conta
阅读全文
摘要：渐进增强 progressive enhancement： 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 优雅降级 graceful degradation： 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。 区别：
阅读全文
摘要：Document Typing animation by Lea Verou.
阅读全文
摘要：多行文本实现省略号显示 ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测...
阅读全文
摘要：tips： JPG、PNG、GIF 都可以，但是有一个前提要求，就是黑色纯色，背景白色 .pic1 { background-image: url($img), linear-gradient(#f00, #f00); background-blend-mode: lighten; backgrou
阅读全文
摘要：.BFC概念： 块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。 我们先了解一个名词：BFC（block formatting context），中文为“块级格式化上下文”。 先记住一个原则： 如果一个元素具有BFC,那么内部元素
阅读全文
摘要：内联元素(inline element) * a - 锚点 * abbr - 缩写 * acronym - 首字 * b - 粗体(不推荐) * bdo - bidi override * big - 大字体* br - 换行* cite - 引用* code - 计算机代码(在引用源码的时候需要)
阅读全文
摘要：background: -moz-linear-gradient( top,#ccc,#000);background: -webkit-linear-gradient(top,#ccc,#000);background: -o-linear-gradient(top,#ccc, #000); ba
阅读全文
摘要：select{ appearance:none; -moz-appearance:none; -webkit-appearance:none; background: url("../images/xl_1.png") no-repeat scroll right center #fff; padd
阅读全文
摘要：父级元素： letter-spacing: -0.5em;font-size: 0; 子级元素： letter-spacing: normal; display: inline-block; vertical-align: top; 即可解决。 问题剖析： 以input元素为例子：因为input元素
阅读全文
