- 博客(40)
- 收藏
- 关注
RSS订阅原创 8点需要注意的Web编程小细节
长时间以来，我们创造了某些在构造和范围内用以提升网站易用性的约定和实践。然后在我们进行web编程的时候总有一些疏忽和纰漏。今天，E良师益友网在这里总结了一些web编程时容易出现的小错误，并给出了相应的补救方法，希望可以帮助提高网站的可用性。（你也可以去看看相关的免费WEB开发视频课程）只要避免下列这些错误，网站的用户体验度就会大大提升。错误一: 表单标签没有与相应字段相关联
2015-12-23 13:51:56
397
原创 清除浮动的七种方式方法（实例代码讲解）
今天给大家分享的是清除浮动的具体代码实现，主要是帮助大家理解哪一种清除浮动比较好，辨析它们的优缺点而已。清除浮动有很多种，如何进行选择清除浮动呢？E良师益友网就拿下面的一个例子来讲解。实例代码（未清除浮动）：清除浮动方法大全.main div {float: left;width: 200px;height: 200px;margin-r
2015-12-22 15:42:42
675
原创 定义了浮动元素后margin-bottom失效的解决办法
虽然IE6慢慢的退出市场了，但是还是有必要了解一些兼容问题，让自己的知识有一个更好的沉淀。margin-bottom的bug是容器div的 'zoom:1' 触发了 hasLayout，其内部浮动子元素也参与到了容器的高度计算之中。在 IE6 IE7 IE8(Q)中，容器div的 'zoom:1' 触发了 hasLayout，其内部浮动子元素也参与到了容器的高度计算之中。但是浮动子元素设置的
2015-12-21 13:56:31
3590
原创 DIV+CSS布局和TABLE布局的优缺点讲解
TABLE布局是WEB早期CSS不存在的时候兴起的，是对TABLE标签的不正规使用，Table标签就是表格，是用来显示数据的，而不是用来布局网页的，虽然它有时候布局网页很简单。现在绝大多数的网站都是用DIV+CSS布局。这两种布局各有各的优点。一、div+css布局的好处：1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。2.布局
2015-12-18 14:19:58
14717
原创 HTML5新元素section和article的区别详解
HTML5带出了一系列新元素，并且将在未来被广泛应用。然而，有一些元素在使用时易被混淆，包括以下两个新元素：和。在问答网站经常可以看到别人问：在什么情况下我们应该使用这些元素？我们应该如何正确的使用这些元素？和有什么区别？鉴于以上的这些问题，E良师益友网为大家讲解一下和的区别：一、Article元素从名字上，它已经很好的诠释了自己，但是我们仍要看看官方文档上是如何描述它的：
2015-12-17 13:36:38
1070
原创 网站中被误解的用户体验设计
来看看你中了几枪，今天分享18个普遍被误解的用户体验理论，从网页设计到设计流程都有覆盖，能帮很多新手少犯错误不走弯路，小编表示已身中数枪，你呢？赶快来学习交流一下吧。1、用户在网页上会认真阅读内容不准确。用户在阅读网页内容时，快速浏览居多，只有在用户对内容非常感兴趣的时候，才会逐字阅读;好的网页设计是能帮助用户更方便快速浏览网页内容的。2、网站所有页面需要在3个点击
2015-12-16 13:52:29
290
原创 [心得]网页设计十个戒律
互联网一出现就体现了其强大的威力，它不仅改变了人们的工作方式，甚至改变了人们的约会方式。可以说，它让世界玩儿了一回过山车，把所有人都玩儿晕了。微软、网景以及其他公司开始了浏览器的竞争，网络标准的竞争也在展开。同时，随着Facebook、Flickr和YouTube的兴起，网络更注重集体智慧和社会化。从腾飞到萧条到再次腾飞，资金疯狂地流通着，互联网产业的发展似乎看不到尽头。 网络同时也
2015-12-15 14:28:40
377
原创 使用HTML5技术控制电脑或手机上的摄像头
移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API，但慢慢的，这些API会出现在桌面电脑上。其中一个应用接口技术就是getUserMedia API，它能让应用开发者访问用户的摄像头或内置相机。下面就让我展示一下如何通过浏览器来访问你的摄像头，并提取截屏图形。HTML代码下面的代码里我写了一部分注释，请阅读： 理
2015-12-14 14:04:19
270
原创 PHP中的HTML5应用 将Canvas图像保存到服务器
在几年前HTML5还没有流行的时候，我们的项目经理曾经向我提出这样一个需求：让项目评审专家们在评审结束时用笔在平板电脑上进行电子签名。这需要我们评审软件里提供这样一个功能：打开浏览器，登录，进入评审意见页，页面最下部有个方块区域，用户在这里用触摸笔进行签名，然后这个签名将会保持的服务器上。 这样的一个需求在当时是让我大费周折，但如今想起来，如果用html5的canvas实现，
2015-12-12 14:36:49
478
原创 用HTML5打造本地桌面应用
HTML5让Web开发人员用纯HTML技术开发富客户端互联网应用或者甚至本地桌面应用成为了可能。HTML5可以将任何普通网站转变成Web应用。HTML5 web 应用不仅具有在桌面浏览器应用中的优势，同时在智能手机和平板中也是开发利器。 在手机端，有一个非常棒的工具叫做PhoneGap，使用这个快速开发平台，任何人都可以使用HTML5+CSS3+JavaScript开发出安卓，i
2015-12-11 16:06:58
8983
原创 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
563
原创 jQuery滑过头像图片展示个人信息效果
这是一款经典的jQuery图片插件，同时，也可以是一款jQuery提示框插件。这款jQuery插件的功能是当你把鼠标滑过头像图片缩略图时，即可弹出头像对应用户的详细个人信息，弹出的标签虽然不大，但是还是能容纳很多个人信息的。var Album = (function($){ function album(o){ this.int(o) }; albu
2015-12-08 15:21:25
831
原创 DIV CSS网站布局八个小技巧
本文向大家介绍一下DIV CSS网站布局的八个小技巧，比如当边界重合时利用padding或border来避免，或者尝试避免同时对元素指定padding/border以及高度或宽度，相信本文介绍一定会让你有所收获。DIV CSS网站布局的八个小技巧1.若有疑问立即检测在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS都有检测工具可用，请
2015-12-07 17:05:12
293
原创 canvas绘图工具加上JavaScript特效绘制出能动的太阳系
通过canvas绘图工具，绘制太阳系，用JavaScript函数让星球动起来，达到动画的效果首先创建html并写出样式： *{ padding:0px; margin:0px;} #canvas{ background:#000;} 第一步调用函数绘制出轨道：var cxt = document.getElementById("canvas")
2015-12-04 14:28:38
668
原创 jQuery可悬停控制图片轮播
图片轮播相信很多人你也见过，各大网站上基本上都有，那么究竟是怎么实现的呢？不废话，直接上代码：PreviousNext122首先咱得先把图片放进去，css样式我这里就不写了，主要说的js控制图片自动轮播，也可以通过左右两边的按钮实现图片的轮换不废话，上代码：$(function() {var banner
2015-12-03 15:37:27
1100
原创 助你美化网站的实用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
274
原创 助你美化网站的实用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
277
原创 助你美化网站的实用css3技巧（1）
CSS3 规范让前端开发人员能够创建出各种复杂的视觉效果，使网站更好看，更能够吸引用户访问。这篇文章中，我收集了一组实用的 CSS3 技巧，能够帮助你美化您的网站，并给它一个更专业的外观和感觉。黑白图像下面的 CSS 代码能够把彩色图像转变成黑白风格： img.desaturate { filter: grayscale(100%);
2015-12-01 15:18:05
315
原创 导航栏二级下拉菜单的js特效
很多大型的网站的导航菜单栏会有二级菜单，那么刚开始的时候这些二级菜单是隐藏的，我们通过鼠标点击或者把鼠标放在上面就会让二级菜单显示，有些二级菜单会有一些动画效果，我们今天讲的是二级菜单从上面慢慢下滑并出来，以一个很平滑的方式出场，相比传统的直接出现更有交互性。今天这里我主要说的是一个js特效，通过鼠标放在上面，让导航栏改变颜色，并且让二级菜单从上面缓慢平滑的出现，有一个效果，这个效果的
2015-11-30 15:20:05
3321
原创 案例：弹幕表白技术
今天分享一个很炫酷的弹幕表白技术案例，主要功能是通过点击上方要白的弹幕表白图像，下面的输入框出现，并有音乐播放，我们通过在输入框里面输入内容能够在公屏上显示出来，下面我们一步一步来实现这个看似神秘的技术。实现让弹幕表白图片出现 通过img标签并对它设计样式，动画处理，让图片动起来 样式：img.gb{ position:f
2015-11-28 16:44:20
1434
2
原创 HTML5实战应用：如何让表单验证更友好
HTML5表单验证给前端人员带来了便利，但是在用户体验上存在一些缺陷，默认的提示对用户很不友好，无法准确的获取想要的信息。好在在接口设计的时候提供了setCustomValidilty方法可以自定义提示信息。这是一个好消息，但也存在一些弊端，需要让开人员做额外的一些处理才达到真正想要的目的。接下来通过以下示例来阐述方法的应用。未调用setCustomValidity()方法
2015-11-27 15:29:46
354
原创 调皮的JavaScript
JavaScript是一门有趣的语言，不仅有趣而且调皮，不同的内核的浏览器在解析的时候表现会有些差异，今天主要是抛砖引玉，和大家一起讨论一些在实际开发中比较常见但同时可能并没有过于在意的JavaScript表现。这里先做几个约定：由于JavaScript是一门解释性语言，自然没有编译过程，但在脚本执行之前会有语法检查和执行环境的构建，我们把这一过程姑且称为预处理吧。当使用var
2015-11-26 14:37:30
276
原创 DIV CSS网站布局八个小技巧
本文向大家介绍一下DIV CSS网站布局的八个小技巧，比如当边界重合时利用padding或border来避免，或者尝试避免同时对元素指定padding/border以及高度或宽度，相信本文介绍一定会让你有所收获。DIV CSS网站布局的八个小技巧1.若有疑问立即检测在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS都有检测工具可用，请见htt
2015-11-26 14:36:16
290
原创 html5+css3实现抽奖活动的效果
看过我博客的知道，前几天我发过一个通过form表单来实现和用户交互效果，上次是通关过table实现用户注册页面，那么今天我们也是通过table的表单效果来画出抽奖的页面，通过css3和javascript的动画效果来实现抽奖的一系列动作。 通过css3+html5把抽奖的页面画出来，再通过javascript函数让它动起来。具体代码奉上：
2015-11-24 14:10:31
1018
原创 响应式网站案例及源码
响应式网站： 响应式Web设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能
2015-11-23 15:18:03
1726
原创 WEB前端开发人员须知的常见浏览器兼容问题及解决技巧
所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。在学习浏览器兼容性之前，我想把前端开发人员划分为两类：第一类是精确按照设计图开发的前端开发人员，可以说是精确到1px
2015-11-23 15:17:24
444
原创 form表单实现用户注册界面
button: 普通按钮 value=“按钮的文字” js/jquery代码 checkbox 复选框 checked=“checked”默认选中 file 上传控件 hidden 隐藏域 value=“值” 和php脚本程序交互 image 图片提交按钮 src=“图片路径”图片形态
2015-11-19 14:25:58
8337
原创 HTML5 开发者需要了解的技巧和工具汇总
HTML5现在已经成为了Web开发中的热门话题，大多数现代浏览器（Safari、Chrome，Firefox，IE10和移动设备）都支持HTML5。即使HTML5的规范还没有制定完成，但许多开发者已经将其作为Web开发项目中的主要技术。一些网站巨头，如Google、Facebook、Twitter和YouTube等，都建立在HTML5基础上。 HTML5中最令人兴奋的功能莫过于画布（can
2015-11-18 14:40:03
285
原创 css3更易操作的网页细节-box-shadow阴影
box-shadow的参数有六个：X轴偏移、Y轴偏移、阴影模糊半径、阴影扩展半径、阴影颜色、阴影类型。x-offset：X轴偏移阴影水平偏移量，其值可以是正负值，如果是正值则阴影在对象的右边，为负值则在左边。y-offset：Y轴偏移阴影上下偏移量，其值也可以为正负值，如果是正值，则阴影在对象的底部，为负值则在顶部。无标题
2015-11-18 14:39:18
313
原创 文本和字体：文本修饰
text-overfiow 规定当文本溢出包含元素时发生的事情，如果想让某个容器（div或者li......块级元素）显示一行文字，当文字内容过多时，不换行而是出现的，就可以使用该属性，想要实现这样的效果需要满足三个条件：设置容器宽度并添加overfiow属性将文字设置为不换行，white-space：nowrap设置text-overflow：elli
2015-11-17 15:14:17
319
原创 你必须知道的10个提高Canvas性能技巧
你还在抱怨自己写的canvas demo徘徊在10帧以下吗？你还在烦恼打开自己写的应用就听见CUP风扇转吗？你正在写一个javascript Canvas库吗？那么下面九点就是你必须知道的！一.预渲染错误代码：?123456789 var canvas
2015-11-17 09:43:45
602
原创 更易操作的网页细节—background背景
多背景图片，你可以在一个标签元素里应用多个背景图片，代码类似于css2.0版本写法，但饮引用图片之间需用“，”逗号隔开。第一个图片是定位元素最上面的背景，后面的背景依次放在它下面显示，如下：?1234567891011121314151
2015-11-14 14:45:04
620
原创 【小窍门】浏览器兼容圆角Border-radius的问题
圆角css代码：border-radius只有在以下版本的浏览器：Firefox4.0+、Google Chrome 10.0+、Opera 10.5+、IE9+支持border-radius标准语法格式，对于老版的浏览器，border-radius需要根据不同的浏览器内核添加不同的前缀，比说Mozilla内核需要加上“-moz”，而Webkit内核需要加上“-webkit”等，那么为了能兼容各大
2015-11-13 14:30:46
996
原创 认识CSS3—更容易的网页细节border-radius属性
border-radius属性这个属性在CSS3里用来创建圆角，它的值类似于padding和margin的写法boder-radius：一个值表示四个角?1234567style>.box{ width:300px; height:100px;
2015-11-13 14:29:49
395
原创 其他类型的标签
1.figure和figcaption标签figure标签规定独立的流内容（图像、图表、照片、代码等等）figure元素的内容应该与主内容相关，但如果被删除，则不应对文档产生影响。figcaption定义figure元素的标题（caption）“figcaption”元素应该被置于“figure”元素的第一个或者最后一个元素的位置。?1
2015-11-12 14:58:55
398
原创 音频与视频标签—audio和video
controls属性唯一可选值为controls，出现controls属性并准确赋值时，音频和视频的的播放控件将会显示，控件包括：播放、暂停、定位、音量、全屏切换、字幕（如果可用）、音轨（如果可用）音频：您的浏览器不支持 视频： autoplay属性自动播放功能，出现autoplay属性时音频或视频文件就会自动播放音频：
2015-11-11 14:15:33
487
原创 HTML5之表单新功能 2.新的表单属性
placeholder属性这是一个很实用的属性，免去了JS去实现点击清除表单初始值，浏览器支持也不错，标准浏览器都能很好的支持。required/paaten属性表单验证属性，required类型时，若输入值为空，则拒绝提交，并会有一个提示，这个很有用，并且可以用于textara以及hidden/image/submit类型，pa
2015-11-10 11:51:55
386
原创 HTML5-表单新功能 1.新增控件类型
email输入类型 此类型要求输入格式正确的Email地址，否则浏览器是不允许提交的，并会有一个错误信息提示，此类型在opea中必须指定name值，否则无效。URL输入类型 上面代码展示的文本域要求输入格式正确的URL地址，开始处添加http：//日期时间相关输入类型 number输
2015-11-10 09:53:10
1820
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人