前两天编写了一个前端页面，在本机上显示一切正常。不过在不断的测试中，发现了一个严重的问题，如果图片过大，会撑破p溢出来。再由于页面是自适应页面，根据不同分辨率的显示器会做出相应的p宽度调整，所以图片即使不大，但是因分辨率不同也会出现溢出的情况。 这里探讨总结一下解决方法。 首先我们先来做个简单的css布局：<html> <head><meta charset="utf-8" /><title>div图片溢出的解决方案</title><style type="text/cs...
CSS Reset是什么？ 在HTML标签在浏览器里有默认的样式，例如 p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是...
部件库的方式 常用的方法就是采用网络上分享出来的部件库，比较全的就是小楼老师的部件库。 但是这种部件库的ICON一般都是图片，当颜色与当前原型色调不一样的时候，就不能用了。而且ICON常常表示状态，不同的状态需要不同的颜色，用图片做原型ICON就不合适了。 字体CION方式 后来发现了一个神器，字体icon，每个icon其实就是一个文字，文字更改颜色和大小非常方便。 字体名称：FontAwesome Fon...
出处：http://www.zhangxinxu.com/study/201603/icon-text-vertical-align.html css .icon { display: inline-block; width:20px; height:20px; background: url(delete.png) no-repeat center; white-space:nowrap; letter-spacing: -1em; text-indent: -99em; color: transparent; /* IE7 */ *text-indent: 0; *zoom: expression( this.runtimeStyle[zoom] = 1, this.inner...
跨站HTTP请求(Cross-site HTTP request)是指发起请求的资源所在域不同于请求指向的资源所在域的HTTP请求。 比如说，我在Web网站A(www.a.com)中通过标签引入了B站的资源(www.b.com/images/1.jpg)，那么A站会向B站发起一个跨站请求。 这种图片资源的跨站请求是被允许的，类似的跨站请求还有CSS文件，JavaScript文件等。 但是如果是在脚本中发起HTTP请求，出于安全考虑，会被浏览器限制。 比如，使用 XMLHttpRequest 对象发...
用jquery添加新元素很容易，面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢？on方法中要先找到原选择器（如例.info),再找到动态添加的选择器（如列.delete)。 具体不多说了，请看下面的代码吧。 测试
（http://fonts.googleapis.com/css?）打开很慢解决方案 http://blog.csdn.net/a6225301/article/details/41115323 最近，有网友反映称谷歌官网域名google.com、谷歌香港google.com.hk都打不开， ping了一下google.com和google.com.hk两个域名的服务器情况，最后ping出来的IP地址均显示为“ 美国 ”，也就是说谷歌香港(google.com.hk)的服务器，已由香港转移至美国，所以链接时间会很长，甚至断断续续出现请求超时的情况。 ...
CSS 代码是很难管理，尤其是在大型项目。 样式都写在一个全局作用域里，通过复杂的选择器来指向特定的页面元素。冗余、膨胀和维护可以成为前端开发人员的一场噩梦。幸运的是我们有一些 CSS 工具来帮助开发者克服这种情况。这里集合了15款用于管理 CSS 代码的优秀的 CSS 工具，分享给大家。 1. Ballon.css Balloon.css lets you create simple tooltips with pure CSS. It requires only a few lines of CSS to work, an...
先来个兼容性说明，洗洗脑： div{transform:rotate(7deg);-ms-transform:rotate(7deg); /* IE 9 */-moz-transform:rotate(7deg); /* Firefox */-webkit-transform:rotate(7deg); /* Safari 和 Chrome */-o-transform:rotate(7deg); /* Opera */} 1.来自【作者：梦幻神化】的blog： 使用CSS3 3D transforms，通过GPU来渲染，能有效的起到抗锯齿效果。我们只要简单的在CSS3 transform属性中加入translateZ(0)。例：-webkit-...
最近学习Symfony2，安装过程出现了一些问题，按照官网上的安装方法成功安装了2.6.5的版本，但访问首页面出现了样式混乱的问题，如下图 最终通过php app/console assets:install web这条命令引入了样式，完成了Symfony2.6.5版本的安装，页面正常显示了出来。
html { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter: progid: DXImageTransform.Microsoft.BasicImage(grayscale=1); filter: gray;} html, * { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100...
近日，由HTML5梦工场举办的“娜喊杯”2015年度HTML5行业评选盛典日在古北水镇正式召开。本次评选共设有19项大奖，奖项涵盖开发工具、游戏生态、创新技术、互动营销、产业服务、个人开发者、企业解决方案等诸多方面，几乎覆盖整个HTML5生态。在企业解决方案领域，云适配凭借着过去一年在HTML5企业级应用领域所取得的诸多成绩，最终脱颖而出，荣获了2015“年度最佳HTML5企业解决方案奖”。 云适配联合创始人兼COO高婧主持大会...
1. 问题由来 在移动互联网电商领域，运营每天需要搭建多个促销页面来吸引用户去点击去购买，一开始程序员临时写个新页面去实现，可这些页面可以用几次就不用了，每次创建新页面去实现费时费力，而且，电商的运营需求是快速迭代的，每次去页面代码里去改，然后上线也太不方便了。所以产品提出了Diy 页面----配置web组件去搭建页面，事先定好页面可能到用到哪些的组件，然后运营在后台选好页面由哪些组件组成，然后分别去配置对应...
之前在用 node 做爬虫时碰到的中文乱码问题一直没有解决，今天整理下备忘。（PS：网上一些解决方案都已经不行了） 中文乱码具体是指用 node 请求 gbk 编码的网页，无法正确获取网页中的中文（需要转码），"gbk" 和 "网页中的中文" 两个条件是缺一不可的。可以获取 utf-8 编码的网页中的中文，也可以获取 gbk 编码网页中的英文数字等。 举个简单的例子。获取 http://acm.hdu.edu.cn/statistic.php?pid=1000排名第一的答案的 u...
我们浏览页面上加载有大尺寸图片时，由于图片体积也比较大，我们会看到浏览器加载图片的时候会从上到下逐步显示图片，直到图片完整呈现在页面上，这样图片从空白区域到完全加载的过程显得比较突兀，用户体验比较差。 查看演示 下载源码 我们使用的解决办法是先加载一张很小的缩略图，它可能只有1K左右，并且按所需尺寸模糊显示，等到大尺寸图片下载好再完整显示大图。这样给用户的感觉是先加载模糊的图片，...