HTML已经走过了近20的发展历程。从HTML4到XHTML，再到最近十分火热的HTML5，它几乎见证了整个互联网的发展。但是，即便到现在，有很多基础的概念和原则依然需要开发者高度注意。下面，向大家介绍这些应该遵循的开发原则。 1、善用DIV来布局 当开发一个Web页面时，要考虑第一件事就是区分页面重点。将这些内容用DIV标签包含起来，页面的代码会呈现出整洁、缩进良好的风格。 1 2 3 4 5 6 <div id="header"></div> <div id="body-container"> <div id="content"> <!-- Content — > </div> <div id="right-side-bar"> <!-- Right Side Bar Content Area — ></div> </div> <div id="footer"></div> 2、将HTML标签和CSS样式表分割开来 好的页面应该将HTML标签和CSS样式表分割开来。这是每一个Web开发者在首次接触Web开发时就应该知道的一条原则。然而，直到今天，仍然有很多开发者没有严格遵循这一原则。 不要在HTML标签里内嵌样式表代码。开发者应该养成习惯，单独建立文件，用以存放CSS样式表。而这也将方便其他开发者在修改你的代码时，能迅速完成工作。 1 2 <p style="color: #CCC; font-size:16px; font-family: arial"> An example to illustrate inline style in html</p> 3、优化CSS代码 现如今，为网站添加多个CSS文件的做法已经很普遍。但是，当网站包含的CSS文件过多时，会降低网站的响应速度。解决办法是：精简代码并对多个CSS文件进行优化，将其合并成一个文件。这个办法能显著提升网站的加载速度。此外，有很多工具可以用来优化CSS文件，例如CSS Optimizer、Clean CSS等。 4、优化Javascript文件，并将其放到页面底部 和CSS一样，为页面添加多个Javascript文件也是很普遍的做法。但这同样会降低网站的响应速度。为此，开发者应该精简、优化这些Javascript文件。 但有一点和CSS不同，浏览器通常不支持并行加载。这也就是说，当浏览器加载Javascript文件时，将不再同时加载其它内容。而这就导致了网页的加载速度好像变慢了。 一个好的解决办法是：将Javascript文件的加载顺序放在最后。为了实现这一目标，开发者可以把Javascript代码放在HTML文档的底部，而最好的位置是放在接近</body>标签的地方。 5、善用标题元素 <h1> 到 <h6>这些元素用来突出页面的重点内容。这有助于用户更加关注页面的重点部分。对于博客，我（指本文作者）推荐使用<h1>标签来突出博客标题。因为，博客标题几乎是页面中最重要的部分。 1 2 3 <h1>This is the topmost heading</h1> <h2>This is a sub-heading underneath the topmost heading.</h2> <h3>This is a sub-heading underneath the h2 heading.</h3> 6、在合适的地方使用合适的HTML标签 HTML标签是构造规范内容结构的关键。例如，<em>标签用来强调重点内容。<p>标签适用于突出文章段落。如果想要在段落间加空行，就不要使用<br />标签。 1 2 <em>emphasized […]
View Detailswindow.document.onkeydown = disableRefresh; function disableRefresh(evt){ evt = (evt) ? evt : window.event if (evt.keyCode) { if(evt.keyCode == 116){ //do something } } } keycode 8 = BackSpace BackSpace keycode 9 = Tab Tab keycode 12 = Clear keycode 13 = Enter keycode 16 = Shift_L keycode 17 = Control_L keycode 18 = Alt_L keycode 19 = Pause keycode 20 = Caps_Lock keycode 27 = Escape Escape keycode 32 = space space keycode 33 = Prior keycode 34 = Next keycode 35 = End keycode […]
View Details<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>检测大写锁定键</title> <style type="text/css"> <!-- *{margin:0;padding:0;} body{padding:2em;background:#242424;color:#ccc;} h1{text-align:center;line-height:200%;} h3{text-indent:1em;line-height:160%;color:#666;font-weight:normal;font-size:1em;} h3 a{color:#bbb; text-decoration:none;margin:0 0.5em;} h3 a:hover{color:#fff;} p{margin:5em;} span{margin:0 0.5em;font-size:85.7%;} --> </style> </head> <body> <h1>检测大写锁定键 </h1> <form action="#" method="post"> <p><label for="password">密码：</label><input type="password" id="password" name="password" /><span style="display:none;">大写锁定键被按下，请注意大小写</span></p> </form> <script type="text/javascript"> //<![CDATA[ function detectCapsLock(event){ var e = event||window.event; var o = e.target||e.srcElement; var oTip = o.nextSibling; var keyCode = e.keyCode||e.which; // 按键的keyCode var isShift = e.shiftKey ||(keyCode == 16 ) || false ; // shift键是否按住 if ( ((keyCode >= 65 && keyCode <= 90 ) && !isShift) // Caps Lock 打开，且没有按住shift键 || ((keyCode >= 97 && keyCode <= 122 ) && isShift)// Caps Lock 打开，且按住shift键 ){oTip.style.display = ";} else{oTip.style.display = 'none';} } document.getElementById('password').onkeypress = detectCapsLock; //]]> </script> </body> </html> from:http://www.cnblogs.com/xiaoao808/archive/2008/07/31/1257624.html
View Details目前这种视差滚动效果被越来越多的国内外网站所应用，成为网页设计的热点趋势。 通过一个很长的网页页面，其中利用一些令人惊叹的插图和图形，并使用视差滚动（Parallax Scrolling）效果，让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。完美的展示了一个复杂的过程，让你犹如置身其中。厌倦了千篇一律，呆板网页设计的你不放一试。 视差滚动效果与少即是多的理念相互交融，能带来清新炫目的感受，例如这组网站。 你也可以试试： 网页特效：滚动视差设计指南 利用ADOBE神器十分钟零代码实现HTML5视差滚动特效 Broken Twill theQ camera Srgint Sojourn Network Fall in Tennessee Made by Block Kill your Darlings WAAAC Spotify Serve Seattle Codetex 原文地址：webdesignledger 转摘请注明优设网译文出处，谢谢各位小编。 from:http://www.uisdc.com/inspiring-examples-of-parallax-scrolling-sites
View Details动画在每一年都是最具影响力和占据主导地位的。Web开发者通过不同的实验来实现动画，从最简单的基础效果到富有开创性的展示结果。毫无疑问，这种雪崩式的动画效果已经被认为是web技术史上最先进的技术。已经被永不满足现状的Web开发者们发展到了一个全新的水平。这些动画缓慢却很清晰，让网页设计师在页面上把交互和视觉都展现结合的淋漓尽致。 如果你想学今天的这些案例，推荐回顾《让网页舞动起来！25个免费的视差滚动插件》和《网页特效：滚动视差设计指南》这两篇文章：） 小伙伴们！最新的最火爆的最给力的网页设计趋势来了！快来看看这个神奇的视差滚动设计趋势！ 小提醒：有些网站效果不能再赞，谷歌、火狐才能打开唷。 新鲜的网站趋势类型好文： 《网页设计新招式：火力全开！引爆网页中的视频应用》 《2014网页菜单新趋势！21例时尚创新的侧边栏菜单网页设计》 Kaipoche 该网站致力于今年的风筝节。通过一个简单的滚动激活动画技术，它有一个真正充满活力和引人瞩目的设计。 Bizbrain 是一个先进的长页面网站。它通过精彩的彩色图熟练地演示了各种数据。各个版块都有各自相应的信息。 Drugs and Alcohol on Campus 这也是一个交互式图表，能够在不知不觉中给你最紧迫的问题提供答案。所有画面都是通过鼠标来激活动画的，使这些问题看起来不那么“干巴巴”的。 Bright Media 该团队利用视觉引导串起所有元素，使用正确的顺序引导用户，每个部分都有装饰的动画元素，你的任务就是顺着线条走就OK了。 Adobe Muse CC 这是一个创新的、干净而复杂的网站，利用艺术方法引导用户来关注自身新产品。主要包括简洁的白色页面、纸张变形模式和滚动动画来实现效果。 Fluger 网站的开发人员在页面上放置了一架小飞机，用户通过滚动鼠标滚轮可以看到小飞机在页面上飞行，实现浏览整个网站的目的。网站是用图片和手绘稿糅合起来的，加上飞机的引导，看起来酷毙了！不过加载时需要等一定的时间。 Fillet 这是一个流行的平面风格网站，拥有很棒的字体。当你向下滚动鼠标时，每个色块都会顺利转化为一串漂亮的字符。整个过程显得很愉快。 NGUMA 这是一个富有魅力的互动机构网站。该网站允许你直接参与它的互动。也是基于滚动动画的设计趋势。 Happy New Year 2014 滚动激活动画模式非常适合于庆祝节日的网站设计。特别是圣诞节。这个网站里面通过一个完整的动画建立起一个温馨的节日气氛，真是让人感到很别致。 Merry Christmallax 和上面的例子一样，这个创意网站的目的就是给用户们一个温暖而衷心的节日祝福。故事开始于一张干净的纸张，最后演变成一个充满活力的插图场景，整个故事就是动过滚动激活动画技术实现的。 Pixelgyar 这是另一个奇妙的和迷人的圣诞故事。圣诞老人的旅程完全取决于你的行动,所以旋转鼠标滚轮,让圣诞老人到达他的目的地吧！ Make Your Money Matters 这是一个宣传网站,生动地展示了加入信用联盟的好处。在整个动画过程中你将成为一个积极参与者。这项技术允许我们持有一个既定主题来实现网站设计，做到和用户之间的良好互动。 The Future of Mobile Phones 正如网站标题所言，该网站就是预测未来的手机的。网站的交互式信息里面充满了各种动画图形，都是定期统计的数据展示。 Camplight 这是一个整洁、干净而时尚的在线展示网站。提供了一个较为新颖的展示方式让用户来熟悉公司。 1McHappy Day 这个网站通过橡皮泥一样的图形设计带给用户返老还童式的体验，心灵上很容易就欢快起来。（我觉得要是来点卡哇伊的背景音乐一定会更给力的！） CEZ 提供了另一个惊人的互动之旅，该技术功不可没啊。 What’s behind the number 网站目的是广泛宣传关于防晒霜的防晒指数及其优势。当你向下滚动时,你会享受到一个整体活泼的故事，试图告诉你使用该产品后，在阳光下你的皮肤依然很安全。 InfoGuest Infographic 如其名字一样，它有大量的信息填充内容，通过图表和动画的有效结合展示出来。 Bolia 和上面的例子稍有不同，该创意团队应用基于照片的滚动激活动画来展示椅子的所有面。 Bam 该公司试图利用长页面布局和各种图纸来实现信息填充。为了避免各部分信息过于统一单调，研究小组决定采用滚动激活动画给网站带来生气。 Areal Plankstadt 这是一个宁静的网站，拥有美丽的氛围。为什么？——蓝白两色，青春一生……通过滚动激活动画技术实现页面之间的切换，非常平静安宁。 结语 这里所列出的这些在线信息展示网站、视觉故事网站、创意机构网站以及投资组合网站都实实在在地利用了滚动激活动画这一崭新的设计技法，构造了一个特定的用户体验模式，希望小伙伴们能够有动力去学习这一项新技术。 我最喜欢Adobe Muse CC和Fluger了，看起来真的是十分赞的！ 原文地址：designmodo 优设网翻译：@sheisjane 本文由优设网uisdc.com原创翻译，转摘请注明优设网译文出处，谢谢各位小编。
View Details最近大家伙越来越关注视差滚动的网页了，很多同学都在四处寻找相关的案例来赏析学习。此前我们也分享过相关的制作教程及文章。 那么今天我们继续推荐20个创意十足的视差滚动酷站，希望能为你的案例带来灵感：）强烈推荐收藏。 好文推荐： 《无法抗拒的诱惑，美女封面网站设计欣赏》 《敢于尝试！23个有着非同寻常配色的网页设计》 《极好的交互设计：19个创意网页欣赏》 Beatbox Academy Discover Shadow This is Now Sam Markiewicz Erős Balázs Le Tour de France Pi’s Epic Journey Scroll For Your Health TCM Summer Under the Stars TEDxGUC aBenção – Malhas e Tricots Criativos WAAAC De Might of Mister Miller Negative Space Anthelios SPF Sunscreen InfoQuest Infographic Reunite the River Fillet Eone 原文地址：speckyboy.com from:http://www.uisdc.com/20-webpage-parallax-scrolling-design
View Details在网页设计中，视差滚动（Parallax Scrolling）是当下流行的网页设计技术，通过让多层背景以不同的速度或者不同的方向移动来形成非常有趣的 3D 运动效果。下面是一些运用视差滚动效果的优秀网页案例： 视差（Parallax）是指从不同的点看一个物体时形成的视觉差异，这个名词是源自希腊文的παράλλαξις (parallaxis)，意思是"改变"。在网页设计中，视差滚动（Parallax Scrolling）是当下流行的网页设计技术，通过让多层背景以不同的速度或者不同的方向移动来形成非常有趣的 3D 运动效果。下面是一些运用视差滚动效果的优秀网页案例： 相信你非常想知道上面这些网页的精美视差滚动效果是如何实现的，今天这篇文章就和大家分享六款精心挑选的 jQuery 视差滚动效果插件，它们能够帮助你制作出精美的视差滚动效果。 Sequence.js Sequence 是一款非常优秀的 jQuery 滑动插件，能实现多种精美的滑动效果，其中之一就是水平方向的视差滚动。 在线演示 下载源码 jQuery Scroll Path 这款插件用于实现自定义路径的滚动效果。可以显示使用 Canvas 绘制路径线条和弧形，看到非常形象的运动效果。 在线演示 下载源码 Parallax Slider with jQuery 这个视差滚动滑动效果多次在我的博文中出现过，相信关注我博客的朋友一定不会陌生，有非常详细的制作教程。 在线演示 下载源码 jQuery Parallax 这款 jQuery 插件实现了类似 Nikebetterworld.com 产品展示页面的视差滚动效果，代码托管在 Github 上面。 在线演示 下载源码 Scrollorama 这款 jQuery 插件能够帮助你实现非常酷的滚动效果，可以应用飞入、缩放、淡入淡出等多种过渡效果。 在线演示 下载源码 Stellar.js 正如它的口号所说：实现视差滚动效果从未如此容易，的确，它能帮助轻松的实现网页视差滚动效果。 在线演示 下载源码 jParallax 这款基于 jQuery 的视差滚动插件使用简单，官方提供了五种不同的效果演示。 在线演示 下载源码FROM:http://www.jb51.net/article/31259.htm
View Details随着 Web 开发者和设计者收藏 JavaScript 库的数量越来越多，JavaScript 也有大量流行的库：jQuery，MooTools 等等，很多时候大家都会使用 JavaScript 模板引擎来开发 JavaScript 应用。以下列表介绍的就是 JavaScript 模板引擎。 这里我们收集了一些非常有用的 JavaScript 模板引擎，希望能给 Web 开发者和设计者提供一定的帮助，在评论与大家交流一下 JavaScript 模板引擎的相关心得吧：） 1) Jade jade 是超高性能的 node JavaScript 模板引擎，有着非常强大的 API 和大量杰出的特性。它主要针对 node 的服务端。 2) Mustache Mustache 是 logic-less 模板语法，可以使用在 HTML，配置文件，源代码等等地方。它是使用哈希表或者对象提供的值来扩展模板标签。 3) Transparency Transparency 是一个强大的客户端网站模板引擎，可直接绑定数据到 DOM，包括一些很棒的特性如 HTML 模板、JS 视图逻辑。支持 IE9+, Chrome, Firefox, iOS, Android, Etc. 4) Underscorejs Underscore 是 JavaScript 库，提供大量有用的函数式程序设计助手，不需要扩展任意的内置对象。 5) Embeddedjs EJS 会使用客户端模板从 JavaScript 中清理 HTML 代码，整理好这些代码之后，JavaScript 代码就会变得更加整洁和有条理。 6) DoTjs doT.js 是最快和简洁的 JavaScript 模板函数搜索，这些函数致力于 V8 和 Node.js 下高性能的表现。doT.js 在浏览器和 Node.js 下都表现出超高的性能。 7) Handlebarsjs Handlebars 给构建语义模板提供强大的基础支持。 8) T.js T.js 是使用简单 JavaScript 数据结构来展示 html/xml 数据的模板引擎。 9) Dustjs Dust 是浏览器和 Node.js […]
View DetailsAnimated Responsive Menu Pure CSS Navigation Long Dropdown Menu Flexbox Dropdown CSS-Only Menu Simple CSS Menu Bootstrap Mega Menu Drop Down Menu Clean Grey Nav Simple Toggle Menu Bubble Dropdown Pure CSS Menu Animated Dropdown Lava Lamp Navigation Multi-Level Nav Clean Simple Navbar Horizontal Navbar Multi-Toggle Nav Infinite Multi-Level Gradient Navbar Nested Dropdown Pure CSS Hover CSS3 Multi-Level Dropdown CSS Only Menu Pure CSS Menu Simple CSS3 Menu Facebook-Style Menu Smooth Dropdown Unfolding Dropdown Speech Bubble Menu Bold and Beautiful Dropdown Skyrim-Inspired Menu Pure CSS Dropdown Grey CSS […]
View Details最后更新对应的版本：1.2.5.1 教程描述： 富文本编辑器的使用开发中，表单提交有多种场景，编辑器初始化有新增文章和编辑就文章两种场景，提交表单有普通提交也有ajax提交表单两种情景，此教程详细讲解这几种场景下如何保证后台正确拿到数据。 一、编辑器内容初始化（即往编辑器中设置富文本） 场景一：写新文章，编辑器中预置提示、问候等内容。 在editor_config.js文件中找到initialContent参数，设置其值为需要的提示或者问候语即可，如initialContent:’欢迎使用UEditor!’。 场景二：编辑旧文章，从数据库中取出富文本放置到编辑器中。 显然，编辑文章时需要从后台数据库中取出大段富文本，如果仍然采用场景一中的方式去设置初始值的话，必然会带来诸如引号匹配被截断等问题，因此需要采用另外一种方式去设置，如下代码所示： <script type="text/plain" id="editor"> //从数据库中取出文章内容打印到此处 </script> 复制代码 此处采用了script标签作为编辑器容器对象，并设置了其类型是纯文本，从而在避免了标签内部JS代码执行的同时解决了部分同学在使用传统的textarea标签作为容器所带来的一次额外转码问题，只要此处设置的内容不为空字符串，内容会覆盖配置文件的initialContent参数的值。 二、提交编辑器内容至后端 场景一：在编辑器所在的Form中存在提交按钮，提交动作由点击此按钮完成。 该场景适用于最普通的场合，没有太大问题需要注意，仅三点说明： 1) 默认情况下提交到后台的表单名称是 "editorValue"，在editor_config.js中可以配置，参数名为textarea。 2) 可以在容器标签（即script标签）上设置name属性，以覆盖editor_config.js中的默认配置。实例代码如下，此处的 myContent将成为新的提交表单名称： <form action="" method="post"> <script type="text/plain" id="editor" name="myContent"></script> <input type="submit" name="submit" value="提交"> </form> 复制代码 3）后端接收程序可以通过如下几种方式来获取编辑器中的富文本内容。 //PHP获取： $_POST["myContent"] //JSP获取： request.getParameter("myContent"); //ASP获取： request("myContent"); //NET获取: context.Request.Form["myContent"]; 复制代码 场景二：编辑器所在的Form中不存在提交按钮，提交动作由外部事件触发。 该场景适用于站点前端交互较多的场合，需要注意的事项主要是在触发form提交动作之前执行编辑器内容同步操作。一般的代码模式如下所示： //满足提交条件时同步内容并提交，此处editor为编辑器实例 if(editor.hasContents()){ //此处以非空为例 editor.sync(); //同步内容 someForm.submit(); //提交Form } 复制代码 另外，如果是js代码动态去获取表单内容，可以直接调用editor.getContent()方法。 场景三：编辑器不在任何Form中，提交动作由外部事件触发。 该场景使用不多，但特殊时候可能需要。UEditor也提供了对应的处理方案，基本逻辑跟场景二一样，只是在执行同步操作的时候需要传入提交form的id，如editor.sync(myFormID)即可，其他同场景二。还可以使用editor.getContent()方法手动设置。 from:http://www.ueditorbbs.com/forum.php?mod=viewthread&tid=17618&extra=&ordertype=2
View Details