html5

html5

postMessage监听事件为什么会执行两次

最后的倔强 回复了问题 • 3 人关注 • 2 个回复 • 475 次浏览 • 6 天前 html5

【2.2万元悬赏h5创作高手】

回复

totoro 发起了问题 • 1 人关注 • 0 个回复 • 110 次浏览 • 2017-11-02 17:21 html5

Vue通过axios获取数据,渲染的问题

jacsondct 回复了问题 • 3 人关注 • 2 个回复 • 158 次浏览 • 2017-08-21 11:33 html5

如何用正则匹配出标签中的值?

mercury74 回复了问题 • 4 人关注 • 3 个回复 • 149 次浏览 • 2017-08-21 10:55 html5

为什么我的定时器执行了里面的值不动?

xtbda 回复了问题 • 2 人关注 • 1 个回复 • 139 次浏览 • 2017-08-21 10:44 html5

有比较好用的自定义滚动条的插件吗

qweqwe 回复了问题 • 4 人关注 • 3 个回复 • 180 次浏览 • 2017-08-21 10:11 html5

Canvas怎么在路径上画文本

itmiyang 回复了问题 • 3 人关注 • 2 个回复 • 2485 次浏览 • 2017-08-21 09:55 html5

vue npm install 问题

illutomato 回复了问题 • 2 人关注 • 1 个回复 • 176 次浏览 • 2017-08-21 09:33 html5

H5中的audio标签播放音频时,过一段时间会自动停止。

commaskh5 回复了问题 • 2 人关注 • 1 个回复 • 136 次浏览 • 2017-08-21 09:22 html5

vue-cli的main.js怎么引入scss

richway 回复了问题 • 3 人关注 • 2 个回复 • 195 次浏览 • 2017-08-21 09:11 html5

响应式插件问题。

crokery321 回复了问题 • 2 人关注 • 1 个回复 • 123 次浏览 • 2017-08-20 21:55 html5

webstorm编辑器如何设置默认的node路径

njmarked 回复了问题 • 2 人关注 • 1 个回复 • 137 次浏览 • 2017-08-20 21:44 html5

如何将react的默认路径改成自己想要的

wyfwz888 回复了问题 • 3 人关注 • 2 个回复 • 145 次浏览 • 2017-08-20 21:33 html5

支付宝支付成功回调地址刷新当前页面?

tongshuo1990 回复了问题 • 4 人关注 • 3 个回复 • 143 次浏览 • 2017-08-20 21:22 html5

javascript求出最小的两位数

bigzerg 回复了问题 • 15 人关注 • 14 个回复 • 191 次浏览 • 2017-08-20 20:11 html5

iframe不能开卡xml文件?需求需要在一个div里面展示xml原文件;

justcby 回复了问题 • 2 人关注 • 1 个回复 • 168 次浏览 • 2017-08-20 19:55 html5

这种功能是怎么实现的,这是开源的模板吗?

amymengfan 回复了问题 • 4 人关注 • 3 个回复 • 142 次浏览 • 2017-08-20 19:44 html5

base64图片编码是将图片本身转换还是将图片url转换?

bb3994411 回复了问题 • 3 人关注 • 2 个回复 • 142 次浏览 • 2017-08-20 19:33 html5

关于前端跨域nginx配置反向代理的问题?

renxianpeng 回复了问题 • 3 人关注 • 2 个回复 • 144 次浏览 • 2017-08-20 19:11 html5

js如何将二进制流音频转为audio标签能播放的格式?

Skt9008 回复了问题 • 2 人关注 • 1 个回复 • 196 次浏览 • 2017-08-20 18:44 html5

条新动态, 点击查看

不是很了解这方面,但是还是要说点什么。。有错漏之处请大家指出。



豆瓣很早之前有一个叫做One Ring的开源项目,虽然已经很久没有更新(不知道是不是已经放弃了),但是可作为一个典型的学习参考范例。



显示全部 »

不是很了解这方面,但是还是要说点什么。。有错漏之处请大家指出。



豆瓣很早之前有一个叫做One Ring的开源项目,虽然已经很久没有更新(不知道是不是已经放弃了),但是可作为一个典型的学习参考范例。




OneRing是一个跨平台的桌面应用开发库,使用HTML5+CSS3制作用户界面,用Javascript编写交互逻辑,同时提供用写web后端的技术编写后台逻辑。



OneRing由框架和应用两个部分组成。框架部分通过为本地窗口内嵌一个WebKit浏览器来提供各个操作系统的桌面展现。并提供了一致的js接口。应用部分是一个Web
Server,负责应用逻辑,用html/css描述界面,用js提供用户交互。




根据hongqn大表叔的解释,做OneRing是为了使用Web技术来开发桌面应用(感觉很爽)。下面来看一下OneRing的出生迭代。



1.我们常见的Web技术是这样的:





2.加入App Launcher,监听本地端口,当运行程序时打开系统默认浏览器:





3.上面的实现有一个问题,应用还是在浏览器中运行,感觉不像本地体验,所以本地展示不能使用浏览器,封装一下浏览器,使用IE的窗体:





4.IE must DIE!所以所以,用webkit代替ie来做本地界面:



5.但是要访问系统API怎么办呢?使用onering.js:



6.服务端避免防火墙的annoying:



OneRing应用的启动流程:




  1. 应用启动,加载框架运行时库,注册应用url的访问方法(如WSGI),并调用框架的loop函数。

  2. loop函数会访问应用的 /init URL,得到一个json数据,描述初始应用窗口的相关参数,如位置、大小、窗口属性、初始页面url等。

  3. 框架根据该数据创建窗口,并让该窗口内的浏览器访问初始页面url,渲染用户界面,然后等待UI事件。

  4. 用户在界面上操作时,可以通过超链接改变整个窗口内容,也可以使用Ajax技术更新窗口内部分内容。

  5. 应用可以让浏览器调用ONERING名字空间下的js函数,和操作系统进行交互,该名字空间由url onering://onering/onering.js 加载。

  6. 应用通过 bind(event, function) 函数监听窗口更改大小、移动等操作系统UI事件。
    可以使用pub/sub机制主动推送消息给浏览器。

  7. 调用 ONERING.exit() 可以退出应用;所有窗口都关闭后也会退出应用。



解释很无力,看一个Python示例代码:



#!/usr/bin/env python
import json
import web
import onering

urls = (
'/init', 'init',
'/', 'index',
)

class init:
def GET(self):
web.header('Content-Type', 'application/json')
return json.dumps({'width': 400, 'height': 300, 'url': '/'})

class index:
def GET(self):
web.header('Content-Type', 'text/html')
return """<html>
<head><script type="text/javascript" src="onering://onering/onering.js"></script></head>
<body>
<p>Hello, world!</p>
<button onclick="javascript:ONERING.exit()">Exit</button>
</body></html>"""

app = web.application(urls, globals())

if __name__ == '__main__':
onering.register_wsgi_app("demo", app.wsgifunc())
onering.loop("demo")


豌豆荚2.0时参考了OneRing的设计思路,重写了OneRing(豌豆荚一直说开源出来也没有开源-_-)。



豌豆荚2.0技术架构图:



参考OneRing的通信层,把通信层分成三个部分,一个是前端,一个是后端服务,另一个是操作系统,定义了这三个端,六个方向的通信实现的策略:



几个OneRing相关连接:




  • OneRing项目地址

  • hongqn2010年时的一个slide

  • OSChina的一篇文章

  • Tide SDK

  • hongqn在豌豆荚的演讲(前几分钟有讲OneRing与豌豆荚的基情)

  • 豌豆荚2.0技术坑

wuer0520

wuer0520 回答了问题 • 2016-03-24 19:00 • 1 个回复 不感兴趣

Uncaught Error: SecurityError: DOM Exception 18

赞同来自:

你将 ‘–allow-file-access-from-files’设置为true就可以了

你将 ‘–allow-file-access-from-files’设置为true就可以了

ddsoftdjg

ddsoftdjg 回答了问题 • 2016-03-26 21:00 • 4 个回复 不感兴趣

HTML5 增加的语义标签(元素)有什么意义?

赞同来自:

以下故事纯属虚构,虽然很美,但却是错误的。如有疑问,你看看 @依云 的回复。






在 html 中,所有的标签都是一视同仁的,所以,N 年前,你可以看到这样的页面。



<div id="list"&... 显示全部 »

以下故事纯属虚构,虽然很美,但却是错误的。如有疑问,你看看 @依云 的回复。






在 html 中,所有的标签都是一视同仁的,所以,N 年前,你可以看到这样的页面。



<div id="list">
<div class="iteam">java</div>
<div class="iteam">PHP</div>
<div class="iteam">python</div>
</div>


后来,标签进化了。



<ul>
<li>java</li>
<li>PHP</li>
<li>python</li>
</ul>


随后,html 变得更加标准化了:



<div id="header"></div>
<div id="footer"></div>
<div id="nav"></div>
<div id="sidebar"></div>


html 继续进化:



<nav>
<section>
<article>
<aside>
<hgroup>


总之,就是越来越语义化。即使在 html5 中,你一样可以只使用 div 开发一个网站。

浏览器不是有同域限制的么?



如果两个页面的一级域名不同,那iframe里的页面怎么能控制外部页面呢?



当然,如果两个页面只是二级域名不同,比如a.segmentfault.com和b.segmentfault.com之间,... 显示全部 »

浏览器不是有同域限制的么?



如果两个页面的一级域名不同,那iframe里的页面怎么能控制外部页面呢?



当然,如果两个页面只是二级域名不同,比如a.segmentfault.com和b.segmentfault.com之间,可以通过JS将两个页面的document.domain设置为一样的,



document.domain=segmentfault.com;


这样两个页面的JS可以互相调用。这种特性可以用来在一个一级域名下的两个二级域名之间做跨域请求。



但是如果一级域名不一样,是没有直接控制的可能的,浏览器直接就给返回错误了,怎么产生威胁的呢?

水平拆分方案A:百分比宽度+float



可以全浏览器兼容,但是需要用到一些hack解决float定位的问题,同时需要考虑清除浮动。



在很多比例(1/3、2/3是最常见的情形)不能整除的情况下,在一些情形下出现1px的误... 显示全部 »

水平拆分方案A:百分比宽度+float



可以全浏览器兼容,但是需要用到一些hack解决float定位的问题,同时需要考虑清除浮动。



在很多比例(1/3、2/3是最常见的情形)不能整除的情况下,在一些情形下出现1px的误差。



水平拆分方案B:百分比宽度+不带间隙的inline-box



缺点同上。hack量和方案A不相上下。



额外的好处是有很多vertical-align方式可以指定,额外的坏处是很多vertical-align的属性值对于各个浏览器来说都不一样。最常见的vertical-align还是middle和baseline,顶多再加个top和bottom。



水平拆分方案C:表格



用表格当然是全浏览器支持的选择。



水平拆分方案D:display属性代替表格



用display:table和display:table-cell等属性替代表格,以兼顾语义。IE8+和现代浏览器支持。



更多前瞻属性……




  • 使用css3的新特性calc来计算值 + float/inline-box

  • 使用flexbox






下面介绍bootstrap的一套可复用的方案,这套方案是从方案A发展而来,主题思想是抽取出布局中可以复用的类。



一个常见的列拆分如下:



<div class="container">
<div class="row">
<div class="col-md-3"></div>
...
</div>
</div>


bootstrap的栅格系统的核心,即是使用这样的一个三层结构,最内层使用width来分配100%的父级宽度。



对于单列的类名规则是:col-[lg/md/sm/xs]-[1~12]。详情见 bootstrap栅格选项 。



中间的变量跟响应式media查询有关,这里不详细解释。最后一个值x,既等分父容器的1/12乘以x。如下:



.col-md-3 { float:left; }
@media (min-width: 992px) {
.col-md-3 { width: 25%; }
/* 父级容器的3/12 */
}


在bootstrap栅格系统中,每个col之间都有30px间隙,如何做到等分间隙呢?见如下CSS属性:



/* 列容器设置左右padding */
.col-md-3 {
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
/* 行容器设置负margin撑开 */
.row {
margin-right: -15px;
margin-left: -15px;
}
/* 行容器清理浮动 */
.row:before,
.row:after {
display: table;
content: " ";
}
.row:after {
clear: both;
}
/* container再补完被row挖去的15px */
.container {
padding-right: 15px;
padding-left: 15px;
}


等等,是不是有哪里不对?计算一下宽度:



每一个col-md-3的最终宽度 = 父容器宽度 * 25% + 15px * 2 (padding宽度) + 0 (border宽度)


怎么会每个都1/4等分父容器呢?



还有这个属性在作用:



*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}


bootstrap使用*来选取所有元素(这是我对bootstrap感到厌烦的原因,为了开发效率,牺牲选择器效率),并强制使用border-box计算宽度,因而达到了布局上的大和谐这样的计算公式:



父容器宽度 * 25% = 每一个col-md-3的最终宽度 + 15px * 2 (padding宽度) + 0 (border宽度)


这样做以后,可以很方便地拿出对应的类来使用,也可以级联,类似于row-col-row-col-row-col……



div.container
h1 test
div.row
div.col-sm-6
div.row
div.col-sm-6
img(data-src="holder.js/100%x180")
div.col-sm-6
img(data-src="holder.js/100%x180")
div.col-sm-6
div.row
div.col-sm-3
img(data-src="holder.js/100%x180")
div.col-sm-9
img(data-src="holder.js/100%x180")


(上面用了jade的语法展示层级,和bootstrap的holder.js来补充一个img元素以展示效果)。效果如下:





bootstrap方案的适用面是IE8+及其他现代浏览器,在这个方案中,主要的问题在于box-sizing属性的兼容性,小瑕疵是百分比宽度带来的±1px误差的问题。

wyfwz888

wyfwz888 回答了问题 • 2016-04-03 17:22 • 2 个回复 不感兴趣

IE8浏览器不支持HTML5怎么办

赞同来自:

html5shiv.js可以解决
很多免费CDN都提供了这个包
http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js
http://cdn.bootcss.com/html5shiv/r29/h... 显示全部 »
html5shiv.js可以解决
很多免费CDN都提供了这个包
http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js
http://cdn.bootcss.com/html5shiv/r29/html5.js[code]<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>
<! -->
wuer0520

wuer0520 回答了问题 • 2016-04-06 19:00 • 4 个回复 不感兴趣

使用CSS修改HTML5 input placeholder颜色

赞同来自:

回答:

toscho:有三种实现方式:伪元素(pseudo-elements)、伪类( pseudo-classes)和Notihing。

WebKit和Blink(Safari,Google Chrome, Opera15+)使用伪元素... 显示全部 »

回答:

toscho:有三种实现方式:伪元素(pseudo-elements)、伪类( pseudo-classes)和Notihing。

WebKit和Blink(Safari,Google Chrome, Opera15+)使用伪元素



::-webkit-input-placeholder


Mozilla Firefox 4-18使用伪类



:-moz-placeholder


Mozilla Firefox 19+ 使用伪元素



::-moz-placeholder


IE10使用伪类



:-ms-input-placeholder


IE9和Opera12以下版本的CSS选择器均不支持占位文本。需要注意的是伪元素在Shadow DOM里会起到元素的真实作用。

CSS选择器

因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定。



::-webkit-input-placeholder { /* WebKit browsers */
color: #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999;
}




Matt:textareas(文本框可拉伸)风格样式的代码,如下:



input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #636363;
}


brillout.com:input和Textarea的字体颜色均为红色。所有样式都要针对不同的选择器而定,不要打包整体处理,因为其中一个出问题,其他的都会失效。



*::-webkit-input-placeholder {
color: red;
}

*:-moz-placeholder {
color: red;
}

*:-ms-input-placeholder {
/* IE10+ */
color: red;
}




James Donnelly:在Firefox和IE里,正常input文本颜色覆盖占位符颜色的方法:



::-webkit-input-placeholder {
color: red; text-overflow: ellipsis;
}
:-moz-placeholder {
color: #acacac !important; text-overflow: ellipsis;
}
::-moz-placeholder {
color: #acacac !important; text-overflow: ellipsis;
} /* for the future */
:-ms-input-placeholder {
color: #acacac !important; text-overflow: ellipsis;
}


还有一种好办法:



input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #666;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #666;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #666;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: #666;
}


最后一种是从网上找的:



[code]$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find(' ').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});


这个代码调用的规则是,先加载Javascript再用CSS修改占位符属性。



form .placeholder {
color: #222;
font-size: 25px;
/* etc */
}




user1729061:不用CSS和占位文本,同样能得到相同效果。



<input type="text" value="placeholder text" onfocus="this.style.color='#000';
this.value='';" style="color: #f00;"/>
qudanjiang

qudanjiang 回答了问题 • 2016-04-07 20:50 • 8 个回复 不感兴趣

css中两个基础问题想请教一下各位

赞同来自:

LZ的问题:




一切皆为框

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容... 显示全部 »

LZ的问题:




一切皆为框

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。

您可以使用 display 属性改变生成的框的类型。这意味着,通过将 display 属性设置为 block,可以让行内元素(比如 <a> 元素)表现得像块级元素一样。还可以通过把 display 设置为 none,让生成的元素根本没有框。这样的话,该框及其所有内容就不再显示,不占用文档中的空间。

——《 W3School:CSS 定位 》




块框和行内框有明确的包含关系:




  • 块框可以包含块框

  • 行内框可以包含行内框

  • 块框可以包含行内框

  • 行内框不应该包含块框(若违法这条规则,结果很复杂,但绝对难以达成想要的效果)


更多区别:




  • block元素默认宽度自适应于外层,而inline元素宽度自适应于内部

  • block元素默认从上往下铺排,inline元素默认从左往右铺排

  • block元素可以设置上下margin,inline元素不可以


至于float,它主要是为了满足环绕的效果,请阅读:CSS float浮动的深入研究、详解及拓展 (一) 、 (二) 。



由于LZ缺的知识点太多,这里实在是写不完。还是建议完成w3school的相关课程学习,和codecademy的CSS Positioning类目下的课程。



如果LZ有英文阅读能力,在实践后可以以这篇文章来指导知识的深化:《 【译】理解 CSS 规范 》





下面主要是反驳“块级元素前后会带有换行符”的误导性观点。



CSS的问题,越基础,就越容易出现误解。



“块级元素前后会带有换行符”这种说法应该是来自于实战,用类比的方式做了相应知识点的内化。读到这句话,大家也可以很轻松地联想起word之类的文本排版软件的操作:

Q: 如果我有文字段A和文字段B,我想让A和B左右不交叠,折开一行,我该怎么办?

A: 按回车。

Q: 如果我有文字段C和图片D,我想让D不出现在C中间,从C下延排起,我该怎么办?

A: 按回车。



是这样的吗?把word之类的文本排版软件的思维带到HTML里面来,下面的思维应该很常见:

- 在两个元素之间死命摁回车,想让两个元素上下隔得远一些

- <br>标签放在任意两个元素之间,想让两个元素上下隔得远一些。 http://jsfiddle.net/humphry/3Lk2Q/



我敢相信到现在都有人是用<br>(或者另外一个有高度的<div>标签)而非margin来做的垂直间隔。用Word的方式来理解HTML,用<br>来做间隔,等到试验出来用font-sizeline-height去控制<br>的高度,以调节两个div之间的垂直距离的时候,就彻彻底底被带到沟里去了。(《 你真的了解HTML吗 》)





“块级元素前后会带有换行符”的误导性大于它的帮助,LZ甚至已经问出了“如果是display:inline;的话那元素没有换行符就会全挤在一行上是吗?”这样的问题。



换行符不是重点,重点是盒子。



要正确理解CSS排版中的这个基础部分,得先从文档流开始。



CSS为了达到日常排版的需求,给予了文档流以现实依据:我们的书写/阅读习惯:





(上面有个图,因为是GIF可能加载比较慢,注意看哟。)



文档流如同河流一般,将元素带向相应的屏幕位置。普通的,正常的,大众的文档流,就像是上面这个动画所示的,首要的铺排是:从左往右。次要的铺排是:从上到下。



为何我要强调普通的,正常的,大众的呢?因为有的语言是这样的:





这里就展现了从右向左,从上到到下的语言书写。因此跟这个世界的现象一致,文档流的顺序不总是从左往右从上到下,一系列属性可以改变它,不过我们这里不谈这个,我们只谈常规流。



CSS中的文档流中的两种元素,行内框的堆叠方向对应着我们的书写顺序,而块框则默认从上往下堆叠:




  • 行内框——inline——从左往右,从上往下

  • 块框——block——从上往下


换行在这个顺序中重不重要?不重要,这个过程中,重点是框往哪个方向堆叠。



更加深入的常规流介绍:《 w3help:常规流( Normal flow ) 》





前端是一个由实践发展起的方向,相关知识点的理解大家经常用的是类比,这很正常。盒子堆叠的机制用类比,说成是换行符,对不对呢?



对也不对。

说对,是因为,让盒子不左右交叠、而是上下比邻的机制跟文本排版软件里面的回车分割确实相似;

说不对,是因为,如果理解到了盒子的层面,理解了块级元素和行内元素是如何按照文档流方向进行排版,理解了float元素是如何做到环绕,理解了浮动和清除浮动,就会明白,“块级元素天生自带换行符”的说法带有根深蒂固的Word排版的思想,也很有误导性。



最好的理解CSS和HTML的办法,是用CSS和HTML的方式进行思考,而不是用其他的经验来套。这就像是英语口语,有英语思维,才能流利地表达。





更新:感谢P酱,这里将容易混淆的部分修改了。“行内框不应该包含块框”是CSS相关,标签无关的,“默认是行内的元素不应该包含默认是块级的元素”跟DTD声明和浏览器有关。但总体来说,破坏这两条规则很难达成想要的效果。

qweqwe

qweqwe 回答了问题 • 2016-04-09 14:50 • 1 个回复 不感兴趣

实现文本框差异化录入颜色

赞同来自:

Derek朕會功夫:如果用户是正常输入,你应该设置keypress。但我下面的代码中使用了blur,之所以没有使用keypress/keyup,是因为用户使用输入法输入会导致代码失效,而blur则不会。DEMO: http://jsfiddle.net/... 显示全部 »

Derek朕會功夫:如果用户是正常输入,你应该设置keypress。但我下面的代码中使用了blur,之所以没有使用keypress/keyup,是因为用户使用输入法输入会导致代码失效,而blur则不会。DEMO: http://jsfiddle.net/DerekL/Y8ySy/

\n\n $(\"body\").prop(\"contentEditable\", true).blur(function(){\n var chars = $(this).text().split(\"\");\n this.innerHTML = \"\";\n $.each(chars, function(){\n $(\"<span>\").text(this).css({\n color: \"#\"+(Math.random()*16777215|0).toString(16) //just some random color\n }).appendTo(\"body\");\n });\n});\n \n\n

此外,还有一种不能随机改变颜色的效果: http://jsfiddle.net/DerekL/A7gL2/

Android 下:chrome浏览器,uc开发者版浏览器,opera浏览器等都支持远程调试。
\nios下:使用saferi可以调试,而且可以调试webview,非常方便。
\n当然还有Weinre可以用。
\n教程的话可以自行搜索,... 显示全部 »

Android 下:chrome浏览器,uc开发者版浏览器,opera浏览器等都支持远程调试。
\nios下:使用saferi可以调试,而且可以调试webview,非常方便。
\n当然还有Weinre可以用。
\n教程的话可以自行搜索,网上资料还是比较全的。

xjbt

xjbt 回答了问题 • 2016-04-16 21:01 • 2 个回复 不感兴趣

这个网站首页左右滚动用的是什么插件?

赞同来自:

TweenMax是一个很常用的动画制作框架,TweenMax.js是TweenMax的JS版本

看源代码应该是用的TweenMax.js
TweenMax是一个很常用的动画制作框架,TweenMax.js是TweenMax的JS版本

看源代码应该是用的TweenMax.js

直接做成页面太折腾,万一需求或原型要改动比较麻烦,所以最好在产品设计阶段完成比较好。

\n\n

部份原型工具如下:
\n1、一般就是图片+ axure xp 这一类的工具
\n2、腾讯的CDC有一款工具防真度比较高, http://... 显示全部 »

直接做成页面太折腾,万一需求或原型要改动比较麻烦,所以最好在产品设计阶段完成比较好。

\n\n

部份原型工具如下:
\n1、一般就是图片+ axure xp 这一类的工具
\n2、腾讯的CDC有一款工具防真度比较高, http://cdc.tencent.com/
\n3、MAC下的工具omnigraffle不错
\n或其他很多。

\n\n

这些工具产品经理就能操作使用,减少开发资源的浪费

hh337

hh337 回答了问题 • 2016-04-16 13:00 • 8 个回复 不感兴趣

开发手机版网站有哪些前端框架?

赞同来自:

我推荐一个集成框架的解决方案,可以尝试一下 Ionic 框架 ,内置了cordova、html5 模板、angalurJS交互、跨平台ios/android/等等封装等功能都内置了,使用几行命令就可以生成一个demo框架,修改后再几行命令进行不同平台封... 显示全部 »

我推荐一个集成框架的解决方案,可以尝试一下 Ionic 框架 ,内置了cordova、html5 模板、angalurJS交互、跨平台ios/android/等等封装等功能都内置了,使用几行命令就可以生成一个demo框架,修改后再几行命令进行不同平台封装。

\n\n

安装 ionic

\n\n $ npm install -g cordova ionic\n \n\n

新建一个带sidemenu的应用

\n\n $ ionic start myApp sidemenu\n \n\n

进行ios应用封装和运行

\n\n $ cd myApp\n$ ionic platform add ios\n$ ionic build ios\n$ ionic emulate ios\n

不好对你的计划说什么,因为每个人的成长与基础不一样。下面是我的一些建议,结合自己的实际情况,在执行。还是重复一下,前端的核心是js。css不难,但需要来积累。对前端我是这么看的:

\n\n

不好对你的计划说什么,因为每个人的成长与基础不一样。下面是我的一些建议,结合自己的实际情况,在执行。还是重复一下,前端的核心是js。css不难,但需要来积累。对前端我是这么看的:

\n\n
    \n
  • \n

    css就像一瓶酒,得品。

    \n\n
    \n

    html,css总共就那些标签跟选择器属性什么的,但是要写一个有扩展性,健壮性或维护性的页面不容易。现在写页面基本条件反射,不是如何快速的完成,而是思考如果有界面需求修改,怎么在修改代码最少的情况下快速完成需求任务。这是对前端耐力,体力,智力的三重考验。

    \n
    \n
  • \n
  • \n

    js就像一把剑,得磨。

    \n\n
    \n

    js刚开始只是为了较验,随便技术社会的发展,承担的角色越来越重,刚开始玩玩jQuery感觉已经会js了,其实只是冰山一角。随着对js的了解越来越多,他即变态又可爱,即好玩又难控,即有很多兼容问题,但解决兼容是我们基本生存之道。从ajax到jsmvc一路走一路看,高载潮一浪高过一浪

    \n
    \n
  • \n
  • \n

    人生就是一场梦,得作。

    \n\n
    \n

    技术只是生活的一部分,曾经雄心斗志,如今低头写码。改变能改变的,接受不能改变的。人生有限,兄争朝夕啊。人生学习的态度是:不急不躁,不快不慢。持之以恒,相信自己。不求能改变世界,但求能改变自己的生活。不求健步如飞,但求一步一脚印。感谢磨难,他使我们内心更为坚强。感谢挫折,他使我们不断的成长,感谢bug,他使我们的思维更加深邃。感谢前端,他使我们更加的相信,撑起一片天空需要十八般武艺。

    \n
    \n
  • \n
\n

这些是我专为入门朋友准备的一个系列教程,有兴趣看看:

\n\n

1. web前端开发分享-css,js入门篇
2. web前端开发分享-css,js进阶篇
3. web前端开发分享-css,js提高篇
4. web前端开发分享-css,js工具篇
5. web前端开发分享-css,js深化篇
6. web前端开发分享-css,js移动篇

eriksson2

eriksson2 回答了问题 • 2016-04-20 18:50 • 1 个回复 不感兴趣

介绍页这种滚动+动画的特效如何实现?

赞同来自:

可参考 https://github.com/alvarotrigo/fullPage.js

可参考 https://github.com/alvarotrigo/fullPage.js

simonivas123

simonivas123 回答了问题 • 2016-05-01 12:50 • 1 个回复 不感兴趣

为什么网页顶部会缩短

赞同来自:

看了下这个网站,在 http://www.tmakerbase.com/wp-content/themes/kasa/js/head.js 里有

\n\n[code] if ($.browser.chrome && (ver ... 显示全部 »

看了下这个网站,在 http://www.tmakerbase.com/wp-content/themes/kasa/js/head.js 里有

\n\n[code] if ($.browser.chrome && (ver = $.browser.version.split(\".\") ) > 32 && ver <= 37) {\n $(\"body\").css(\"margin-top\", \"-33px\");\n }\n \n\n

当网页加载完成后会执行这段js 使得 body的margin-top:-33px
\n你用chrome 打开网页 f12打开debugger 点掉 margin-top:-33px就会出现了。

globalhqw123

globalhqw123 回答了问题 • 2016-07-13 21:50 • 3 个回复 不感兴趣

CSS 背景问题

赞同来自:

我来说一下原因吧
\n第一种情况

\n\n background: url(\"img/3.jpg\");\n background-repeat: no-repeat;\n background-position: ce... 显示全部 »

我来说一下原因吧
\n第一种情况

\n\n background: url(\"img/3.jpg\");\n background-repeat: no-repeat;\n background-position: center;\n background-size: cover;\n \n\n

能使你的页面呈现想要的效果 是因为 background-repeat background-position background-size这些属性 覆盖了background: url(\"img/3.jpg\");默认的 repeat position 等等属性

\n\n

第二种情况是因为 按照优先级问题 dom style>css文件 所以 你设置在css中的那些都不起作用

\n\n

设置成background-image: url(\'img/3.jpg\'); 后 css中的那些 属性就起作用了

\n\n

知识点:css优先级问题+复合属性问题

chenfulai

chenfulai 回答了问题 • 2016-07-27 14:00 • 1 个回复 不感兴趣

A:hover触发B元素的动画

赞同来自:

.button:hover .line这样写是后代选择器,你的子孙元素有这个类吗?

\n\n

解决方案:

\n\n

使用相邻兄弟选择器:.button:hover + .line显示全部 »

.button:hover .line这样写是后代选择器,你的子孙元素有这个类吗?

\n\n

解决方案:

\n\n

使用相邻兄弟选择器:.button:hover + .line

a23036

a23036 回答了问题 • 2016-07-27 17:50 • 3 个回复 不感兴趣

Web端向麦克风吹气游戏

赞同来自:

检测麦克风的声音,有明显声音就说明吹起了。至于呼吸空气的质量,应该是靠位置信息读取当地空气质量来展示的。

检测麦克风的声音,有明显声音就说明吹起了。至于呼吸空气的质量,应该是靠位置信息读取当地空气质量来展示的。

giszx

giszx 回答了问题 • 2016-07-27 21:20 • 4 个回复 不感兴趣

js制作一个摇点数前进后退的小游戏思路。

赞同来自:

前进后退停止的问题可以比较当前数字和摇出来的数字
摇出来的数字大就是前进,递增循环设置当前的数字所在的格子为高亮样式,其他的都为不亮样式。摇出来的数字小就递减循环,相等就不动。
前进后退停止的问题可以比较当前数字和摇出来的数字
摇出来的数字大就是前进,递增循环设置当前的数字所在的格子为高亮样式,其他的都为不亮样式。摇出来的数字小就递减循环,相等就不动。

映客、花椒的h5直播播放页面技术选择

zjq19921101 回复了问题 • 2 人关注 • 1 个回复 • 559 次浏览 • 2016-12-27 11:22 html5

让 HTML5 来为你定位

amymengfan 发表了文章 • 0 个评论 • 612 次浏览 • 2016-12-07 19:26 html5

JS开发HTML5游戏《悠悠考拉》(一)

brainr 发表了文章 • 0 个评论 • 295 次浏览 • 2016-11-18 12:26 html5

【CSON原创】A*算法+HTML5实现游戏寻路

giszx 发表了文章 • 0 个评论 • 676 次浏览 • 2016-08-03 18:00 html5游戏 javascript html5

HTML5 + Canvas 画可爱的“小猫咪”

cc25937795 发表了文章 • 0 个评论 • 480 次浏览 • 2016-07-27 21:36 html5 Canvas javascript

CSS3入门教程 - CSS3 多列

css3 发表了文章 • 0 个评论 • 467 次浏览 • 2016-07-13 23:01 css3

移动前端不得不了解的html5 head 头标签

lvzq2016 发表了文章 • 0 个评论 • 591 次浏览 • 2016-06-04 21:44 css3 css html5

如何在PC上使用firebug那样,调试手机端浏览器?

bb3994411 回复了问题 • 4 人关注 • 3 个回复 • 1537 次浏览 • 2016-04-10 11:50 html5 css javascript

请问在html中如何点击某元素.而展开一个select

mstar 回复了问题 • 3 人关注 • 2 个回复 • 1066 次浏览 • 2016-04-09 11:00 html5 css css3 javascript jquery

如何在JavaScript对象中添加函数?

njmarked 回复了问题 • 2 人关注 • 1 个回复 • 1117 次浏览 • 2016-04-06 20:50 html5 javascript

使用CSS修改HTML5 input placeholder颜色

giszx 回复了问题 • 5 人关注 • 4 个回复 • 1388 次浏览 • 2016-04-06 20:00 html5 css

如何快速清除Canvas图形组合模式?

weixiaozhuo123 回复了问题 • 2 人关注 • 1 个回复 • 946 次浏览 • 2016-04-06 12:50 html5 Canvas

postMessage监听事件为什么会执行两次

回复

最后的倔强 回复了问题 • 3 人关注 • 2 个回复 • 475 次浏览 • 6 天前 html5

【2.2万元悬赏h5创作高手】

回复

totoro 发起了问题 • 1 人关注 • 0 个回复 • 110 次浏览 • 2017-11-02 17:21 html5

Vue通过axios获取数据,渲染的问题

回复

jacsondct 回复了问题 • 3 人关注 • 2 个回复 • 158 次浏览 • 2017-08-21 11:33 html5

如何用正则匹配出标签中的值?

回复

mercury74 回复了问题 • 4 人关注 • 3 个回复 • 149 次浏览 • 2017-08-21 10:55 html5

为什么我的定时器执行了里面的值不动?

回复

xtbda 回复了问题 • 2 人关注 • 1 个回复 • 139 次浏览 • 2017-08-21 10:44 html5

有比较好用的自定义滚动条的插件吗

回复

qweqwe 回复了问题 • 4 人关注 • 3 个回复 • 180 次浏览 • 2017-08-21 10:11 html5

Canvas怎么在路径上画文本

回复

itmiyang 回复了问题 • 3 人关注 • 2 个回复 • 2485 次浏览 • 2017-08-21 09:55 html5

vue npm install 问题

回复

illutomato 回复了问题 • 2 人关注 • 1 个回复 • 176 次浏览 • 2017-08-21 09:33 html5

H5中的audio标签播放音频时,过一段时间会自动停止。

回复

commaskh5 回复了问题 • 2 人关注 • 1 个回复 • 136 次浏览 • 2017-08-21 09:22 html5

vue-cli的main.js怎么引入scss

回复

richway 回复了问题 • 3 人关注 • 2 个回复 • 195 次浏览 • 2017-08-21 09:11 html5

响应式插件问题。

回复

crokery321 回复了问题 • 2 人关注 • 1 个回复 • 123 次浏览 • 2017-08-20 21:55 html5

webstorm编辑器如何设置默认的node路径

回复

njmarked 回复了问题 • 2 人关注 • 1 个回复 • 137 次浏览 • 2017-08-20 21:44 html5

如何将react的默认路径改成自己想要的

回复

wyfwz888 回复了问题 • 3 人关注 • 2 个回复 • 145 次浏览 • 2017-08-20 21:33 html5

支付宝支付成功回调地址刷新当前页面?

回复

tongshuo1990 回复了问题 • 4 人关注 • 3 个回复 • 143 次浏览 • 2017-08-20 21:22 html5

javascript求出最小的两位数

回复

bigzerg 回复了问题 • 15 人关注 • 14 个回复 • 191 次浏览 • 2017-08-20 20:11 html5

iframe不能开卡xml文件?需求需要在一个div里面展示xml原文件;

回复

justcby 回复了问题 • 2 人关注 • 1 个回复 • 168 次浏览 • 2017-08-20 19:55 html5

这种功能是怎么实现的,这是开源的模板吗?

回复

amymengfan 回复了问题 • 4 人关注 • 3 个回复 • 142 次浏览 • 2017-08-20 19:44 html5

base64图片编码是将图片本身转换还是将图片url转换?

回复

bb3994411 回复了问题 • 3 人关注 • 2 个回复 • 142 次浏览 • 2017-08-20 19:33 html5

关于前端跨域nginx配置反向代理的问题?

回复

renxianpeng 回复了问题 • 3 人关注 • 2 个回复 • 144 次浏览 • 2017-08-20 19:11 html5

js如何将二进制流音频转为audio标签能播放的格式?

回复

Skt9008 回复了问题 • 2 人关注 • 1 个回复 • 196 次浏览 • 2017-08-20 18:44 html5

描述cookie,sessionstroage,localstrage的区别

weixiaozhuo123 发表了文章 • 0 个评论 • 299 次浏览 • 2016-12-21 17:51 html5

html5 Canvas 拖拽

stamina887 发表了文章 • 0 个评论 • 225 次浏览 • 2016-12-21 17:26 html5

html5高级程序设计第二章之Canvas API上篇

giszx 发表了文章 • 0 个评论 • 233 次浏览 • 2016-12-21 16:51 html5

HTML5 Web存储的localStorage和sessionStorage的使用方法【图文说明】

brainr 发表了文章 • 0 个评论 • 237 次浏览 • 2016-12-21 16:26 html5

一些有用的HTML5 pattern[转]

tongshuo1990 发表了文章 • 0 个评论 • 190 次浏览 • 2016-12-21 15:51 html5

用h5中的canvas 绘制八卦图

lklcool 发表了文章 • 0 个评论 • 246 次浏览 • 2016-12-21 14:51 html5

html5 canvas 前端生成缩略图

hh337 发表了文章 • 0 个评论 • 215 次浏览 • 2016-12-21 14:26 html5

Android开发HTML5应用-总结

shilongyan 发表了文章 • 0 个评论 • 232 次浏览 • 2016-12-21 13:51 html5

html5 Canvas画图6:曲线之arcTo

royt123 发表了文章 • 0 个评论 • 212 次浏览 • 2016-12-21 13:26 html5

HTML5你必须知道的28个新特性

jackch1886 发表了文章 • 0 个评论 • 216 次浏览 • 2016-12-21 12:51 html5

HTML5学习笔记简明版(5):input的type超级类型

xianjijida7218 发表了文章 • 0 个评论 • 157 次浏览 • 2016-12-21 12:26 html5

jQuery仿21CN官网二级导航菜单样式

jacsondct 发表了文章 • 0 个评论 • 210 次浏览 • 2016-12-21 11:51 html5

canvas API ,通俗的canvas基础知识(五)

xjbt 发表了文章 • 0 个评论 • 208 次浏览 • 2016-12-21 11:26 html5

-_-#【Canvas】绘制文本

qishiwotinghao 发表了文章 • 0 个评论 • 185 次浏览 • 2016-12-21 10:51 html5

WP7 Mango HTML5开发体验(二)PhoneGap运行机制

fengsuiyingdong 发表了文章 • 0 个评论 • 208 次浏览 • 2016-12-21 10:26 html5

HTML5 Canvas学习---第一章 《Hello World及图片显示》

cdns20150714 发表了文章 • 0 个评论 • 160 次浏览 • 2016-12-21 09:51 html5

Android中Canvas和Paint简单例子

renxianpeng 发表了文章 • 0 个评论 • 178 次浏览 • 2016-12-21 09:26 html5

iOS视频开发经验

huanghank 发表了文章 • 0 个评论 • 255 次浏览 • 2016-12-20 21:51 html5

HTML5 canvas 模拟事件

Skt9008 发表了文章 • 0 个评论 • 214 次浏览 • 2016-12-20 21:26 html5

HTML5 是下一代 HTML 标准。

HTML5 简单易学。