[非专业前端快速入门套路]任务导向-快速完成前端开发

献给所有被拉去做HTML&CSS&JS的人

本文献给前端小白,用于快速入门,并非深入学习的文章
大神勿喷~
————————————————————————————————

事情是这样的

有一个项目,负责人 “听说“ 我有web相关经验,就把我拉去做前端。
事实上,我只是玩过一丢丢web安全。所以…………………我还是接了

开始干活吧!一开始确实一头雾水,但后来慢慢摸清了门路,写下这篇文章,记录下自己的经历,顺便方便“后人”。

1.首先要了解IDE

我用的是webstorm。

一开始尝试了sublime

个人觉得sublime最大的好处在于

  1. 支持多种语言(C/Py/Js……)
  2. 支持多种OS
  3. 完全免费
  4. 有很多很棒的插件

虽然他很好,但是

  1. 配置麻烦
  2. 缺少成型的连接Sublime和浏览器的控件,调试麻烦

毅然选择了webstorm。
具体使用方法可以百度,网上挺多的

这里附上的教程
http://blog.csdn.net/it_talk/article/details/52448597

关于webstorm你需要知道

  1. 能写前端能写后台
  2. 在chrome浏览器端有可供调试的插件
    可参考 http://blog.csdn.net/sujun10/article/details/54139560
  3. 能调试JS
  4. 先知道这点吧~

2.了解下HTML&CSS&JS的关系

没网上说的那么复杂,对于我们这种任务导向的人来说,你只需要知道这些

  1. HTML写好之后保存为XXXX.html文件,右键选择用浏览器打开就能显示
  2. CSS是给HTML做美化的,能设置排版、字体及一些动画效果
  3. JS是干嘛的——前端写出来的网站要被用户访问,访问的过程其实就是用户找你要数据,然后服务器把这些数据发过去。但是有个问题,HTML语言写出来的东西本身是不会动的。但发过去之后你想改变他咋办? JavaScript是可以操纵HTML和CSS的脚本语言,可以帮助我们根据用户的操作动态修改页面的内容,给用户更好的交互体验
  4. 开发流程——一般先写好HTML,这就相当于盖房子的时候打了地基;之后用JS开发核心功能,相当于把大楼盖起来;最后用CSS对整体做美化,相当于给大楼刷漆做造型

3.得看的懂基本的语法

这个很重要,我踩了坑
我一开始就去找模板了,结果啥都看不懂,强行看,结果……
一开始就要看些基本的语法,这个适用于每一门新的语言。
对于HTML&CSS&JS,就从这看吧,最权威,讲的也很好
http://www.w3school.com.cn/

4.得会用些基本的模板

(1)整体网页的模板

上bootstrap或者是直接百度搜网站模板,下载下来的东西主要包括了HTML&CSS,可能还有些JS

这个时候你应该是能大致看的懂的,如果看不懂,可以百度查查

你会发现整体网站的模板一般是这样的


[非专业前端快速入门套路]任务导向-快速完成前端开发_第1张图片

我这里是从dashboard.html起始的,你的可能是index.html或其他

我们来简单分析下一个HTML页面的架构。

我们在webstorm中新建一个HTML5文件,可以看到是这样的


[非专业前端快速入门套路]任务导向-快速完成前端开发_第2张图片

可以发现,主要分为两大部分: 和

里面一般放要加载的CSS文件,和定义页面标题的代码
我的dashboard里面是这样的


[非专业前端快速入门套路]任务导向-快速完成前端开发_第3张图片

部分一般就是页面的主体了,会有比较多的

(就是定义了额一块区域)

在最后,一般还会有蛮多

(2)酷炫的图表模板

echarts——百度开发的开源图表模板,可以把数据很生动的展示出来
到目前为止已经迭代了2个大版本
2.0 —— http://echarts.baidu.com/echarts2/doc/example.html
3.0 —— http://echarts.baidu.com/
使用方法:在上面找合适的模板,看人家示例代码,网上搜有没有人写该模板使用的博客,一点一点模仿。如果时间多的话也可以研究下echarts的文档,你会发现可以自主设置很多细节。

d3.js——老外开发的,在github上很火,主要是志愿者自己写好放上来给大家用。d3.js本身是一个web可视化的框架,有很多底层的函数,但我们用的话直接用人家写好的例子就好了。
https://github.com/d3/d3/wiki/Gallery
使用方法:如果发现不太容易直接套用的话,建议学一下基础知识。给个链接
http://d3.decembercafe.org/
注意:d3.js的本质就是对HTML的标签及其属性做操作,请务必记住这一点!你在调试的时候,可以在浏览器中(以chrome为例),右击页面选择“检查”,就可以看到d3生成的标签和属性。
d3中有一组非常重要的概念——append/select,具体的可以在网上找,我这里谈一下我的理解

  • append
    就是向页面中添加标签,添加标签的时候可以设置属性

  • select
    选择页面中的标签,可以修改其属性

我的工程中主要是用到了这两个~~

(3)CSS模板-比如好看的按钮,进度条

从这下载吧,良心站
http://www.htmleaf.com/
模仿,看人家调用了哪些CSS文件,拷贝到自己文件夹下,然后调整下路径,看人家调用了哪些class类,也调用,主要是模仿~~

(4)自己修改模板

如果你已经到这个阶段了,那么恭喜你!你已经入门了
我分享下我改模板的经验

非常重要的必须先提的
你要改模板对吧?是不是位置不好看?颜色不好看?这都是CSS的属性问题。这时你需要首先找到定义该属性的文件和对应的代码。不用一点点去找了!!webstorm已经帮你找好了

选择对应的class->右键并选择goto->declaration,如图


[非专业前端快速入门套路]任务导向-快速完成前端开发_第4张图片

这样就会跳转到定义此class的位置,你就可以看到CSS代码啦

改位置
经常会发现下载了一个好看的button模板,但用的时候位置摆放总不对,这个时候我们就得自己去改。
首先需要了解CSS中的几个概念:

  1. location
    location:http://www.w3school.com.cn/cssref/pr_class_position.asp
    其中需要注意:location分为absolute和relative两部分,建议你在里面的“亲自试一试”中体会下两种的区别
    Z-index:可以设置图层的显示层级的,可以用这个属性把一个元素覆盖到另一个元素上面
  2. padding和margin
    padding http://www.w3school.com.cn/cssref/pr_padding.asp

margin http://www.w3school.com.cn/cssref/pr_margin.asp

注意:padding是内边距 ; margin是外边距

应该够用了。

打开chrome的“检查”,看一下要调整的div间关系(只是以div为例)
如果是两个同一级别的div之间的位置调整可以通过设置location属性实现
如果是不同级别的div(大div套小div),则可以通过设置padding和margin完成调整

改颜色
你想调整某个地方的颜色,但不知道调成什么颜色好?
看看这个,人家选好的网页常用的色彩
http://tool.chinaz.com/tools/use

想把某个地方换成特定颜色A,但不知道A的颜色代码是多少?
很简单
23333333先让我笑一会

用QQ——以下来自知乎网友“潘刚”


[非专业前端快速入门套路]任务导向-快速完成前端开发_第5张图片

这里是来源 https://www.zhihu.com/question/20328538

QQ给出来的是RGB,用着不方便?
用这里转换下
http://www.sioe.cn/yingyong/yanse-rgb-16/

今天先这样吧,后面再更

                                                                            2017/4/26

你可能感兴趣的:(入门前端,html,前端,css,入门前端)