吃货卡总结 (上)
近一个月，前端方面独自一人配合后台对接接口完成了整个项目。可以说这个项目是我首个独立全部完成，其中包括原型demo的完成、中间商家页面的修改UI、产品支付核销功能的添加、以下是这段时候遇见的问题和解决方案的总结（由于时间和内容问题本次总结分阶段进行）：
1. H5禁止页面选择复制问题
代码如下：
* { -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
这样写对于 -webkit-user-select: none; 存在问题是：在iPhone手机上会出现 input输入框 无法实现点击输入功能。（安卓可以实现）
解决方案：
*:not(input, textarea) {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
知识点衍生：CSS3: user-select
user-select是css3新增的一个属性,用来指定文本的可选择性.目前主流的浏览器都支持该属性,但是要加上各自的前缀.
-webkit-user-select: none; /* Chrome all / Safari all /opera15+*/
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none;
除了”none”还支持以下值:
auto——默认值，用户可以选中元素中的内容
text——用户可以选择元素中的文本
element——文本可选，但仅限元素的边界内(只有IE和FF支持)
all——在编辑器内，如果双击或上下文点击发生在子元素上，该值的最高级祖先元素将被选中。
2. CSS3 的渐进色变换用法
代码如下：
.fruit {
width: 65px;
height: 20px;
background: -webkit-linear-gradient(right, #7FFFD4, #43CD80);
/* Chrome、 Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, #7FFFD4, #43CD80);
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, #7FFFD4, #43CD80);
/* Firefox 3.6 - 15 */
background: linear-gradient(to right, #2ee8b9, #43CD80);
/* 标准的语法（必须放在最后） */
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
position: relative;
left: 3%;
top: 15px;
}
知识点衍生：CSS3 Gradient
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。上面主要是线变，如果是径变类似一个圆往外变色。
语法：
-moz-linear-gradient( [ || ,]? , [, ]* )
参数：
其共有三个参数，第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，那么right就是从右到左了。
如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。（第一个参数 可以加入角度参数。）
运用好渐变色就可以做出很多炫酷 高亮的背景颜色了。
3. CSS3 对应的字体抗锯齿方法
font-smoothing是非标准的css渲染规则，由于不同操作系统对字体渲染不同，不同浏览器也有自己对样式的一套解释规则，所以这个css样式至今也没有加入web标准。
这个样式的主要功能是对字体的锯齿进行调整。
-webkit-font-smoothing 是webkit在自己的渲染引擎中增加的对字体抗锯齿的调整。这个调整在ios中表现比较明显，在windows中表现的不是很明显。
知识点衍生：CSS3 Gradient
body { -webkit-font-smoothing: antialiased;
/*chrome、safari*/
-moz-osx-font-smoothing: grayscale;
/*firefox*/
font-family: "微软雅黑";
}
CSS3里面加入了一个“-webkit-font-smoothing”属性。
这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。
加上之后就顿时感觉页面小清晰了。 淘宝也在用哦！
它有三个属性：
none ------ 对低像素的文本比较好
subpixel-antialiased ------默认值
antialiased ------抗锯齿很好
4. 关于标签选项卡对应展示数据写法
jQuery写法较为简单如下代码：
$(function() {
$li.click(function() {
//加上颜色样式
$(this).addClass("selected")
.siblings() //排除自身的同辈元素
.removeClass("selected");
var index = $li.index(this); // 添加索引 好对应显示DIV内容
$(".kk")
.eq(index).show()
.siblings().hide(); //对应 控制的div 对应索引进行显示出来。
});
});
主要针对==原生JavaScript==写法进行一个原型封装：
面向过程 代码如下：
这是教育内容板块
这是财经
这是体育的
面向对象封装代码如下：
这是教育内容板块
这是财经
这是色情的