Web前端在实际的工作当中除了会代码还需要掌握其他哪些软件吗？

前端开发工程师，是完成互联网产品的用户界面开发的，包括我们常见的PC/移动端网页，小程序，APP。

完成开发我们需要学习掌握常规的HTML，CSS,JavaScript代码编辑能力，同时还需要掌握前端开发框架知识。

首先我们要知道，目前前端开发工程师在企业里有两种情况：

1美工出身的前端开发工程师 ，工作内容更偏向美工

2后端或其他语言开发转前端开发工程师 ，工作内容更偏向技术

有这两种情况，在选择工作的软件和工具上，更多的是要看工作的内容和团队风格。下面我讲几种我们常见的前端开发会用到的工具，你可以参考

也就是写代码的。我们常见的前端开发编辑工具就有：WebStorm，HBuilder，Sublime，VScode。如果是偏视觉一点的，会选择用Dreamweaver。

PS这个不用说，做处理的工具，美工肯定要用。如果你的工作内容是纯技术，基本碰不到，基本上公司会让UI来弄

我们除了会用到一些软件，专业的前端开发还会用到非常多好用的工具，帮助我们开发工作的。

浏览器兼容性测试工具

除了这些，还有很多比较不错的在线工具，这些你可以在以后工作中慢慢接触。

上述问题是指的web前端的开发工具么？

我个人了解的除了上一位大神发的那几个工具外，开发时还常用的工具也需要会以下几个：

1、PS

PS呢主要用于对图像进行处理和修改，ps在图像和以及视频和文字方便都有涉及，作为一个前端开发者而言是需要掌握滴。

2、HBuilder

HBuilder是一款前端开发工具，支持一些html和js等开发，主要编写一些c和web等语言，HBuilder最大的优势就是速度比较快，强大的代码提示和代码输入，大大增加了开发者的开发效率。

3、Dreamweaver

Dreamweaver是一款网页代码编辑器，并且利用一些前端代码对网页进行快速的开发，并且通过智能搜索引擎对网页进行访问，开发者利用视觉来减少出现的错误。

4、WebStorm

WebStorm 是一款JavaScript 开发工具。目前被开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

像web前端开发的软件工具网上搜索的话，会 出现很多，工具只是个辅助作用，主要还是要看开发人员的技术，技术厉害，用啥工具都没啥问题。web前端开发中需要掌握的技术：HTML、CSS、JavaScript、jQuery、Ajax等等这些都必须熟悉掌握才可以啊。加油啊兄弟们。

web 前端开发者路过，大家都知道作为前端技术人最主要要掌握html ，css 和JavaScript 和各种主流框架，淡出了这些你还要掌握其他工具或者技术来提高工作效率。接下来我来讲讲几个必要的技术或者软件。

1: 版本管理工具 git ，大家都知道一个软件的诞生会涉及到各种开发人员参与，为了更好的控制版本和团队合作，开发过程中往往要采用 git 或者其他版本控制工具，可以大大提高工作效率。

2:接口工具 postman ，一款可以模拟各种请求的软件，可以自定义设置请求头，请求参数，支持时候请求方式 ，提供桌面客户端，网页应用和插件，在实际开发中非常好用。

3:代码工具 vscode，被称为史上最好用的前端编辑器，支持各种编程语言，支持git eslint 扩展，docker 容器扩展，界面友好。

1、准备和基础的学习 开始的时候做一些基础工作还是必要的，比如选一个自己喜欢的编辑器啊，比如科学上网，高效的使用搜索引擎，markdon语法，PS切图等，这些东西都可以大幅度提升你的学习效率或编程的幸福感，所谓磨刀不误砍柴功。

接下来你就可以开始学习基础知识啦。HTML，CSS，Java这三样真的很重要，真的很重要，真的很重要，重要的事情说三遍！HTML写出基础页面，CSS将HTML静态页面从黑白色过渡到五颜六色，然后java可以让枯燥的静态文字变成可以交互的内容。

初学时不用去管那些花里胡哨的框架，一定要把基础打好。框架再怎么更新迭代，最基础的东西还是这三样，只要你能掌握好基础，就等于拿到了打开前端世界的钥匙。

2、进阶学习

掌握了HTML+CSS+Java后，成功打开了前端的大门。接下来就是进阶部分，从js进阶到jquery-，jQuery就是java的一个库，把我们常用的一些功能进行了封装，方便我们来调用，提高我们的开发效率，同时极大地简化了 Java 编程。

然后再到angular-一种更加灵活、强大的数据绑定、html扩展的js库；然后到ajax、json、xml，可以和后台进行协同开发的技能。

学会这些东西之后，就能掌握原生JS和jQuery完成时下流行的各种PC端网页特效、前后端交互，在通往前端的路上往前迈上了坚实的一大步。

3、移动端web开发学习

移动互联网时代，自然得学移动端web开发。就得学习HTML5+CSS3特性了，需学习的HTML5的标签、属性、表单、事件、视频/音频、画布等，CSS3中的边框背景、2D/3D转换、过度、动画、多列、字体、文本效果、用户界面等。

常用移动端框架：纯JS库的推荐zeptojs，CSS3中的学习bootstrap或fundation5（推荐学习bootstrap，bootstrap拥有美观的样式和封装完善的JQ插件，使用方便，基于Bootstrap的扩展也很多，这是其他框架所无法比拟的）。

移动端web开发当然离不开响应式布局，响应式布局则是通过CSS3中的media query技术实现的，所以media query技术也是必学的。

学到这一步，一般的开发任务基本都能轻松解决，基本满足H5移动端前端开发工程师和初级前端工程师的岗位需求了。

4、前端高级课程学习

上面的这些都是前端开发的基础，如果需要成为月薪上万，行业抢手的前端工程师，这些是不够的。还需学习ECMA 6、web 界面的渐进式框架vuejs、自动化构建工具Gulp、平台nodejs、微信端开发等。直到能够用框架开发WEB应用，月薪上万也就稳了，妥妥的中级前端工程师。

5、js的编程思想和面向对象 编程思想，其实就是事项一个事物的自己的想法，将自己的想法编写成代码。就是编码思想了。这就需要大量的实践，当在写小功能得心应手而组织工程代码有点费劲的时候，自然就会认真考虑了。js的面向对象指的是ECMA 面向对象技术，它真正强大之处在于能够创建自己专用的类和对象，是一门比较复杂的技术。

当以上五条都有所涉猎后，剩下的就不需要别人进行引导了，到那时候你自己就知道你需要学习进阶哪方面的技能。当然，那时已经成为一名前端工程师，已然处于高薪工作中。

一般来说，网页的背景色应该柔和一些、素一些、淡一些，再配上深色的文字，使人看起来自然、舒畅对于做网页的初学者可能更习惯于使用一些漂亮的作为自己网页的背景，但是，浏览一下大型的商业网站，你会发现他们更多运用的是白色、蓝色、**等，使得网页显得典雅，大方和温馨。更重要的是，这样可以大大加快浏览者打开网页的速度。

一般来说，网页的背景色应该柔和一些、素一些、淡一些，再配上深色的文字，使人看起来自然、舒畅。而为了追求醒目的视觉效果，可以为标题使用较深的颜 色。下面是我做网页和浏览别人的网页时，对网页背景色和文字色彩搭配积累的经验，这些颜色可以做正文的底色，也可以做标题的底色，再搭配不同的字体，一定 会有不错的效果，希望对大家在制作网页时有用。

BgcolorΚ〃#F1FAFA〃———做正文的背景色好，淡雅

BgcolorΚ〃#E8FFE8〃———做标题的背景色较好

BgcolorΚ〃#E8E8FF〃———做正文的背景色较好，文字颜色配黑色

BgcolorΚ〃#8080C0〃———上配**白色文字较好

BgcolorΚ〃#E8D098〃———上配浅蓝色或蓝色文字较好

BgcolorΚ〃#EFEFDA〃———上配浅蓝色或红色文字较好

BgcolorΚ〃#F2F1D7〃———配黑色文字素雅，如果是红色则显得醒目

BgcolorΚ〃#336699〃———配白色文字好看些

BgcolorΚ〃#6699CC〃———配白色文字好看些，可以做标题

BgcolorΚ〃#66CCCC〃———配白色文字好看些，可以做标题

BgcolorΚ〃#B45B3E〃———配白色文字好看些，可以做标题

BgcolorΚ〃#479AC7〃———配白色文字好看些，可以做标题

BgcolorΚ〃#00B271〃———配白色文字好看些，可以做标题

BgcolorΚ〃#FBFBEA〃———配黑色文字比较好看，一般作为正文

BgcolorΚ〃#D5F3F4〃———配黑色文字比较好看，一般作为正文

BgcolorΚ〃#D7FFF0〃———配黑色文字比较好看，一般作为正文

BgcolorΚ〃#F0DAD2〃———配黑色文字比较好看，一般作为正文

BgcolorΚ〃#DDF3FF〃———配黑色文字比较好看，一般作为正文

浅绿色底配黑色文字，或白色底配蓝色文字都很醒目，但前者突出背景，后者突出文字。红色底配白色文字，比较深的底色配**文字显得非常有效果。

此文只是起一个“抛砖引玉”的作用，大家可以发挥想象力，搭配出更有新意、更醒目的颜色，使网页更具有吸引力

如今，互联网越来越走近我们的生活，网上冲浪也渐渐成为我们生活不可缺少的一部分。网络世界五彩缤纷，涌现出大量优秀精美的网页。大量网络信息的呈 现，无非就是通过文本、图像、Flash动画等，其中， 文本是网页中最为重要的设计元素。对于网页设计初学者而言，了解和掌握网页设计中的文字排版设计就显得尤为重要，下面笔者想谈谈一己之见。

文字的格式化

字号、字体、行距

字号大小可以用不同的方式来计算，例如磅#quotelquoter#或像素(Pixel)。因为以像素技术为基础单位打印时需要转换为磅，所以，建议采用磅为单位。

最适合于网页正文显示的字体大小为12磅左右，现在很多的综合性站点，由于在一个页面中需要安排的内容较多，通常采用9磅的字号。较大的字体可用于标 题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。需要注意的是，小字号容易产生整体感和精致感，但可读性较差。

网页设计者可以用字体来更充分地体现设计中要表达的情感。字体选择是一种感性、直观的行为。但是，无论选择什么字体，都要依据网页的总体设想和浏览者 的需要。例如：粗体字强壮有力，有男性特点，适合机械、建筑业等内容；细体字高雅细致，有女性特点，更适合服装、化妆品、食品等行业的内容。在同一页面 中，字体种类少，版面雅致，有稳定感；字体种类多，则版面活跃，丰富多彩。关键是如何根据页面内容来掌握这个比例关系。

从加强平台无关性的角度来考虑，正文内容最好采用缺省字体。因为浏览器是用本地机器上的字库显示页面内容的。作为网页设计者必须考虑到大多数浏览者的 机器里只装有三种字体类型及一些相应的特定字体。而你指定的字体在浏览者的机器里并不一定能够找到，这给网页设计带来很大的局限。解决问题的办法是：在确 有必要使用特殊字体的地方，可以将文字制成图像，然后插入页面中。

行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12，即用字10点，则行距 12点。这主要是出于以下考虑：适当的行距会形成一条明显的水平空白带，以引导浏览者的目光，而行距过宽会使一行文字失去较好的延续性。

除了对于可读性的影响，行距本身也是具有很强表现力的设计语言，为了加强版式的装饰效果，可以有意识地加宽或缩窄行距，体现独特的审美意趣。例如，加 宽行距可以体现轻松、舒展的情绪，应用于娱乐性、抒情性的内容恰如其分。另外，通过精心安排，使宽、窄行距并存，可增强版面的空间层次与弹性，表现出独到 的匠心。

行距可以用行高(line-height)属性来设置，建议以磅或默认行高的百分数为单位。例如：｛line-height：20pt｝、｛line-height：150%｝。

文字的整体编排

页面里的正文部分是由许多单个文字经过编排组成的群体，要充分发挥这个群体形状在版面整体布局中的作用。从艺术的角度可以将字体本身看成是一种艺术形 式，它在个性和情感方面对人们有着很大影响。在网页设计中，字体的处理与颜色、版式、图形等其他设计元素的处理一样非常关键。从某种意义上来讲，所有的设 计元素都可以理解为图形。

1．文字的图形化

字体具有两方面的作用：一是实现字意与语义的功能，二是美学效应。所谓文字的图形化，即是强调它的美学效应，把记号性的文字作为图形元素来表现，同时 又强化了原有的功能。作为网页设计者，既可以按照常规的方式来设置字体，也可以对字体进行艺术化的设计。无论怎样，一切都应围绕如何更出色地实现自己的设 计目标。

将文字图形化、意象化，以更富创意的形式表达出深层的设计思想，能够克服网页的单调与平淡，从而打动人心。

2．文字的叠置

文字与图像之间或文字与文字之间在经过叠置后，能够产生空间感、跳跃感、透明感、杂音感和叙事感，从而成为页面中活跃的、令人注目的元素。虽然叠置手 法影响了文字的可读性，但是能造成页面独特的视觉效果。这种不追求易读，而刻意追求“杂音”的表现手法，体现了一种艺术思潮。因而，它不仅大量运用于传统 的版式设计，在网页设计中也被广泛采用。

3．标题与正文

在进行标题与正文的编排时，可先考虑将正文作双栏、三栏或四栏的编排，再进行标题的置入。将正文分栏，是为了求取页面的空间与弹性，避免通栏的呆板以 及标题插入方式的单一性。标题虽是整段或整篇文章的标题，但不一定千篇一律地置于段首之上。可作居中、横向、竖向或边置等编排处理，甚至可以直接插入字群 中，以新颖的版式来打破旧有的规律。

4．文字编排的四种基本形式

页面里的正文部分是由许多单个文字经过编排组成的群体，要充分发挥这个群体形状在版面整体布局中的作用。

两端均齐：文字从左端到右端的长度均齐，字群形成方方正正的面，显得端正、严谨、美观。

居中排列：在字距相等的情况下，以页面中心为轴线排列，这种编排方式使文字更加突出，产生对称的形式美感。

左对齐或右对齐：左对齐或右对齐使行首或行尾自然形成一条清晰的垂直线，很容易与图形配合。这种编排方式有松有紧，有虚有实，跳动而飘逸，产生节奏与韵律的形式美感。左对齐符合人们阅读时的习惯，显得自然；右对齐因不太符合阅读习惯而较少采用，但显得新颖。

绕图排列：将文字绕图形边缘排列。如果将底图插入文字中，会令人感到融洽、自然。

文字的强调

1．行首的强调

将正文的第一个字或字母放大并作装饰性处理，嵌入段落的开头，这在传统媒体版式设计中称之为“下坠式”。此技巧的发明溯源于欧洲中世纪的文稿抄写员。 由于它有吸引视线、装饰和活跃版面的作用，所以被应用于网页的文字编排中。其下坠幅度应跨越一个完整字行的上下幅度。至于放大多少，则依据所处网页环境而 定。

2．引文的强调

在进行网页文字编排时，常常会碰到提纲挈领性的文字，即引文。引文概括一个段落、一个章节或全文大意，因此在编排上应给予特殊的页面位置和空间来强 调。引文的编排方式多种多样，如将引文嵌入正文的左右侧、上方、下方或中心位置等，并且可以在字体或字号上与正文相区别而产生变化。

3．个别文字的强调

如果将个别文字作为页面的诉求重点，则可以通过加粗、加框、加下划线、加指示性符号、倾斜字体等手段有意识地强化文字的视觉效果，使其在页面整体中显得出众而夺目。另外，改变某些文字的颜色，也可以使这部分文字得到强调。这些方法实际上都是运用了对比的法则。

文字的颜色

在网页设计中，设计者可以为文字、文字链接、已访问链接和当前活动链接选用各种颜色。例如，如果你使用FrontPage编辑器，默认的设置是这样 的：正常字体颜色为黑色，默认的链接颜色为蓝色，鼠标点击之后又变为紫红色。使用不同颜色的文字可以使想要强调的部分更加引人注目，但应该注意的是，对于 文字的颜色，只可少量运用，如果什么都想强调，其实是什么都没有强调。况且，在一个页面上运用过多的颜色，会影响浏览者阅读页面内容，除非你有特殊的设计 目的。

颜色的运用除了能够起到强调整体文字中特殊部分的作用之外，对于整个文案的情感表达也会产生影响。这涉及色彩的情感象征性问题，限于篇幅，在这里不做深入探讨。

另外需要注意的是文字颜色的对比度，它包括明度上的对比、纯度上的对比以及冷暖的对比。这些不仅对文字的可读性发生作用，更重要的是，你可以通过对颜色的运用实现想要的设计效果、设计情感和设计思想。

一、色彩处理

色彩是人的视觉最敏感的东西。主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，也就是：主页的整 体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。因为色彩 具有象征性，例如：嫩绿色、翠绿色、金**、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色，例如：军警的橄榄绿，医疗卫生的白色等。色彩 还具有明显的心理感觉，例如冷、暖的感觉，进、退的效果等。另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较 大的差异。充分运用色彩的这些特性，可以使我们的主页具有深刻的艺术内涵，从而提升主页的文化品位。下面介绍几种常用的配色方案：

1暖色调。即红色、橙色、**、赭色等色彩的搭配。这种色调的运用，可使主页呈现温馨、和煦、热情的氛围。

2冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运用，可使主页呈现宁静、清凉、高雅的氛围。

3对比色调。即把色性完全相反的色彩搭配在同一个空间里。例如：红与绿、黄与紫、橙与蓝等。这种色彩的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、 喜庆的感觉。当然，对比色调如果用得不好，会适得其反，产生俗气、刺眼的不良效果。这就要把握“大调和，小对比”这一个重要原则，即总体的色调应该是统一 和谐的，局部的地方可以有一些小的强烈对比。

最后，还要考虑主页底色（背景色）的深、浅，这里借用摄影中的一个术语，就是“高调”和“低调”。底色浅的称为高调；底色深的称为低调。底色深，文字的颜 色就要浅，以深色的背景衬托浅色的内容（文字或）；反之，底色淡的，文字的颜色就要深些，以浅色的背景衬托深色的内容（文字或）。这种深浅的变化 在色彩学中称为“明度变化”。有些主页，底色是黑的，但文字也选用了较深的色彩，由于色彩的明度比较接近，读者在阅览时，眼睛就会感觉很吃力，影响了阅读 效果。当然，色彩的明度也不能变化太大，否则屏幕上的亮度反差太强，同样也会使读者的眼睛受不了。

网页色彩的搭配

网页的色彩是树立网站形象的关键之一，色彩搭配却是网友们感到头疼的问题。网页的背景，文字，图标，边框，超链接…，应该采用什么样的色彩，应该搭配什么色彩才能最好的表达出预想的内涵呢？阿捷这里谈一些心得，希望对你有所启发。

首先我们先来了解一些色彩的基本知识：

1颜色是因为光的折射而产生的。

2红，黄，蓝是三原色，其它的色彩都可以用这三种色彩调和而成。网页html语言中的色彩表达即是用这三种颜色的数值表示例如：红色是color (255,0,0)十六进制的表示方法为(FF0000)白色为(FFFFFF), 我们经常看到的”bgColor=#FFFFFF”就是指背景色为白色。

3颜色分非彩色和彩色两类。非彩色是指黑，白，灰系统色。彩色是指除了非彩色以外的所有色彩。

4任何色彩都有饱和度和透明度的属性，属性的变化产生不同的色相，所以至少可以制作几百万种色彩。

网页制作用彩色还是非彩色好呢？根据专业的研究机构研究表明：彩色的记忆效果是黑白的35倍。也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。

我们通常的做法是：主要内容文字用非彩色(黑色)，边框，背景，用彩色。这样页面整体不单调，看主要内容也不会眼花。

●非彩色的搭配

黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。 灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。

●彩色的搭配

色彩千变万化，彩色的搭配是我们研究的重点。我们依然需要进一步学习一些色彩的知识。

一色环。我们将色彩按”红->黄->绿->蓝->红”依次过度渐变，就可以得到一个色彩环。色环的两端是暖色和寒色，当中是中型色。(如下图)

红橙橙黄黄黄绿绿青绿蓝绿蓝蓝紫紫紫红红

暖色系 中性系 寒色系 中性系

二色彩的心理感觉。不同的颜色会给浏览者不同的心理感受。

红色—是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。

绿色—介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。 它和金黄，淡白搭配，可以产生优雅，舒适的气氛。

橙色—也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。

**—具有快乐，希望，智慧和轻快的个性，它的明度最高。

蓝色—是最具凉爽，清新，专业的色彩。它和白色混合，能体现柔顺，淡雅，浪漫的气氛(象天空的色彩:)

白色—具有洁白，明快，纯真，清洁的感受。

黑色—具有深沉，神秘，寂静，悲哀，压抑的感受。

灰色—具有中庸，平凡，温和，谦让，中立和高雅的感觉。

每种色彩在饱和度，透明度上略微变化就会产生不同的感觉。以绿色为例，黄绿色有青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深。

●网页色彩搭配的原理

1色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。

2色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。(参考设计思考第二篇网站CI的标准色彩一节)

3色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。

4色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。

●网页色彩掌握的过程

随着网页制作经验的积累，我们用色有这样的一个趋势:单色->五彩缤纷->标准色->单色。一开始因为技术和知识缺乏，只能制作 出简单的网页，色彩单一；在有一定基础和材料后，希望制作一个漂亮的网页，将自己收集的最好的，最满意色彩堆砌在页面上；但是时间一长，却发现色彩杂 乱，没有个性和风格；第三次重新定位自己的网站，选择好切合自己的色彩，推出的站点往往比较成功；当最后设计理念和技术达到顶峰时，则又返朴归真，用单一 色彩甚至非彩色就可以设计出简洁精美的站点。

○网页色彩搭配的技巧

文章写到这里，有心急的网友要问了：“到底用什么色彩搭配好看呢？你能不能推荐几种配色方案？”别急，这里有一点技巧，可以帮助你迅速成为调色大师:)

1用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将 色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。

2用两种色彩。先选定一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)。我的主页用蓝色和**就是这样确定的。整个页面色彩丰富但不花稍。

3用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。确定色彩的方法各人不同，我是在photoshop里按前景色方框，在跳出的拾色器窗中选择”自定义”，然后在”色库”中选就可以了:)

4用黑色和一种彩色。比如大红的字体配黑色的边框感觉很”跳”。

在网页配色中，忌讳的是：

1不要将所有颜色都用到，尽量控制在三种色彩以内。

2背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容

颜 色 搭 配

一、红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的色。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。

a) 在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。

b) 在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。

c) 在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。

d) 在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。

二、**的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。**是各种色彩中，最为娇气的一种色。只要在纯**中混入少量的其它色，其色相感和色性格均会发生较大程度的变化。

a) 在**中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。

b) 在**中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。

c) 在**中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。

d) 在**中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。

三、蓝色的色感冷嘲热讽，性格朴实而内向，是一种有助于人头脑冷嘲热讽静的色。蓝色的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一 个深远、广埔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、 黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。

a) 如果在橙色中黄的成份较多，其性格趋于甜美、亮丽、芳香。

b) 在橙色中混入小量的白，可使橙色的知觉趋于焦躁、无力。

四、绿色是具有**和蓝色两种成份的色。在绿色中，将**的扩张感和蓝色的收缩感相中庸，将**的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。

a) 在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。

b) 在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。

c) 在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。

五、 紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。

a) 在紫色中红的成份较多时，其知觉具有压抑感、威胁感。

b) 在紫色中加入少量的黑，其感觉就趋于沉闷、伤感、恐怖。

c) 在紫色中加入白，可使紫色沉闷的性格消失，变得优雅、娇气，并充满女性的魅力。

六、 白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。

a) 在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。

b) 在白色中混入少量的黄，则成为一种乳**，给人一种香腻的印象。

c) 在白色中混入少量的蓝，给人感觉清冷、洁净。

d) 在白色中混入少量的橙，有一种干燥的气氛。

e) 在白色中混入少量的绿，给人一种稚嫩、柔和的感觉。

f) 在白色中混入少量的紫，可诱导人联想到淡淡的芳香。

自Iphone和Android这两个牛逼的手机操作系统发布以来，在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序，运行在高端的移动终端设备。我相信各位童鞋应该和我一个样子，到处查找贴子，学习如何制作WebApp项目，经过我一番查找资料学习后准备分享给大家，希望和大家共同探讨学习WebApp。那么WebApp与NativeApp的区别是什么NativeApp：缺点：1、开发成本非常大，一般使用的开发语言为JAVA、C++、Objective-C。2、更新体验较差、同时也比较麻烦，每一次发布新的版本，都需要做版本打包，且需要用户手动更新（有些应用程序即使不需要用户手动更新，但是也需要有一个恶心的提示）。优点：1、非常酷因为nativeapp可以调用IOS中的UI控件以UI方法，它可以实现WebApp无法实现的一些非常酷的交互效果2、Nativeapp是被Apple认可的Nativeapp可以被Apple认可为一款可信任的独立软件，可以放在AppleStroe出售，但是Webapp却不行。WebApp：开发成本较低使用web开发技术就可以轻松的完成webapp的开发升级较简单升级不需要通知用户，在服务端更新文件即可，用户完全没有感觉维护比较轻松和一般的web一样，维护比较简单，它其实就是一个站点Webapp说白了就是一个针对Iphone、Android优化后的web站点，它使用的技术无非就是HTML或HTML5、CSS3、JavaScript，服务端技术JAVA、PHP、ASP。当然，因为这些高端智能手机（Iphone、Android）的内置浏览器都是基于webkit内核的，所以在开发WEBAPP时，多数都是使用HTML5和CSS3技术做UI布局。当使用HTML5和CSS3l做UI时，若还是遵循着一般web开发中使用HTML4和CSS2那样的开发方式的话，这也就失去了WEBAPP的本质意义了，且有些效果也无法实现的，所以在此又回到了我们的主题_webapp的布局方式和技术。在此所说的移动平台前端开发是指针对高端智能手机（如Iphone、Android）做站点适配也就是WebApp，并非是针对普通手机开发Wap20，所以在阅读本篇文章以前，你需要对webkit内核的浏览器有一定的了解，你需要对HTML5和CSS3有一定的了解。如果你已经对此有所了解，那现在就开始往下阅读吧一、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用<metacontent="black"name="apple-mobile-web-app-status-bar-style"/><metacontent="telephone=no"name="format-detection"/><metaname="apple-mobile-web-app-status-bar-style"content="default"/><metaname="apple-mobile-web-app-status-bar-style"content="black"/><metaname="apple-mobile-web-app-status-bar-style"content="black-translucent"/><metacontent="email=no"name="format-detection"/>看过iOSwebappAPI的同学都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。在iOS中是不自动识别邮件地址的，但在Android平台，它会自动检测邮件地址，当用户touch到这个邮件地址时，Android会弹出一个框提示用户发送邮件，如果你不想Android自动识别页面中的邮件地址，那么就把这个meta标签加在head里<metacontent="width=device-width,initial-scale=10,maximum-scale=10,user-scalable=0;"name="viewport"/><metacontent="yes"name="apple-mobile-web-app-capable"/>如果您的网站是小于980px（网页上显示的默认宽度），然后宽度应设置这个标记。此外，如果应用程序是iPhone的具体，然后在宽度应设置的iPhone，iPad或iPodTouch的宽度。人们还应该牢记，而不是使用屏幕的宽度和高度的实际价值，应使用“设备宽度”和“设备的高度”的值。<metaname="viewport"content="width=device-width,initial-scale=23,user-scalable=no"/><metaname="viewport"content="width=device-width,initial-scale=23,minimum-scale=1,maximum-scale=5"/>下面是所有可用的选项：width_Widthofviewportinpixels宽度-视口的宽度，以像素。[Default:980,Range:200-10,000][默认值：980范围：200-10,000]height_Heightofviewportinpixels高度-视口的高度，以像素。[Default:calculatedwiththewidthandaspectratioofthedevice,Range:223-10,000][默认：计算的宽度和长宽比的设备，范围：223-10000]initial-scale_Theinitialscaleoftheviewport最初的规模-视口的初始规模。[Default:calculatedtofitthewebpageintheareaavailable,Range:calculatedwithminimum-scaleandmaximum-scaleproperties][默认：计算面积，范围，以适应网页：最小规模和最大规模的的物业计算]minimum-scale_Theminimumscaleofviewport最小规模-视口的最低规模。[Default:025,Range:>0-10][默认：025，范围：0-10]maximum-scale_Themaximumscaleofviewport最大规模的-视口的最大规模。[Default:16,Range:>0-10][默认值：16，范围：0-10]user-scalable_Whethertheusercanzoominandout用户可扩展性-无论用户可以放大和缩小。[Default:yes,Options:yesorno][默认：是的，选项：yes或no]手机浏览缩放控制<metaname="viewport"content="width=device-width,initial-scale=10,minimum-scale=10,maximum-scale=10,user-scalable=no"/>其中：iPhone满屏幕显示：width=device-widthwidth_viewport的宽度[默认值：980范围：200-10,000]height_viewport的高度[默认：计算的宽度和长宽比的设备，范围：223-10000]initial-scale_初始的缩放比例[默认：计算面积，范围，以适应网页：最小规模和最大规模的的物业计算]minimum-scale_允许用户缩放到的最小比例[默认：025，范围：0-10]maximum-scale_允许用户缩放到的最大比例[默认值：16，范围：0-10]user-scalable_用户是否可以手动缩放[默认：是的，选项：yes或no]二、HTML5标签的使用在开始编写webapp时，哥建议前端工程师使用HTML5，而放弃HTML4，因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5的新标签的作用。比如定义一块内容或文章区域可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。三、放弃CSSfloat属性在项目开发过程中可以会遇到内容排列排列显示的布局，建议你放弃float，可以直接使用display:block;四、利用CSS3边框背景属性这个按钮有圆角效果，有内发光效果还有高光效果，这样的按钮使用CSS3写是无法写出来的，当然圆角可以使用CSS3来写，但高光和内发光却无法使用CSS3编写，这个时候你不妨使用-webkit-border-image来定义这个按钮的样式。-webkit-border-image就个很复杂的样式属性。五、块级化a标签请保证将每条数据都放在一个a标签中，为何这样做？因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。六、自适应布局模式在编写CSS时，我不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。为达到适配各种手持设备，我建议前端工程师使用自适应布局模式（支付宝采用了自适应布局模式），因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、websafarik、chrome都能够正常的显示，你无需再次考虑设备的分辨率。七、学会使用webkit-box上一节，我们说过自适应布局模式，有些同学可能会问：如何在移动设备上做到完全自适应呢？很感谢webkit为display属性提供了一个webkit-box的值，它可以帮助前端工程师做到盒子模型灵活控制。八、如何去除Android平台中对邮箱地址的识别看过iOSwebappAPI的同学都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。在iOS中是不自动识别邮件地址的，但在Android平台，它会自动检测邮件地址，当用户touch到这个邮件地址时，Android会弹出一个框提示用户发送邮件，如果你不想Android自动识别页面中的邮件地址，你不妨加上这样一句meta标签在head中<metacontent=”email=no”name=”format-detection”/>九、如何去除iOS和Android中的输入URL的控件条你的老板或者PD或者交互设计师可能会要求你：能否让我们的webapp更加像nativeapp，我不想让用户看见那个输入url的控件条？答案是可以做到的。我们可以利用一句简单的javascript代码来实现这个效果setTimeout(scrollTo,0,0,0);请注意，这句代码必须放在windowonload里才能够正常的工作，而且你的当前文档的内容高度必须是高于窗口的高度时，这句代码才能有效的执行。十、如何禁止用户旋转设备我曾经也想禁止用户旋转设备，也想实现像某些客户端那样：只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你：别想了!在移动版的webkit中做不到！至少ApplewebappAPI已经说到了：我们为了让用户在safari中正常的浏览网页，我们必须保证用户的设备处于任何一个方位时，safari都能够正常的显示网页内容（也就是自适应），所以我们禁止开发者阻止浏览器的orientatixss_javascript事件，看来苹果公司的出发点是正确的，苹果确实不是一般的苹果。iOS已经禁止开发者阻止orientatixss_javascript事件，那Android呢？对不起，我没有找到任何资料说Android禁止开发者阻止浏览器orientatixss_javascript事件，但是在Android平台，确实也是阻止不了的。十一、如何检测用户是通过主屏启动你的webapp看过ApplewebappAPI的同学都知道iOS为safari提供了一个将当前页面添加主屏的功能，按下iphoneipodipodtouch底部工具中的小加号，或者ipad顶部左侧的小加号，就可以将当前的页面添加到设备的主屏，在设备的主屏会自动增加一个当前页面的启动图标，点击该启动图标就可以快速、便捷的启动你的webapp。从主屏启动的webapp和浏览器访问你的webapp最大的区别是它清除了浏览器上方和下方的工具条，这样你的webapp就更加像是nativeapp了，还有一个区别是window对像中的navigator子对象的一个standalone属性。iOS中浏览器直接访问站点时，navigatorstandalone为false,从主屏启动webapp时，navigatorstandalone为true，我们可以通过navigatorstandalone这个属性获知用户当前是否是从主屏访问我们的webapp的。在Android中从来没有添加到主屏这回事！十二、如何关闭iOS中键盘自动大写我们知道在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本webkit为input元素提供了autocapitalize属性，通过指定autocapitalize=”off”来关闭键盘默认首字母大写。十三、iOS中如何彻底禁止用户在新窗口打开页面有时我们可能需要禁止用户在新窗口打开页面，我们可以使用a标签的target=”_self“来指定用户在新窗口打开，或者target属性保持空，但是你会发现iOS的用户在这个链接的上方长按3秒钟后，iOS会弹出一个列表按钮，用户通过这些按钮依旧可以在新窗口打开页面，这样的话，开发者指定的target属性就失效了，但是可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮。这个技巧仅适用iOS对于Android平台则无效。决这一问题，我们可以为其添加一个特殊的样式-webkit-box-sizing:border-box;用来指定该盒子的大小包括边框的宽度。流式布局虽然能够适应不同宽度的布局，但是开发时候，在pc下看，就像是整个网页被拉伸了一样，非常难看，而且不好布局，所以建议采用定宽的方式，这样在pc下会非常好看。同时也可以完美解决不同屏幕手机下的适配问题。

1前端框架一般指用于简化网页设计的框架，比如，jquery，extjs，bootstrap等等，这些框架封装了一些功能，比如html文档操作，漂亮的各种控件(按钮，表单等等)。

2使用前段框架可以降低界面开发周期和提高界面的美观性。

3有些框架比较轻量，比如jquery，有些框架比较重量，比如extjs。一般来说重量的框架会封装更多的功能，比如extjs，封装的grid控件有很强的数据展示和操作功能。

1对用户的价值：

大部分产品对用户的核心价值是功能和内容提供的，而不是由表现层和交互。譬如支付、电商、新闻、交友。

后端解决有还是无的问题，开天辟地。

前端解决有了以后好用的问题，锦上添花，在竞争激烈的领域确实至关重要。

2技术广度和难度：

广度上后端工作在服务器领域，能控制的硬件基本没有极限，CPU、存储、网络、集群等等，因此技术领域极广。一个优秀的后端需要掌握或了解大量技术如：并发、业务架构、数据库、几打流行框架、性能调优、分布式计算、集群架构、容灾、安全、运维等等，一层挖透了还有下一层。几十年计算机发展历史中大量的技术沉淀在服务器端。

Web前端一直工作在一个浏览器盒子里，先天不足，能承载的可能性太小，技术广度不足。

深度上，现代计算机领域的难题如大规模负载，海量数据处理，实时计算也是后端的，前端集中在表示层，这一层虽然也很复杂，但能称之为难题的技术几乎没有，也很容易复制。

前端要说深度也不是没有，但这一步需要跨到图形领域(如网页游戏)，不是常见场景。

说到底前端代码能控制的硬件确实不如后端，因此在技术上，前端更容易。现在为什么说前端会比后端更值钱呢那是因为前端对硬件的控制能力提升了(html5odejsmobile)，而后端分化得比较厉害，有一批后端专门只写业务逻辑，框架是别人写的，系统架构是别人搭的，服务器跑在云里，连机器物理地址都不知道。世人眼里可能觉得这种写MVC代码的人才是后端，这种被限制在一个“虚拟盒子”里的后端确实不怎么难上手。

一般而言网上说的互联网行业的技术含量排名大概是这样：

产品经理

在广大中小公司，很多产品经理都是不会代码，不会设计。很多技校学艺术设计的毕业生，当上了美工。这些都是真，所以能力低，干的人多，自然就低。然而，你问Google设计师挣多少了嘛

门槛低不等于技术含量低。

要解决 Vue 前端代码中详情页不能跳转的问题，可以尝试以下几个步骤：

检查路由配置：确保你的路由配置中包含了对应详情页的路径和组件。检查路由文件（通常是 router/indexjs）中的路径设置和组件引入是否正确。

检查跳转方法：确认你在前端代码中使用了正确的跳转方法。Vue Router 提供了多种导航方式，例如 routerpush() 或 <router-link> 标签。确保你使用了适当的方法进行导航，并且目标路径正确。

检查参数传递：如果详情页需要传递参数，确保你正确地传递了参数。可以通过路由路径的动态参数或者通过查询字符串传递参数。

检查组件逻辑：检查详情页组件的逻辑是否正确。确保组件能够正确地接收和处理参数，并在需要的时候触发相关的操作或方法。

检查路由守卫：如果你在应用中使用了路由守卫（例如 beforeEach 或 beforeResolve），请确保守卫逻辑正确，不会阻止详情页的跳转。

检查网络请求：如果详情页的内容需要通过网络请求获取，确保网络请求的代码正确，并且在获取数据后进行相应的跳转操作。

查看控制台报错：检查浏览器的开发者工具控制台，查看是否有相关的报错信息，它们可能会提供有关问题所在的线索。

如果问题仍然存在，可以提供更多的代码和错误信息，这样我可以更具体地帮助您排查和解决问题。