Web前端开发中的小错误

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.每个页面使用标准一致的模板链接到网站的主要部分。

2.关键字要简单。设计应该美观简洁,这样用户在使用时才不会困惑.

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

众所周知,带有下划线的内容很容易被当成链接。不要随随便便地在文字中来一个下划线,这样会让人困惑。如果真的想强调某个单词,不妨试试加粗或者加大字体。

转载自:http://www.cnblogs.com/dianshi/p/4283193.html

Web前端开发中的小错误的更多相关文章

  1. WEB前端开发中的图片压缩

    web前端开发中,图片的重要性不言而喻,而由于一些图片的大小加上现在国内的网速不给力等种种原因,我们非常有必要对网站使用的图片进行压缩,压缩图片必然会带来图片质量的损失,我们要尽可能的在质量降低很小的 ...

  2. Web前端开发中的MCRV模式(转)

    作者: izujian  来源: baiduux 摘要:针对前端开发中基于ajax的复杂页面开发所面临的代码规模大,难以组织和维护,代码复用性.扩展性和适应性差等问题,本文尝试以MVC思想为 基础,结 ...

  3. px em rem在WEB前端开发中的区别

    我们都知道基于像素的字体大小所用的单位是px,但是随着响应式设计的不断火热,基于相对字体大小的单位em变开始流行起来.当然,rem也在Web前端开发人员讨论如何更好设置字体大小的讨论话题之列.是不是需 ...

  4. WEB前端开发中的SEO注意点

    近几年来,SEO在国内得到了蓬勃的发展,其中很多的SEO技术越来越体现在web前端的一些细节上.要做好SEO,WEB前端这一块也要做必不可少的优化. 这就要求我们WEB前端工程师在开发页面的时候,要写 ...

  5. web前端开发中常用的尺寸和位置

    我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...

  6. web前端开发中的浏览器兼容性总结

    1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height),如果di ...

  7. Web前端开发中的各种CSS规范

    Reference: http://yusi123.com/2866.html 一.文件规范 1.文件均归档至约定的目录中(具体要求以豆瓣的CSS规范为例进行讲解): 所有的CSS分为两大类:通用类和 ...

  8. web前端开发中Nodejs、Grunt、npm等的介绍、使用

    一.Nodejs的安装: Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs,就去安装吧.去 https://nodejs.org/ 上,点击页面中那个绿色.大 ...

  9. 大三小学期 web前端开发的一些小经验

    1.html是页面的布局设计,就是页面上要放哪些东西,比如登录界面需要按钮,输入框等等:css是被用于使用设计部件和布局,例如哪些部件放在哪里,多宽多大,是否有边框等:js/jQuery是用于实现函数 ...

随机推荐

  1. vue-cli脚手架构建了项目,想去除Eslint验证,如何设置?

    vue-cli脚手架构建了项目,想去除Eslint验证,如何设置? 在webpack.base.conf.js里面删掉下面: preLoaders: [ { test: /\.vue$/, loade ...

  2. leetcode-hard-array-238. Product of Array Except Self-NO

    mycode   99.47% class Solution(object): def productExceptSelf(self, nums): """ :type ...

  3. pandas.Series.value_counts

    pandas.Series.value_counts Series.value_counts(normalize=False, sort=True, ascending=False, bins=Non ...

  4. 自然语言20.1 WordNet介绍和使用

     https://study.163.com/provider/400000000398149/index.htm?share=2&shareId=400000000398149(欢迎关注博主 ...

  5. java web 开发快速宝典 ------电子书

    http://www.educity.cn/jiaocheng/j10259.html 1.2.1  JDk 简介 JDK是Sun公司在1995年推出的一套可以跨操作系统平台编译和运行Java程序的开 ...

  6. C++ 中set

    set特点: 所有元素不会重复,重复插入已经有的新值无效: 所有元素按顺序排列:unordered_set除外 键和值相同,所以set中的值是不可更改的 set的各成员函数列表如下: 1.begin( ...

  7. Python学习小技巧之列表项的排序

    Python学习小技巧之列表项的排序 本文介绍的是关于Python列表项排序的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 典型代码1:     data_list = [6, 9, 1, ...

  8. [笔记] Delphi使用DUnitX做单元测试的简单例子

    Delphi XE 提供了对DUnitX的支持,记录一个最简例子. 首先创建项目A,然后创建单元untCalc,代码如下: unit untCalc; interface type TCalc = c ...

  9. python去掉空格和 b

    直接看下面实例: In [52]: output=subprocess.check_output(["head -c 16 /dev/urandom | od -An -t x | tr - ...

  10. Window Relationships and Frames

    If a page contains frames, each frame has its own window object and is stored in the frames collecti ...