资讯频道 → Web前端
阅读更多

9顶
0踩

Web前端

转载新闻 Web开发中最致命的8个小错误

2015-02-15 16:07 by 副主编 mengyidan1988 评论(4) 有6198人浏览
前端开发 经验分享
现在，有越来越多所谓的“教程”来帮助我们提高网站的易用性。本文收集了一些在Web开发中容易出错和被忽略的小问题，并且提供了参考的解决方案，以便于帮助Web开发者更好的完善网站。

通过避免下面这些小错误，可以使得我们的网站变得更为友好。

错误1：表单的label标签跟表单字段没有关联



利用“for”属性允许用户单击label也可以选中表单中的内容。这可以扩大复选框和单选框的点击区域，非常实用。

错误2：logo图片没有链接到主页



点击网站logo就能转到主页已经成为了网民的条件反射。此外，值得一提的是，logo是指定放于左上角的。

错误3：不能区分是否已经访问过该链接



访问过的连接状态应该与没有访问过的有所区别，以便于让用户直观地明白哪个链接已经点击过了。

错误4：没有突出当前选中激活的表单项



可以使用“focus”展现选中的文本区域处于动态中。也可以使用CSS样式，例如，突出的边框或者略有变化的背景色。

错误5：图片中没有alt图片描述信息



你可能会觉得无关紧要，但是这是必要的！请记住添加一个说明性的alt属性到你的图片上，除非这张图片很明显是用作装饰的，那么这个alt属性才可以为空（但仍然存在！）。如果是使用图片作为链接点，那么可以输入链接地址。

错误6：背景图片后面没有设置背景色



在内容文字后面使用背景图片是很普遍的，但是我们同时要考虑到如果背景图片被客户端所禁用的情况，所以最好背景图后面再设置一个相似色调的背景颜色，以免文本变得不可阅读。

错误7：不一致的界面设计

矫枉过正大概就是这个意思了。有些设计师为了提高网页水平，故而为网站中的每个网页都创建了不同的设计。但是这只会混淆用户，使他们不知所措。记住，无论一个网站有多么的优秀和有吸引力，如果它的整体外观和感觉并不一致，那么用户就很难记住它。建议如下：

1.每个页面使用标准一致的模板链接到网站的主要部分。
2.关键字要简单。设计应该美观简洁，这样用户在使用时才不会困惑。

错误8：下划线的内容并不是链接



众所周知，带有下划线的内容很容易被当成链接。不要随随便便地在文字中来一个下划线，这样会让人困惑。如果真的想强调某个单词，不妨试试加粗或者加大字体。
  • 大小: 14.6 KB
  • 大小: 24.9 KB
  • 大小: 23.6 KB
  • 大小: 15.9 KB
  • 大小: 33.6 KB
  • 大小: 19.3 KB
  • 大小: 19.5 KB
来自: 码农网
9
顶
0
踩
评论 共 4 条 请登录后发表评论
4 楼 huchiwei 2015-02-25 19:32
公司做的软件视图列表点击后都是没有访问过的标记颜色，强制覆盖掉了a的样式.....
3 楼 buxin_2008 2015-02-25 14:09
不错，学习!
2 楼 wdy2099 2015-02-25 09:20
不错！   
1 楼 clrw 2015-02-15 17:06
不错，学习了。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • jquery动态添加元素事件失效问题解决方法

    今天在写JQUERY时遇到个问题：当使用脚本动态添加元素xxx时，但事件$(“.x .y”).click(function)…失效问题。 刚开始网上找到了用live函数，方法如下： 事件绑定：$(“.x .y”).click(function) 需改为： 代码如下:...

  • 解决jquery appaend元素中id绑定事件失效的问题

    下面小编就为大家带来一篇解决jquery appaend元素中id绑定事件失效的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

  • 在JQuery dialog里的服务器控件 事件失效问题

    今天遇到个问题，在dialog中放了服务器端的空间dropdownlist，但是写selectindexchange事件却怎么也触发不了，然后就在网上搜，终于看到有个哥们解决了这个问题，真的谢谢他。

  • 应用UpdatePanel后jQuery事件失效问题的解决方法

    问题描述： 当第一次加载页面时，$(document).ready(function(){ })中的jQuery语句会正常执行，但是当页面部分刷新后，就不会执行了。

  • jquery事件失效全面解析

    原因1：jquery导入顺序需要放在javascript片段之前   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &...

  • 一个js导致的jquery失效问题的解决方法

    这个js是一个增强页面效果的功能，但是用了它，jquery在有的页面可以用，有的页面就失效了，用firefox的firebug调试，发现在有的页面会报错，获取分页的位置的地方会出错。后来发现确实只要没有分页的地方jquery就...

  • 解决jQuery使用append添加的元素事件无效的问题

    今天小编就为大家分享一篇解决jQuery使用append添加的元素事件无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

  • jquery radio 动态控制选中失效问题的解决方法

    下面小编就为大家分享一篇jquery radio 动态控制选中失效问题的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

  • updatepanel与jQuery事件失效问题的解决方法

    document.ready 与 updatepanel 害死人（Jquery插件失效，Autocomplate事件失效，Jquery事件第一次有效，单击按钮后就时效）

  • Jquery对新插入的节点 绑定Click事件失效的解决方法

    下面小编就为大家带来一篇Jquery对新插入的节点 绑定Click事件失效的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

  • jQuery动态添加的元素点击事件失效

    jQuery点击事件失效

  • ajax更新数据后，jquery、jq失效问题

    问题遇到两次，竟然忘记了。所以说不要关抄人家的方法，要多研究下。现在做个记录...

  • 同时使用vue 和 jquery， jquery事件绑定失效

    一个h5项目同时引用了vue.js和jquery.js， 发现jquery绑定的事件失效。 原因是： vue会重新渲染dom,加上是异步实例vue.所以正常写程序的话jq的$()获取的元素不是vue渲染后的元素. 解决办法： 先加载vue.js，...

  • 解决jquery绑定点击事件失效问题

    解决jquery绑定点击事件失效问题

  • jquery中的事件处理详细介绍

    ①jQuery中的$(doucument).ready()事件 ready(fn)是jQuery事件模块中最重要的一个函数。这个方法可以看作是对[removed]注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪时立刻调用所绑定的函数,而几乎所有...

  • 浅谈jQuery添加的HTML,JS失效的问题

    下面小编就为大家带来一篇浅谈jQuery添加的HTML,JS失效的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

  • OFDM、OOK、PPM、QAM 的误码率模拟【绘制不同调制方案的误码率曲线】附Matlab代码.rar

    1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

  • 8c71b76fb2ec10cf50fc6b0308d3dcfc_9545878e2b97a84b2e089ece58da9e82.png

    8c71b76fb2ec10cf50fc6b0308d3dcfc_9545878e2b97a84b2e089ece58da9e82

  • Android SO逆向-对象的拷贝构造函数.pdf

    Android逆向过程学习

  • 基于S7-200 PLC的糖果包装控制系统设计与实现

    内容概要：本文详细介绍了基于西门子S7-200 PLC的糖果包装控制系统的设计与实现。首先阐述了PLC在工业自动化领域的优势及其在糖果包装生产线中的重要性。接着深入探讨了系统的硬件连接方式，包括传感器、执行机构与PLC的具体接口配置。随后展示了关键的编程实现部分，如糖果计数、包装执行、送膜控制、称重判断以及热封温度控制等具体梯形图代码片段。此外，还分享了一些实用的经验技巧，如防止信号抖动、PID参数优化、故障诊断方法等。最后总结了该系统的优势，强调其对提高生产效率和产品质量的重要作用。 适合人群：从事工业自动化控制、PLC编程的技术人员，尤其是对小型PLC系统感兴趣的工程师。 使用场景及目标：适用于糖果制造企业，旨在提升包装生产线的自动化程度，确保高效稳定的生产过程，同时降低维护成本并提高产品一致性。 其他说明：文中不仅提供了详细的理论讲解和技术指导，还结合实际案例进行了经验分享，有助于读者更好地理解和掌握相关知识。

Global site tag (gtag.js) - Google Analytics