[非专业前端快速入门套路]任务导向-快速完成前端开发
来源:互联网 发布:设计画图软件 编辑:程序博客网 时间:2024/05/22 09:46
献给所有被拉去做HTML&CSS&JS的人
本文献给前端小白,用于快速入门,并非深入学习的文章
大神勿喷~
————————————————————————————————
事情是这样的
有一个项目,负责人 “听说“ 我有web相关经验,就把我拉去做前端。
事实上,我只是玩过一丢丢web安全。所以…………………我还是接了
开始干活吧!一开始确实一头雾水,但后来慢慢摸清了门路,写下这篇文章,记录下自己的经历,顺便方便“后人”。
1.首先要了解IDE
我用的是webstorm。
一开始尝试了sublime
个人觉得sublime最大的好处在于
- 支持多种语言(C/Py/Js……)
- 支持多种OS
- 完全免费
- 有很多很棒的插件
- …
虽然他很好,但是
- 配置麻烦
- 缺少成型的连接Sublime和浏览器的控件,调试麻烦
毅然选择了webstorm。
具体使用方法可以百度,网上挺多的
这里附上的教程
http://blog.csdn.net/it_talk/article/details/52448597
关于webstorm你需要知道
- 能写前端能写后台
- 在chrome浏览器端有可供调试的插件
可参考 http://blog.csdn.net/sujun10/article/details/54139560 - 能调试JS
- 先知道这点吧~
2.了解下HTML&CSS&JS的关系
没网上说的那么复杂,对于我们这种任务导向的人来说,你只需要知道这些
- HTML写好之后保存为XXXX.html文件,右键选择用浏览器打开就能显示
- CSS是给HTML做美化的,能设置排版、字体及一些动画效果
- JS是干嘛的——前端写出来的网站要被用户访问,访问的过程其实就是用户找你要数据,然后服务器把这些数据发过去。但是有个问题,HTML语言写出来的东西本身是不会动的。但发过去之后你想改变他咋办? JavaScript是可以操纵HTML和CSS的脚本语言,可以帮助我们根据用户的操作动态修改页面的内容,给用户更好的交互体验
- 开发流程——一般先写好HTML,这就相当于盖房子的时候打了地基;之后用JS开发核心功能,相当于把大楼盖起来;最后用CSS对整体做美化,相当于给大楼刷漆做造型
3.得看的懂基本的语法
这个很重要,我踩了坑
我一开始就去找模板了,结果啥都看不懂,强行看,结果……
一开始就要看些基本的语法,这个适用于每一门新的语言。
对于HTML&CSS&JS,就从这看吧,最权威,讲的也很好
http://www.w3school.com.cn/
4.得会用些基本的模板
(1)整体网页的模板
上bootstrap或者是直接百度搜网站模板,下载下来的东西主要包括了HTML&CSS,可能还有些JS
这个时候你应该是能大致看的懂的,如果看不懂,可以百度查查
你会发现整体网站的模板一般是这样的
我这里是从dashboard.html起始的,你的可能是index.html或其他
我们来简单分析下一个HTML页面的架构。
我们在webstorm中新建一个HTML5文件,可以看到是这样的
可以发现,主要分为两大部分: 和
里面一般放要加载的CSS文件,和定义页面标题的代码
我的dashboard里面是这样的
部分一般就是页面的主体了,会有比较多的
在最后,一般还会有蛮多
(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,如图
这样就会跳转到定义此class的位置,你就可以看到CSS代码啦
改位置
经常会发现下载了一个好看的button模板,但用的时候位置摆放总不对,这个时候我们就得自己去改。
首先需要了解CSS中的几个概念:
- location
location:http://www.w3school.com.cn/cssref/pr_class_position.asp
其中需要注意:location分为absolute和relative两部分,建议你在里面的“亲自试一试”中体会下两种的区别
Z-index:可以设置图层的显示层级的,可以用这个属性把一个元素覆盖到另一个元素上面 - 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——以下来自知乎网友“潘刚”
这里是来源 https://www.zhihu.com/question/20328538
QQ给出来的是RGB,用着不方便?
用这里转换下
http://www.sioe.cn/yingyong/yanse-rgb-16/
今天先这样吧,后面再更
2017/4/26
- [非专业前端快速入门套路]任务导向-快速完成前端开发
- Django快速开发web前端
- WEB前端开发快速入门教程
- MVC5开发前端框架angularJS快速入门(一)
- MVC5开发前端框架AngularJS快速入门之Controller
- MVC5开发前端框架AngularJS快速入门之Service
- MVC5开发前端框架AngularJS快速入门之Service
- Web 前端开发的包管理工具 bower 快速入门
- MVC5开发前端框架angularJS快速入门(一)
- 如何快速入门前端?附资料下载
- H5前端性能测试快速入门
- H5前端性能测试快速入门
- it-前端--bootstrap30篇--快速入门
- H5前端性能测试快速入门
- 前端Photoshop切图快速入门
- 快速完成兼职外包开发任务
- WEB前端交互快速开发指南
- 国产前端框架,不轻不重适合快速开发
- lua socket
- mdev机制(二)————在Linux内核中的实现
- bootstrap之 carousel.js轮播插件源码分析
- 使用pandas的DataFrame的plot方法绘制图像
- java对象在jvm中的存储
- [非专业前端快速入门套路]任务导向-快速完成前端开发
- Java利用BlockingQueue实现生产者和消费者模式
- [ZJOI2015] 诸神眷顾的幻想乡
- 【2017.04.25】蘑菇街一面面经
- BST 二叉搜索树 (动态建树与静态建树)
- Spring Boot Validator框架
- 面试题收集——Java基础部分
- 如何写读书心得
- spring源码-5-aop动态代理