2015年12月_elsyy良师益友

原创 8点需要注意的Web编程小细节

长时间以来，我们创造了某些在构造和范围内用以提升网站易用性的约定和实践。然后在我们进行web编程的时候总有一些疏忽和纰漏。今天，E良师益友网在这里总结了一些web编程时容易出现的小错误，并给出了相应的补救方法，希望可以帮助提高网站的可用性。（你也可以去看看相关的免费WEB开发视频课程）只要避免下列这些错误，网站的用户体验度就会大大提升。错误一: 表单标签没有与相应字段相关联

2015-12-23 13:51:56 426

原创清除浮动的七种方式方法（实例代码讲解）

今天给大家分享的是清除浮动的具体代码实现，主要是帮助大家理解哪一种清除浮动比较好，辨析它们的优缺点而已。清除浮动有很多种，如何进行选择清除浮动呢？E良师益友网就拿下面的一个例子来讲解。实例代码（未清除浮动）：清除浮动方法大全.main div {float: left;width: 200px;height: 200px;margin-r

2015-12-22 15:42:42 695

原创定义了浮动元素后margin-bottom失效的解决办法

虽然IE6慢慢的退出市场了，但是还是有必要了解一些兼容问题，让自己的知识有一个更好的沉淀。margin-bottom的bug是容器div的 'zoom:1' 触发了 hasLayout，其内部浮动子元素也参与到了容器的高度计算之中。在 IE6 IE7 IE8(Q)中，容器div的 'zoom:1' 触发了 hasLayout，其内部浮动子元素也参与到了容器的高度计算之中。但是浮动子元素设置的

2015-12-21 13:56:31 3634

原创 DIV+CSS布局和TABLE布局的优缺点讲解

TABLE布局是WEB早期CSS不存在的时候兴起的，是对TABLE标签的不正规使用，Table标签就是表格，是用来显示数据的，而不是用来布局网页的，虽然它有时候布局网页很简单。现在绝大多数的网站都是用DIV+CSS布局。这两种布局各有各的优点。一、div+css布局的好处：1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。2.布局

2015-12-18 14:19:58 14776

原创 HTML5新元素section和article的区别详解

HTML5带出了一系列新元素，并且将在未来被广泛应用。然而，有一些元素在使用时易被混淆，包括以下两个新元素：和。在问答网站经常可以看到别人问：在什么情况下我们应该使用这些元素？我们应该如何正确的使用这些元素？和有什么区别？鉴于以上的这些问题，E良师益友网为大家讲解一下和的区别：一、Article元素从名字上，它已经很好的诠释了自己，但是我们仍要看看官方文档上是如何描述它的：

2015-12-17 13:36:38 1106

原创网站中被误解的用户体验设计

来看看你中了几枪，今天分享18个普遍被误解的用户体验理论，从网页设计到设计流程都有覆盖，能帮很多新手少犯错误不走弯路，小编表示已身中数枪，你呢？赶快来学习交流一下吧。1、用户在网页上会认真阅读内容不准确。用户在阅读网页内容时，快速浏览居多，只有在用户对内容非常感兴趣的时候，才会逐字阅读;好的网页设计是能帮助用户更方便快速浏览网页内容的。2、网站所有页面需要在3个点击

2015-12-16 13:52:29 299

原创 [心得]网页设计十个戒律

互联网一出现就体现了其强大的威力，它不仅改变了人们的工作方式，甚至改变了人们的约会方式。可以说，它让世界玩儿了一回过山车，把所有人都玩儿晕了。微软、网景以及其他公司开始了浏览器的竞争，网络标准的竞争也在展开。同时，随着Facebook、Flickr和YouTube的兴起，网络更注重集体智慧和社会化。从腾飞到萧条到再次腾飞，资金疯狂地流通着，互联网产业的发展似乎看不到尽头。网络同时也

2015-12-15 14:28:40 389

原创使用HTML5技术控制电脑或手机上的摄像头

移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API，但慢慢的，这些API会出现在桌面电脑上。其中一个应用接口技术就是getUserMedia API，它能让应用开发者访问用户的摄像头或内置相机。下面就让我展示一下如何通过浏览器来访问你的摄像头，并提取截屏图形。HTML代码下面的代码里我写了一部分注释，请阅读：理

2015-12-14 14:04:19 280

原创 PHP中的HTML5应用将Canvas图像保存到服务器

在几年前HTML5还没有流行的时候，我们的项目经理曾经向我提出这样一个需求：让项目评审专家们在评审结束时用笔在平板电脑上进行电子签名。这需要我们评审软件里提供这样一个功能：打开浏览器，登录，进入评审意见页，页面最下部有个方块区域，用户在这里用触摸笔进行签名，然后这个签名将会保持的服务器上。这样的一个需求在当时是让我大费周折，但如今想起来，如果用html5的canvas实现，

2015-12-12 14:36:49 496

原创用HTML5打造本地桌面应用

HTML5让Web开发人员用纯HTML技术开发富客户端互联网应用或者甚至本地桌面应用成为了可能。HTML5可以将任何普通网站转变成Web应用。HTML5 web 应用不仅具有在桌面浏览器应用中的优势，同时在智能手机和平板中也是开发利器。在手机端，有一个非常棒的工具叫做PhoneGap，使用这个快速开发平台，任何人都可以使用HTML5+CSS3+JavaScript开发出安卓，i

2015-12-11 16:06:58 9038

原创 html5 canvas绘制圆形进度实例

tml5 canvas绘制圆形进度实例 var canvas2d = document.getElementById("test").getContext("2d"); var deg = 0; var test = function(deg){ var r = deg*Math.PI/180; //ca

2015-12-10 16:02:10 571

原创 jQuery滑过头像图片展示个人信息效果

这是一款经典的jQuery图片插件，同时，也可以是一款jQuery提示框插件。这款jQuery插件的功能是当你把鼠标滑过头像图片缩略图时，即可弹出头像对应用户的详细个人信息，弹出的标签虽然不大，但是还是能容纳很多个人信息的。var Album = (function($){ function album(o){ this.int(o) }; albu

2015-12-08 15:21:25 841

原创 DIV CSS网站布局八个小技巧

本文向大家介绍一下DIV CSS网站布局的八个小技巧，比如当边界重合时利用padding或border来避免，或者尝试避免同时对元素指定padding/border以及高度或宽度，相信本文介绍一定会让你有所收获。DIV CSS网站布局的八个小技巧1.若有疑问立即检测在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS都有检测工具可用，请

2015-12-07 17:05:12 300

原创 canvas绘图工具加上JavaScript特效绘制出能动的太阳系

通过canvas绘图工具，绘制太阳系，用JavaScript函数让星球动起来，达到动画的效果首先创建html并写出样式： *{ padding:0px; margin:0px;} #canvas{ background:#000;} 第一步调用函数绘制出轨道：var cxt = document.getElementById("canvas")

2015-12-04 14:28:38 705

原创 jQuery可悬停控制图片轮播

图片轮播相信很多人你也见过，各大网站上基本上都有，那么究竟是怎么实现的呢？不废话，直接上代码：PreviousNext122首先咱得先把图片放进去，css样式我这里就不写了，主要说的js控制图片自动轮播，也可以通过左右两边的按钮实现图片的轮换不废话，上代码：$(function() {var banner

2015-12-03 15:37:27 1114

原创助你美化网站的实用css3技巧（3）

圆角丝带效果这段代码有点长，但是圆角丝带效果很奇特！HTML: NEWSCSS:.wrapper { margin: 50px auto; width: 280px; height: 370px; background: white; border-radius: 10px; -webkit-box-shadow:0px 0px

2015-12-03 15:30:09 282

原创助你美化网站的实用css3技巧（2）

CSS3 calc() 的使用calc() 用法类似于函数，能够给元素设置动态的值：.**Block { width: calc(100% - 100px);}.complexBlock { width: calc(100% - 50% / 3); padding: 5px calc(3% - 2px);

2015-12-02 14:31:44 286

原创助你美化网站的实用css3技巧（1）

CSS3 规范让前端开发人员能够创建出各种复杂的视觉效果，使网站更好看，更能够吸引用户访问。这篇文章中，我收集了一组实用的 CSS3 技巧，能够帮助你美化您的网站，并给它一个更专业的外观和感觉。黑白图像下面的 CSS 代码能够把彩色图像转变成黑白风格： img.desaturate { filter: grayscale(100%);

2015-12-01 15:18:05 327

elsyy良师益友的博客