怎么去设计好看Web前端_Web前端设计有哪些技巧

　　web设计排版多种多样，如何更好的排版、设计出更符合美学的设计了?下面由学习啦小编为大家整理的Web前端设计技巧，希望大家喜欢!

　　Web前端设计技巧

　　一、强调字体

　　字体的设计与强调在网页当中相当重要，合适的排版和适当的字体强调，不仅可以让用户快速的抓住网站中的重点，同样可以增强网站对用户的吸引力

　　二、单页面设计

　　随着互联网的发展，用户的习惯更倾向于鼠标滚轮。在用户的体验和习惯方面来讲，与其在多个页面中来回点击查看，不如直接滚轮来的方便。

　　三、网页色块设计

　　随着互联网的发展和H5的出现，网站网页的排版方式越来越倾向于简洁大方，这最根本的原因在于：用户的视觉和心理。不同的色块放在一起形成强烈的对比，要么以纯文字形式，要么以方形照片配上文字形式，这两者在一定程度上刺激了用户的视觉兴趣，进而使用户继续探索。

　　四、背景

　　网页以什么样的方式作为背景呢?纯色?渐变?图片?这三种都是可以的，但以商业化为目的展示，用照片作为网站网页的背景，不仅可以达到展示的目的，而且还可以达到强烈的视觉表达效果。这种设计方式在时尚、品牌和旅游等行业最为常见。

　　五、图片

　　简约、设计时尚、颜色对比突出，表达清楚、突出目的的大图，是很多网站开发者所追捧的。同样与枯燥的文字相比，用户也更愿意继续观赏这样的网站。

　　六、响应式设计

　　随着手机和移动端设备广泛的被人们使用，响应式设计成为目前网站开发比不可少的内容。不仅能节省开发者的成本和时间，更能方便用户在不同尺寸的设备上畅通无阻的浏览你的网站。

　　七、视差滚动

　　让多层背景以不同的速度移动，形成运动视差的3D效果，这样的效果以后很可能会在H5的网站中更加常见和流行

　　Web前端知识技巧

　　1、函数原型链

　　Javascript虽然没有继承概念，但Javascript在函数Function对象中建立了原型对象prototype，并以Function对象为主线，从上至下，在内部构建了一条原型链。

　　简单来说就是建立了变量查找机制，当访问一个对象的属性时，先查找对象本身是否存在，如果不存在就去该对象所在的原型连上去找，直到Object对象为止，如果都没有找到该属性才会返回undefined。

　　因此我们经常会利用函数的原型机制来实现JS继承。关于函数原型链可参考博客：JS原型对象和原型链

　　2、函数作用域

　　函数作用域就是变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。在JS中没有会块级作用域，只有函数作用域，因此JS中还存在着另外一种怪异现象，那就是变量提升。关于作用域的介绍请参考博客：函数的作用域和作用域链

　　3、函数指针 this

　　this 存在于函数中，它指向的是该函数在运行时被调用的那个对象。在实际项目中，遇到this的坑比较多，因此需要对this作深入的理解。

　　Function对象还提供了call、apply和bind等方法来改变函数的this指向，其中call和apply主动执行函数，bind一般在事件回调中使用，而call和apply的区别只是参数的传

　　递方式不同。关于call,apply和bind的用户请参考博客：详解JS的call,apply和bind

　　4、构造函数 new

　　JS中的函数即可以是构造函数又可以当作普通函数来调用，当使用new来创建对象时，对应的函数就是构造函数，通过对象来调用时就是普通函数。

　　普通函数的创建有：显式声明、匿名定义、new Function() 等三种方式。

　　当通过new来创建一个新对象时，JS底层将新对象的原型链指向了构造函数的原型对象，于是就在新对象和函数对象之间建立了一条原型链，通过新对象可以访问到函数对象原型prototype中的方法和属性。new的详细介绍请参考博客：理解JS中的new运算符

　　5、闭包

　　闭包其实是一个主动执行的代码块，这个代码块的特殊之处是可以永久保存局部变量，但又不污染全局变量，可以形成一个独立的执行过程，因此我们经常用闭包来定义组件。关于闭包的介绍请参考：干货分享：让你分分钟学会JS闭包

　　6、单线程和异步队列

　　setTimeout和setInterval是JS内置的两个定时器，使用很简单，但这两个方法背后的原理却不简单。

　　我们知道，JS是单线程语言，在浏览器中，当JS代码被加载时，浏览器会为其分配一个主线程来执行任务(函数)，主线程会形成一个全局执行环境，执行环境采用栈的方式将待执行任务按顺序依次来执行。

　　但在浏览器中有一些任务是非常耗时的，比如http请求、定时器、事件回调等，为了保证其他任务的执行效率不被影响，JS在执行环境中维护了一个异步队列(也叫工作线程)，并将这些任务放入队列中进行等待，这些任务的执行时机并不确定，只有当主线程的任务执行完成以后，才会去检查异步队列中的任务是否需要开始执行。这就是为什么setTimeout(fn,0) 始终要等到最后执行的原因。关于单线程和异步队列问题请参考：setTimeout(0)

　　7、异步通讯 Ajax技术

　　Ajax是浏览器专门用来和服务器进行交互的异步通讯技术，其核心对象是XMLHttpRequest,通过该对象可以创建一个Ajax请求。为了防止XSS攻击，浏览器对Ajax做了限制，不允许Ajax跨域请求服务器,就是只能访问当前域名下的url。

　　当然，如果确信你的站点不存在跨域的风险，可以在服务端主动开启跨域请求。 也可以直接通过CORS或JSONP来实现。

　　JSONP是利用脚本(script)跨域能力来模拟Ajax请求。

　　CORS是一个W3C标准，全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。 关于CORS的介绍请参考：跨域资源共享 CORS 详解

　　8、DOM对象 document

　　document对象里保存着整个web页面dom结构，在页面上所有的元素最终都会映射为一个dom对象。 document也提供了很多api来查找特定的dom对象，比如getElementById,querySelector等等。

　　9、事件系统 Event

　　事件是用户与页面交互的基础，到目前为止，DOM事件从PC端的 鼠标事件(mouse) 发展到移动端的 触摸事件(touch) 和 手势事件(guesture)

　　由于DOM结构可能会多层嵌套，因此也衍生出了两种事件流：事件捕获和事件冒泡，后者最常用。利用事件冒泡机制可以实现很多功能，比如页面点击统计。关于两种事件流的介绍请参考：事件冒泡和捕获

　　除此之外，在页面初始化、滚动、隐藏、返回等操作时分别内置了onload/onDOMContentLoaded、onscroll、onvisibility和onhashchange等事件，如果想要捕获这些事件，需要通过addEventLisener/attachEvent来进行绑定。

　　10、全局对象 window

　　在JS中，当一段JS代码在浏览器中被加载执行，JS引擎会在内存中构建一个全局执行环境，执行环境的作用是保证所有的函数能按照正确的顺序被执行，而window对象则是这个执行环境中的一个全局对象，window对象中内置了很多操作api和对象，document对象就是其中一个。关于JS执行环境的介绍请参考博客：深入理解JS执行细节

　　Web前端开发的职责是什么

　　1、使用Div+css并结合Javascript负责产品的前端开发和页面制作;

　　2、熟悉W3C标准和各主流浏览器在前端开发中的差异，能熟练运用DIV+CSS，提供针对不同浏览器的前端页面解决方案;

　　3、负责相关产品的需求以及前端程序的实现，提供合理的前端架构;

　　4、与产品、后台开发人员保持良好沟通，能快速理解、消化各方需求，并落实为具体的开发工作;

　　5、了解服务器端的相关工作，在交互体验、产品设计等方面有自己的见解。