我们不会放过一套好的ui素材，一定会把他们分享出来，而今天分享的就是由云瑞整理的2017年11月新出炉的ui套装源文件下载，这些套装都是极简主义和扁平化风格的，都是当下最流行的，包含web和手机app界面ui，希望对您有用
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
对于图标如何断线，如果是经验丰富的设计师，估计靠感觉做就可以了，但不是大神的我们怎么办呢？总得有点规律让我们参考参考吧，虽然有些规律不能全盘通用，但这次总结一定能给你带来帮助。
来，看下大纲：
1.先考虑在拼接处断线
2.平衡视觉复杂度
3.避免正中间处断线
4.尽量让图标一笔画完
1.先考虑在拼接处断线
如果你觉得此篇文章对你有作用，请收藏转发分享给你的朋友，把自己的收获写在评论区，小编会解答。
如果一个物体是由两个部分组成，当我们选择在拼接处断开：
我会觉得两个部分还没组装好，是一种很自然的分开。
但如果是下面这样的：
我会觉得它坏了，很不舒服。
我们做断线图标的时候也一样，可以先考虑在物体的拼接处断线，让断口看起来自然和谐！
举个例子：
下图是一个“我的”图标：UI设计学习群：583915450，领取100G学习资料，备注：资料领取
如果现在让我给它来做断线，我就先找到拼接处，分析如下：
虽然例子有点血腥，但事实确实如此，拼接处就在头和身子连接的地方，所以尝试在这里断开：
哎呦，我觉得还ok。
行，那再来个例子！
下图是个消息的图标：
再来分析，它的外形是由一个矩形和一个三角形组成的：
我们还是在拼接处断开，得到如下图：
嗯，也还行！
所以一般来做断线图标，我就会先利用这一个规律看可不可行。
如果可行，就继续优化细节，如果不可行再尝试其他方法。
2.视觉复杂度要平衡
有时候，我们的图标不好将其拆解，这时候我们就可以尝试去考虑图标的视觉复杂度。
来个例子，下图是一个皇冠的图标：
经过分析，我们可以得出，图标红色区域的复杂程度要比蓝色区域高：
所以我选择在蓝色区域断口，来增加蓝色区域的复杂程度，达到平衡的效果：
那如果在红色区域断开是什么样的呢，我们来分析对比一下：
所以，通过对视觉上复杂程度的解析后发现，方案一会平衡协调很多！
再来个例子，下面是个通讯录图标：
图标的左侧要比右侧复杂:
如果我们选择在左侧断线，那左侧就会更复杂，这样两边的复杂度就会失调，所以我选择在右边断线：
这样图标左右都有细节，视觉平衡多了！
3.避免正中间处断线
有朋友会说了，那有些图标没有拼接处，复杂程度也都一样，比如下面这种：
怎么办呢？
很简单，这种图标只要尽量避免在正中间断线就ok，因为正中间断线显得过于呆板：
其它地方都可以尝试，例如左上角、左上角、右上角、右下角等等。
4.尽量让图标一笔画完
这也是一个很重要的知识点：如果可以的话尽量让图标外轮廓一笔画完，如下图：
其实很多时候，只要我们能从拼接处断线，基本都是可以一笔画完的，所以大家注意一下就好了。
当然，如果实在不能一笔画下来，也不必勉强，因为强扭的瓜不好看！
总结
这四个知识点就是目前为止菜心所整理的关于断线图标的规律，个人经验，供大家参考。
不过提醒大家，这些方法难免会有少数不适用的时候，遇到不适用的情况，千万不要因为规则而被困住，多多尝试，敢于不同，也许可以找到更合适的解决方案。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
UI设计栈 2018-03-26 19:24:14
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
平时我们提到的布尔运算其实就是AI路径查找器(pathfinder),通过路径【加】【减】运算绘制出各种各样的形状，是成为一名优秀的UI设计师必备的技能之一。
对于初学者来说，刚开始可能模糊不清，确实不容易理解，下面栈长奉上最全的布尔运算深入解析教程，希望对迷途中的UI设计小白有所帮助。
图片来源于网络
图片来源于网络
图片来源于网络
UI设计中的布尔运算由浅及深，深入解析，图标瞬间高大上！
UI空状态404错误页可以帮助网站避免丢失用户的信任，并正确引导用户返回其它页面，减少客户的流失量。404页面的设计也是提高用户体验的一种表现形式。下面我们以去哪网404页面为例来为大家具体讲解一下404的构成。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
html与css:
<!DOCTYPE html>
</html>
JS:
var waterfall = function(wrap, boxes) {
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 标签重定义 */
* {
margin: 0;
padding: 0;
border: none;
}
body {
background: #ddd;
}
img {
border: none;
}
a {
text-decoration: none;
color: #444;
}
a:hover {
color: #999;
}
/* wrap */
#wrap {
position: relative;
width: auto;
height: auto;
margin: 0 auto;
}
#wrap>div {
float: left;
box-sizing: border-box;
width: 280px;
height: auto;
margin: 10px;
padding: 10px;
border-radius: 5px;
background: #fff;
}
#wrap>div>img {
width: 260px;
margin: 0 auto;
}
#wrap>div>a {
display: block;
font-size: 18px;
font-weight: bold;
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrap">
<div>
<img src="img/1.jpg">
<a href="http://www.imooc.com" target="_blank">第一张 路飞与艾斯</a>
</div>
<div>
<img src="img/2.jpg">
<a href="http://www.imooc.com" target="_blank">第二张 艾博</a>
</div>
<div>
<img src="img/3.jpg">
<a href="http://www.imooc.com" target="_blank">第三张 路飞</a>
</div>
<div>
<img src="img/4.jpg">
<a href="http://www.imooc.com" target="_blank">第四张 艾斯</a>
</div>
<div>
<img src="img/5.jpg">
<a href="http://www.imooc.com" target="_blank">第五张 女王</a>
</div>
<div>
<img src="img/6.jpg">
<a href="http://www.imooc.com" target="_blank">第六张 香吉士</a>
</div>
<div>
<img src="img/7.jpg">
<a href="http://www.imooc.com" target="_blank">第七张 艾斯</a>
</div>
<div>
<img src="img/8.jpg">
<a href="http://www.imooc.com" target="_blank">第八张 霸气</a>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
// 获取屏幕可以显示的列数
var boxWidth = boxes.eq(0).width() + 40;
var windowWidth = $(window).width();
var colsNumber = Math.floor(windowWidth / boxWidth);
// 设置容器的宽度
wrap.width(boxWidth * colsNumber);
// 定义一个数组并存储每一列的高度
var everyHeight = new Array();
for (var i = 0; i < boxes.length; i++) {
if (i < colsNumber) {
everyHeight[i] = boxes.eq(i).height() + 40;
} else {
var minHeight = Math.min.apply(null, everyHeight);
var minIndex = getIndex(minHeight, everyHeight);
boxes.eq(i).css({
'position': 'absolute',
'top': minHeight,
'left': boxes.eq(minIndex).position().left,
'opacity': '0'
}).stop().animate({
'opacity': '1'
}, 1000);
everyHeight[minIndex] += boxes.eq(i).height() + 40;
};
}
};
// 获取最小列的索引
function getIndex(minHeight, everyHeight) {
for (index in everyHeight) {
if (everyHeight[index] == minHeight) {
return index;
};
};
};
$(document).ready(function(event) {
var wrap = $('#wrap');
var boxes = $('#wrap').children('div');
waterfall(wrap, boxes);
});
1.Json的格式
其实json就是对象。源生的js代码并没有类的概念。对象救就是object。对象有自己的属性，也可以有自己的方法。json是一种轻量级的存储和交换信息的语言。他有自己的格式。
较为简单的json。里面只有简单的对象，key+value的形式：
每个元素之间用逗号隔开。调用每个key的值可用语句。例如：CellInfo.UEAmunt，就可取出其中的值。
较为复杂的json。里面包含了对象。
例如这个UEGroup1，里面的元素不仅有简单的key+value，还包含了三个对象。对象里的元素用{}括起来，彼此之间用逗号隔开。想具体访问某个元素的值也是通过逐层key，例如：UEGrooup1.DBR1.DLPackageSize
动态的往json只增加元素，增加对象。
前面说的几个都是静态的，提前写好的。那如果临时想加一个元素，例如在Cellinfo这个json中相加一个number的元素：
CellInfo.number=10;
对于往json中添加对象。例如我们想把Cellinfo和UEGroup1这两个object作为两个元素加入到另外一个大的json中：
2.json的发送
json写好后，发送给后台。至于后台怎么处理数据我们不关心。发送json的函数如下：
}
参数分别是后台的地址，变量，方法。变量就是我们自己写好的json，方法默认为post。例如我们想发刚刚的PETInfo
$.post('http://10.140.160.64:3012/users/ueinfo', PETInfo);
数据的发送、并获取结果的实例：
需求描述：用户填写一系列的输入框，前端获取数据，封装成json并发送给服务器，服务器会返回一个返回值，表示状态。前端需要展示这个内容提示客户。
3.json在本地的存储
存储数据有很多方法。这里我用的是localStorage。localStorage与cookie的区别如下：
① cookie在浏览器与服务器之间来回传递。
sessionStorage和localStorage不会把数据发给服务器，仅在本地保存
②数据有效期不同：
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
sessionStorage：仅在当前浏览器窗口关闭前有效。
localStorage 始终有效，长期保存。
③cookie数据还有路径的概念，可以限制cookie只属于某个路径下。
存储大小也不同，cookie数据不能超过4k，sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
④ 作用域不用
sessionStorage不在不同的浏览器窗口中共享；
localStorage在所有同源窗口中都是共享的；
cookie也是在所有同源窗口中都是共享的；
WebStorage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
用localstage存储json的实例：
将json取出来：
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
UI设计抛开视觉设计不谈，更多的是尺寸、适配等一些问题。这些问题往往是初学者比较难以理解的问题。更多的应用于简化开发过程、使多个产品拥有一致的体验，是落到实处的东西。由于负责各个产品线的产品经理并非同一人，如果此时设计师们又是渗透到各个产品组中，那么产品之间的体验就根本让用户感觉不出是一个部门设计开发出来的。规范是大型项目必须的，可以简化开发成本、减少各个部门之间的沟通成本。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
控制表格的多选和反选，直接上代码，顺便安利一个小知识点：tr的底边框不显示的问题，解决办法是：table{border-collapse:collapse;}
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<title></title>
-
<style>
-
*{margin:0;padding:0;}
-
table{border-collapse:collapse}
-
.detail_tb {width: 100%;border: 1px solid #ccc;}
-
.detail_tb .fied_header {height: 38px;line-height: 38px;border-left: none;border-bottom: 1px solid #ccc;background-color: #ececec;}
-
.detail_tb .fied_header th {text-align: center;border-right: 1px solid #ccc;color: #333;font-size: 14px;}
-
.detail_tb .fied_header th input {vertical-align: middle;}
-
.detail_tb tr {height: 38px;line-height: 38px;border-left: none;border-bottom: 1px solid #ccc;background-color: #fff;}
-
.detail_tb tr td {text-align: center;border-right: 1px solid #ccc;color: #666;font-size: 14px;}
-
.detail_tb tr td input {float: left;margin: 12px 5px 0 10px;}
-
.detail_tb tr td span {float: left;}
-
.detail_tb tr td select {display: inline-block;width: 90px;height: 24px;}
-
</style>
-
-
</head>
-
<body>
-
-
<table class="detail_tb" >
-
<thead>
-
<tr class="fied_header">
-
<th width="65"><input type="checkbox" value="number" id="number"> 序号</th>
-
<th width="110">孩子姓名</th>
-
<th width="130">家长电话</th>
-
<th width="110">介绍人孩子姓名</th>
-
<th width="130">介绍人电话</th>
-
<th width="150">报名时间</th>
-
<th width="100">分组情况</th>
-
<th width="100">拉新数量</th>
-
<th width="100">是否签到</th>
-
<th width="100">是否发奖</th>
-
</tr>
-
</thead>
-
<tbody id="tbody">
-
<tr>
-
<td width="65"><input type="checkbox" value="" id="" ><span>1</span></td>
-
<td width="110">张三</td>
-
<td width="130">13888888888</td>
-
<td width="110">李四</td>
-
<td width="130">13888888888</td>
-
<td width="150">2016/08/6 21:00</td>
-
<td width="100">
-
<select name="" id="">
-
<option value="">未分组</option>
-
<option value="">1</option>
-
<option value="">2</option>
-
</select>
-
</td>
-
<td width="100">33</td>
-
<td width="100">是</td>
-
<td width="100">
-
<select name="" id="">
-
<option value="">否</option>
-
<option value="">奖品1</option>
-
<option value="">奖品2</option>
-
</select>
-
</td>
-
</tr>
-
<tr>
-
<td width="65"><input type="checkbox" value="" id=""><span>2</span></td>
-
<td width="110">张四</td>
-
<td width="130">13888888888</td>
-
<td width="110">李四</td>
-
<td width="130">13888888888</td>
-
<td width="150">2016/08/6 21:00</td>
-
<td width="100">
-
<select name="" id="">
-
<option value="">未分组</option>
-
<option value="">1</option>
-
<option value="">2</option>
-
</select>
-
</td>
-
<td width="100">33</td>
-
<td width="100">是</td>
-
<td width="100">
-
<select name="" id="">
-
<option value="">否</option>
-
<option value="">奖品1</option>
-
<option value="">奖品2</option>
-
</select>
-
</td>
-
</tr>
-
<tbody>
-
</table>
-
-
-
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
-
<script type="text/javascript">
-
// 全选和反选
-
$("#number").click(function () {
-
var isChecked = $("#number").prop("checked");
-
$("#tbody input").prop("checked", isChecked);
-
})
-
-
// 单独选项控制全选
-
$("#tbody input").click(function () {
-
var allLength = $("#tbody input").length;
-
var checkedLength = $("#tbody input:checked").length;
-
if(allLength == checkedLength){
-
$("#number").prop("checked",true);
-
}else {
-
$("#number").prop("checked",false);
-
}
-
});
-
</script>
-
-
</body>
-
</html>
-
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题?
首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。解决方案是：
(1) 看是否能把body和html的height: 100%去除掉。
(2) 在滚动的容器中增加：-webkit-overflow-scrolling: touch或者给body增加：body {overflow-x: hidden}。
2.ios页面橡皮弹回效果遮挡页面选项卡？
(1) 有时body和html的height: 100%去除掉问题可能就没有了。
(2) 到达临界值的时候在阻止事件默认行为
var startY,endY;
//记录手指触摸的起点坐标
$('body').on('touchstart',function (e) {
startY = e.touches[0].pageY;
});
$('body').on('touchmove',function (e) {
endY = e.touches[0].pageY; //记录手指触摸的移动中的坐标
//手指下滑，页面到达顶端不能继续下滑
if(endY>startY&& $(window).scrollTop()<=0){
e.preventDefault();
}
//手指上滑，页面到达底部能继续上滑
if(endY<startY&& $(window).scrollTop()+
$(window).height()>=$('body')[0].scrollHeight){
e.preventDefault();
}
})
有时也会碰见弹窗出来后两个层的橡皮筋效果出现问题，我们可以在弹出弹出时给底层页面加上一个类名，类名禁止页面滑动这样下层的橡皮筋效果就会被禁止，就不会影响弹窗层。 3.IOS机型margin属性无效问题？ (1) 设置html body的高度为百分比时，margin-bottom在safari里失效 (2) 直接padding代替margin 4.Ios绑定点击事件不执行？ (1)添加样式cursor ：pointer。点击后消除背景闪一下的css：-webkit-tap-highlight-color:transparent; 5.Ios键盘换行变为搜索？ 首先，input 要放在 form里面。 这时 "换行" 已经变成 “前往”。 如果想变成 “搜索”，input 设置 type="search"。 6.Jq对a标签点击事件不生效？ 出现这种情况的原因不明，有的朋友解释：我们平时都是点击的A标签中的文字了。 所以要想用JS模拟点击A标签事件，就得先往A标签中的文字添加能被JS捕获的元素，然后再用JS模拟点击该元素即可。但是我觉得不合理，虽然找不到原因但是解决办法还是有的。 (1)document.getElementById("abc ").click(); (2)$("#abc ")[0].click(); 7.有时因为服务器或者别的原因导致页面上的图片没有找到？ 这是我们想需要用一个本地的图片代替没有找的的图片
<script type="text/javascript"> function nofind(){ var img=event.srcElement; img.src="images/logoError.png"; img.onerror=null; 控制不要一直跳动 } </script> <img src="images/logo.png" />8.transform属性影响position:fixed？
(1)规范中有规定：如果元素的transform值不为none，则该元素会生成包含块和层叠上下文。CSS Transforms Module Level 1不只在手机上，电脑上也一样。除了fixed元素会受影响之外，z-index（层叠上下文）值也会受影响。绝对定位元素等和包含块有关的属性都会受到影响。当然如果transform元素的display值为inline时又会有所不同。最简单的解决方法就是transform元素内部不能有absolute、fixed元素.
9.ios对position: fixed不太友好，有时我们需要加点处理？
在安卓上面，点击页面底部的输入框，软键盘弹出，页面移动上移。
而ios上面，点击页面底部输入框，软键盘弹出，输入框看不到了。。。查资料说什么的都有，iscroll,jquery-moblie，absolute，fixe，static都非常复杂，要改很多。。。
让他弹出时让滚动条在部
var u = navigator.userAgent, app = navigator.appVersion; var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (isiOS) { $('textarea').focus(function () { window.setTimeout('scrollBottom()', 500); }); } function scrollBottom() { window.scrollTo(0, $('body').height()); }10.jq validate插件验证问题？
(1)所以的input必须有name不然会出错
11.有时手机会出现断网的情况，我没可能会对断网的情况做一些处理？
(1)navigator.onLine可判断是否是脱机状态.
12.判断对象的长度？
(1)用Object.keys，Object.keys方法返回的是一个数组，数组里面装的是对象的属性
var person = { "name" : "zhangshan", "sex" : "man", "age" : "50", "height" : "180", "phone" : "1xxxxxxxxxx", "email" : "xxxxxxxxx@xxx.com" }; var arr = Object.keys(person); console.log(arr.length);(2)Object.getOwnPropertyNames(obj).length
13.上一题我们用到了Object.keys与Object.getOwnPropertyNames他们的区别？
Object.keys定义：返回一个对象可枚举属性的字符串数组；
Object.getOwnPropertyNames定义：返回一个对象可枚举、不可枚举属性的名称；
属性的可枚举性、不可枚举性：定义：可枚举属性是指那些内部 “可枚举” 标志设置为 true 的属性，对于通过直接的赋值和属性初始化的属性，该标识值默认为即为 true，对于通过 Object.defineProperty 等定义的属性，该标识值默认为 false。
var obj = { "prop1": "v1" };
Object.defineProperty(obj, "prop2", { value: "v2", enumerable: false });
console.log(Object.keys(obj).length); //output：1 console.log(Object.getOwnPropertyNames(obj).length); //output：2 console.log(Object.keys(obj)); //output：Array[1] => [0: "prop1"] console.log(Object.getOwnPropertyNames(obj)); //output：Array[2] => [0: "prop1", 1: "prop2"]
综合实例
var obj = { "prop1": "v1" };
Object.defineProperty(obj, "prop2", { value: "v2", enumerable: false});
console.log(obj.hasOwnProperty("prop1")); //output: true
console.log(obj.hasOwnProperty("prop2")); //output: true
console.log(obj.propertyIsEnumerable("prop1")); //output: true
console.log(obj.propertyIsEnumerable("prop2")); //output: false
console.log('prop1' in obj); //output: true
console.log('prop2' in obj); //output: true
for (var item in obj) {
console.log(item);
}
//output：prop1
for (var item in Object.getOwnPropertyNames(obj)) {
console.log(Object.getOwnPropertyNames(obj)[item]);
}
//ouput:[prop1,prop2]
14.移动开发不同手机弹出数字键盘问题？
(1)type="tel"
iOS和Android的键盘表现都差不多
(2)type="number"
优点是Android下实现的一个真正的数字键盘
缺点一：iOS下不是九宫格键盘，输入不方便
缺点二：旧版Android（包括微信所用的X5内核）在输入框后面会有超级鸡肋的小尾巴，好在Android 4.4.4以后给去掉了。
不过对于缺点二，我们可以用webkit私有的伪元素给fix掉：
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
(3)pattern属性
pattern用于验证表单输入的内容，通常HTML5的type属性，比如email、tel、number、data类、url等，已经自带了简单的数据格式验证功能了，加上pattern后，前端部分的验证更加简单了。
显而易见，pattern的属性值要用正则表达式。
实例 简单的数字验证
数字的验证有两个：
<input type="number" pattern="d">
<input type="number" pattern="[0-9]*">
15.input[number]类型输入非数字字符
js获取的值是空；比如-12，+123等
16.Javascript：history.go()和history.back()的用法与区别？
简单的说就是：go(-1):返回上一页，原页面表单中的内容会丢失；back():返回上一页，原页表表单中的内容会保留。history.go(-1):后退+刷新history.back():后退
之所以注意到这个区别，是因为不同的浏览器后退行为也是有区别的，而区别就跟javascript：history.go()和history.back()的区别类似。
Chrome和ff浏览器后退页面，会刷新后退的页面，若有数据请求也会提交数据申请。类似于history.go(-1);
而safari（包括桌面版和ipad版）的后退按钮则不会刷新页面，也不会提交数据申请。类似于javascript：history.back();
17.Meta基础知识：
<meta name="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
// width 设置viewport宽度，为一个正整数，或字符串‘device-width’
// height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
// initial-scale 默认缩放比例，为一个数字，可以带小数
// minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数
// maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数
// user-scalable 是否允许手动缩放
空白页基本meta标签
<!-- 设置缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<!-- 可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果） -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
<meta name="format-detection"content="telephone=no, email=no" />
其他meta标签
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
18.移动端如何定义字体font-family？
@ --------------------------------------中文字体的英文名称
@ 宋体 SimSun
@ 黑体 SimHei
@ 微信雅黑 Microsoft Yahei
@ 微软正黑体 Microsoft JhengHei
@ 新宋体 NSimSun
@ 新细明体 MingLiU
@ 细明体 MingLiU
@ 标楷体 DFKai-SB
@ 仿宋 FangSong
@ 楷体 KaiTi
@ 仿宋_GB2312 FangSong_GB2312
@ 楷体_GB2312 KaiTi_GB2312
@
@ 说明：中文字体多数使用宋体、雅黑，英文用Helvetica
body { font-family: Microsoft Yahei,SimSun,Helvetica; }
19.打电话发短信写邮件怎么实现？
// 一、打电话 <a href="tel:0755-10086">打电话给:0755-10086</a> // 二、发短信，winphone系统无效 <a href="sms:10086">发短信给: 10086</a> // 三、写邮件 <a href="mailto:863139978@qq.com">点击我发邮件</a> //2.收件地址后添加?cc=开头，可添加抄送地址（Android存在兼容问题） <a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net">点击我发邮件</a> //3.跟着抄送地址后，写上&bcc=,可添加密件抄送地址（Android存在兼容问题） <a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net&bcc=384900096@qq.com">点击我发邮件</a> //4.包含多个收件人、抄送、密件抄送人，用分号(;)隔开多个邮件人的地址 <a href="mailto:863139978@qq.com;[url=mailto:384900096@qq.com]384900096@qq.com[/url]">点击我发邮件</a> //5.包含主题，用?subject= <a href="mailto:863139978@qq.com?subject=邮件主题">点击我发邮件</a> //6.包含内容，用?body=;如内容包含文本，使用%0A给文本换行 <a href="mailto:863139978@qq.com?body=邮件主题内容%0A腾讯诚信%0A期待您的到来">点击我发邮件</a> //7.内容包含链接，含http(s)://等的文本自动转化为链接 <a href="mailto:863139978@qq.com?body=http://www.baidu.com">点击我发邮件</a> //8.内容包含图片（PC不支持） <a href="mailto:863139978@qq.com?body=<img src='images/1.jpg' />">点击我发邮件</a> //9.完整示例 <a href="mailto:863139978@qq.com;[url=mailto:384900096@qq.com]384900096@qq.com[/url]?cc=zhangqian0406@yeah.net&bcc=993233461@qq.com&subject=[邮件主题]&body=腾讯诚邀您参与%0A%0A[url=http://www.baidu.com]http://www.baidu.com[/url]%0A%0A<img src='images/1.jpg' />">点击我发邮件</a>
|
蓝蓝设计的小编 http://www.lanlanwork.com