倒霉熊

摘要： 气泡框（或者提示框）是网页中一种很常见的元素，大多用来展示提示信息，如下图所示：拆分来看，形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头，要制作出这样的气泡框，如果解决了三角形小箭头就容易了。一种方法就是制作这样一个三角形箭头的图片，然后定位在矩形框上。但这种解决办法在后期更改气泡框会很不方便，可能每修改一次气泡框都要重新制作一个三角形小图标。如果我们能够直接用HTML和CSS代码实现这样一个三角形小箭头一切都迎刃而解了。首先我们来看一下border这个属性，当我们把一个div的border-color设为不同值的时候，可以看到四边都成了一个梯形。# test{width:50 阅读全文

摘要： 一、IE6\7其实是支持inline-block的IE5.5 后开始支持 inline-block， 但是它所支持的 inline-block 不能等同于 CSS2.1 中的 inline-block，因为 IE5.5 比 CSS2.1 更早提出 inline-block 的概念并作为所谓的「私有属性值」使用，所以二者表现出来的效果是不完全一致。IE 5.5、6、7 、8（Q）中 block 元素对 inline-block 支持不完整，如果要达到类似的效果，需要先设置为 display:inline，然后使用 zoom:1 等触发 hasLayout。IE 5.5、6、7 、8（Q）中 in 阅读全文

摘要： border:none与border:0的区别体现为两点：一是理论上的性能差异，二是浏览器兼容性的差异。性能差异：【border:0;】把border设为“0”像素效果等于border-width:0，浏览器依然对border-width、border-color进行了渲染，即已经占用了内存值。【border:none;】把border设为“none”，实际效果等同于border-style:none，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。兼容性差异：IE6、IE7中，border为“none”时，标签button、input边框依然存在。解决方法：1，input,but 阅读全文

摘要： 刚刚开始接触 HTML5 时，对它的标签很不适应，甚至一度有点反感。尤其是对 div、section、article 这几个标签，实在弄不清楚应该使用在什么场合下。divHTML Spec: “The div element has no special meaning at all.”这个标签是我们见得最多、用得最多的一个标签。本身没有任何语义，用作布局以及样式化或脚本的钩子(hook)。sectionHTML Spec: “The section element represents a generic section of a document or application. A sec 阅读全文

摘要： CSS背景图片的定位：1，关键词定位：如top right bottom left center2，像素定位：如background-position:100px 200px; 表示图片左上角定位到距离容器左上角（100px,200px）的点3，百分比定位：如background-position:20% 50%;百分比定位是背景图片本身（x%，y%）的点与容器左上角（x%，y%）的点重合 阅读全文

摘要： 原文地址：从微博的改版谈网页重构——bigpipe中的页面构建优化作者：小秦 题记：搞互联网的同学也许都知道一个数字——4秒，有研究表明，如果一个网站没有在4秒之内加载完成，用户就会感到焦躁不愉快，并离开这个网站（数据来自性能测试网站http://gtmetrix.com/）。网站的内容、SEO优化、用户体验？哪个更重要呢？在速度面前，也许这些都相对更次要。所以提高网页效率，是我们在新版微博的第一目标。从四个方面来浅谈我们新版微博的优化。一、HTTP请求数的权衡1、为什么要关心http请求？当浏览器向Web服务器发出请求时，它向服务器传递了一个数据块，也就是请求信息。在用户打开一个页面的初初， 阅读全文

摘要： 在网页设计中我们经常看见body{font-size: 62.5%;}这样的设置，为什么偏偏是62.5%呢？这主要是为了方便em与px相互转换，em的初始值为1em=16px，显然这样的话，如1.2em则=19.2px，可是我们在设置的时候很少看见19.2px这样表示的大小，也就是在用px表示大小时数值是不带小数位的。当设置了body{font-size: 62.5%;}时，1em则=16px*62.5%=10px,1.2em则=12px，这是不是就简单多了，准确多了呢~~Set body font-size to 62.5% for Easier em ConversionIf you wo 阅读全文

摘要： 在网页设计中，由于图片更具表现力（例如网站logo），所以我们往往利用图片代替文字标题来表现某些内容，这种代替不是说要用一个<img/>标签完全替换文字，如果这样的话，就不利于搜索引擎抓取我们的网站页面，这个时候我们往往利用隐藏文字（以图换字）这个小技巧来达到目的，既能够用图片很好的表现我们的文字标题，又能够很好的照顾到搜索引擎的蜘蛛。实现原理：1，利用图片作为文字标题的背景；2，把图... 阅读全文