提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
前端的发展很快,很多如PS、Sketch中的插件以及PxCook都是前端开发的,功能强大完全不输原生。不过想来作为设计的你也不会这么难为自己。
我们今天来继续有意思且能看得懂的代码。
上几篇有说到前端包含HTML、CSS、JS,其中HTML相当于矩形工具或者文字工具所做的一个简单图层(只有初始的模样),而CSS就如图层样式、混合选项、滤镜等的增效操作,js类似PS中的动作、批处理等效率操作。
一般静态的项目结构如下图,我们也会按照以下结构来分解。
HTML
一个最简单的HTML结构如下图:
它由一些必须的英文单词组成,有些你认识,不认识的多数是缩写。如上图,我们逐行来解释一下:
其他常用标签中闭合标签有:div、p、a、span、header、section、table、canvas、h1-h6、ul、li、footer等,篇幅限制不做具体解释了,可去w3school去细看。
以上标签中有块级元素「div、p、header、section、h1-h6」和行内元素「a、span、strong、i」等区分,块级元素各自独立占据一行,类似PS中图层面板中的图层,一般一行只能显示一个图层,而行内元素是在横排一行显示,类似PS图层面板中的图层加了蒙版,一行有多个元素。不过html中的行内元素和块级元素是可以互相转化。
块级元素
块级元素转化为行内元素
CSS
css不像html有基础代码,css可以是html中的一段代码,也可以是一个独立的css文件(如style.css)并且初始代码可以为空。上面html的例子中的绿色和黄色,以及宽高大小等都是由css去控制。
css的规则一个属性对应一个值,具体到写法规则由一下两种:
推荐的写法是第一种且引用独立css文件,js也是类似,提倡独立引用,如下图的html中引入:
css的属性和值写法的规则了解之后,我们可以来一个文字描述题,比如,设计师做了一个黑色背景,垂直左右居中一个单词“PS”,PS的字号是30px,白色。
那么接着上面的例子就可以在style.css文件中输入以下代码:
css的属性非常多,本篇不做深入,可去 css.doyoe.com 去看文档。
css目前已经发展到基本稳定的css3,拥有很多的新属性,为此也产生了很多效率工具,如sass、less、postcss等,让css有了逻辑和继承的用法,但同时也让css变得复杂了,为了方便理解我们按照css的写法讲解。
JavaScript
牛逼的技术都有小名,Photoshop的小名叫PS,javascript的小名叫js,小名更易传播。但JS比PS难很多了,首先就不是可视化界面,全英文,通常大家比较晕前端就是因为JS这个复杂的技术。
html和css的写法都很固定,但是js除了基本语法规则之外,最难的是逻辑和功能实现。这里我们以jquery库的方法来讲解,简单很多,虽然已经不那么流行了。有小伙伴问过jquery与js的关系,就如现在流行的vue或者react一样,他们都是基于js去实现的操作框架,定义了很多方法和功能,引入框架之后,除了基本的语法规则遵循js,其他都是按照框架定义的方法去书写代码了。
比如我们还看上例,现在需求是:点击PS之后,把PS修改成PhotoShop,其他样式不变。
上图简单解释一下:$(function(){ })是jquery的启动函数,为了保证良好的体验一般都会把执行代码放入其内部,比如这个点击事件“click”。
这个点击事件依次解释为先获取PS的外层元素“p”标签,然后执行点击事件click,function内部的即为点击之后要做的事,这里是修改文字为PhotoShop。
这里新增了一个关键字:事件。除了点击“click”事件,常见的事件有:移动鼠标“onmouseover”、移开鼠标“onmouseout”、浏览器已完成页面的加载“onload”、元素改变“onchange”,在js中使用的时候去掉对应事件的on即可。
更改页面文字也比较常见,如现在需要点击之后增加一串文件,原文字还保留。
本文介绍了一些基础的规则和代码,例子的代码编辑工具为sublime text 3,推荐大家体验代码的时候使用HBuilder(代码提示全且预览也方便),html的预览比较简单,直接点击或者拖放到浏览器里即可。因为设计师更关注的是页面显示和动效部分,所以下文会着重讲css3动画以及响应式布局等。
PS:本系列的前端开发部分快结束了,欢迎关注公众号「全栈设计邦」一起学习交流。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册