分析支付宝首页

1. 实现渐变
FF: background: linear-gradient(-90deg, #FCFCFC 0%, #F5F5F5 100%) repeat scroll 0 0 transparent;
IE: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#f5f5f5'); WIDTH: 100%; BACKGROUND: #f5f5f5; HEIGHT: 26px; _overflow: hidden
2. 也用到了 i 标签
<i> 标签显示斜体文本效果。
3. after伪元素，需要注意的是ie6&ie7是不支持这一元素的
http://www.w3help.org/zh-cn/causes/RS8010
有很多在IE6和IE7是用js实现这一效果的
《css清除浮动的方法》这个方法可以实现全兼容，支付宝就是用这种方法的
4. placeholder
placeholder 属性提供可描述输入字段预期值的提示信息（hint）。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
5. text-shadow 文字阴影
6. 重要的标题都是用 h1、h2、h3等实现的
7. article 标签:标签定义独立的内容
8. text-indent 的应用，将文字在页面上对访客隐藏，但对搜索引擎不隐藏。
最用于 a 标签实现图片，标签内的innerHtml为文字内容
但使用这一样式，会导致虚线框的问题，可以使用a:focus { outline:0 }把虚线框去掉。
9. 这样定义样式类名：
ui-link-item
ui-link-item ui-link-item-first
ui-link-item ui-link-item-last
10. 如何用纯CSS实现如下效果: xxx | xxx | xxx | xxx
每一个 .ui-link-item 都有 border-right: 1px solid #CCCCCC; 样式
最后一个 ui-link-item-last 去掉 border-right
今天看文章《margin负值 – 一个秘密武器》发现还有其实方法可以实现，通过margin-left：-1px实现隐藏。
这两种方法有什么不同呢？如果是程序循环输出这效果的，用后面那种方法比较好，不用判断是不是最后一项，但这种方法在各浏览器可能有兼容问题。(2013-08-19)
11. 昨天在做网页时，发现我想通过 margin 来调整 + 号按钮的位置，但发现会所父容器也撑大了。今天再分析支付宝的页面，他们像我这样情况不是用块元素来实现的，而是用line元素来实现的，当用line元素时设置子图片的 margin 是不会撑大父容器的。(2013-08-19)

转载于:https://www.cnblogs.com/chy1000/p/3260067.html