前端入门 | 易学教程

前端入门CSS(3)

阅读更多关于前端入门CSS(3)

day60 不透明度 opacity()\ opacity (不透明度) 1. 取值0~1 2. 和rgba()的区别: 1. opacity改变元素\子元素的透明度效果 2. rgba()只改变背景颜色的透明度效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>透明度示例</title> <style> .c1, .c2 { height: 400px; width: 400px; color: red; } .c1{ /*背景和子标签都变淡*/ background-color: black; opacity: 0.5; } .c2{ /*只改变背景颜色透明度*/ background-color: rgba(0,0,0,0.5); } </style> </head> <body> <div class="c1">我是c1类的div标签</div> <div class="c2">我是c2类的div标签</div> </body> </html> 效果： c1中内容根据背景透明度改变而改变，c2只有背景透明度改变。 z-index 1. 数值越大,越靠近你 2. 只能作用于定位过的元素 3. 自定义的模态框示例 <!DOCTYPE html> <html lang="en">

小白必看 web前端程序员分享JavaScript学习方法

阅读更多关于小白必看 web前端程序员分享JavaScript学习方法

JavaScript是前端三要素之一，因为JavaScript，有很多人从入门到放弃了前端。不过作为一个知识点，想要学好JavaScript并不是没有方法，接下来小编就给大家简单分享一下。从第一阶段学习的HTML+CSS知识点，进入到第二阶段的JS范畴，从学习方向和程度上来讲，我明显感觉到了不同。JS更加注重的是逻辑能力，每天上课跟着老师的思路走，把老师教的方法记下来，然后在课下自己去练习，通过练习把老师的方法变成自己的方法，其中这转换的过程，就是精髓所在。在刚开始学习JS的时候，因为不能直观地看到页面，感觉还是很枯燥的。但进入到后半段操作页面的时候，我逐渐发现JS很有意思，尤其是在老师布置完作业之后，独立地把作业敲出来，还是很有成就感的。当然，老师课堂上讲的之知识主要是重点知识和学习方法，不能所有细枝末节的东西都讲到，我们应该在课下自己进行知识的扩展，增强自己的能力。和很多同学一样，有时候老师讲的一些难点能听的懂，但是自己敲的时候却敲不出来，这时候我会去参考一下老师写的，回忆一下老师的思路，完成需求的方法，然后再自己敲，反复地练习，直到自己能敲出来为止。学习中，我们还要多和别人交流，每个人面对同一个需求的时候，解决的办法和思路都是不同的。可能同一个人不同时间针对同一个需求写出的代码都是不同的，所以我们也要多和别人，尤其是交流，彼此分享一下好的学习方法与简洁的解题思路

BugPhobia休息篇章：Beta阶段第IX次Scrum Meeting前奏

阅读更多关于 BugPhobia休息篇章：Beta阶段第IX次Scrum Meeting前奏

特别说明：此次 Scrum Meeting 不计入正式的 Scrum Meeting ，因此此次工作仅为第 IX 次 Scrum Meeting 的前奏，而笔者也首次采用休息篇章作为子命题 0x01 ： Scrum Meeting 基本摘要 Beta 阶段第九次 Scrum Meeting 前奏敏捷开发起始时间 2015/12/23 00 ： 00 A.M. 敏捷开发终止时间 2015/12/26 23 ： 00 P.M. 会议基本内容摘要 ü 近期，由于 12 月 23 日至 12 月 26 日各专业课程均进入了收尾工作而导致软件工程的开发时间大幅度缩减，因此项目经理在与团队的开后端开发组、架构师讨论整体的进度后，决定 BugPhobia 团队暂停整体的开发进度；因此，此阶段的工作重心交付项目经理，其完成的必要的工作包括： n 整理 Beta 阶段的工作进度，同时规划 Beta 阶段后期的敏捷开发进程和分工安排 n 整理 Alpha 阶段、 Beta 阶段前期的文档，对需求分析、功能规格说明书、技术规格说明书进行整理和更新，保证项目本身文档稳步更新至 Beta 阶段版本 n 开始测试工作的布置，其中包括：后端单元测试的自动测试平台、 Django 单元测试的布置和安排、 ReactJS 前端的测试安排工作 n 开始 Beta 阶段文档的准备工作，其中包括： Semantic

web前端开发工程师百度百科

阅读更多关于 web前端开发工程师百度百科

Web 前端开发工程师是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过5年。Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。简介 2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。　　随着Web 2.0概念的普及和W3C组织的推广，网站重构的影响力正以惊人的速度增长。XHTML+CSS布局、DHTML和Ajax像一阵旋风，铺天盖地席卷而来，包括新浪、搜狐、网易、腾讯、淘宝等在内的各种规模的IT企业都对自己的网站进行了重构。为什么它们会对自己的网站进行重构呢？有两个方面的原因：　第一，根据W3C标准进行重构后，可以让前端的代码组织更有序，显著改善网站的性能，还能提高可维护性，对搜索引擎也更友好；第二，重构后的网站能带来更好的用户体验，用XHTML+CSS重新布局后的页面，文件更小，下载速度更快。网站重构的目的仅仅是为了让网页更符合Web标准吗？不是！重构的本质是构建一个前端灵活的MVC框架

目前最火的前端布局方式：less+flex+媒体查询

阅读更多关于目前最火的前端布局方式：less+flex+媒体查询

1. rem基础 rem单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小，rem的基准是相对于html元素的字体大小。比如，根元素（html）设置 font-size=12px ; 非根元素设置width:2rem; 则换成px表示就是24px。 /* 根html 为 12px */ html { font-size : 12px ; } /* 此时 div 的字体大小就是 24px */ div { font-size : 2rem ; } rem的优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好来控制整个页面的元素大小。 2. 媒体查询 2.1 什么是媒体查询媒体查询（Media Query）是CSS3新增的语法。使用 @media查询，可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机、Android手机，平板等设备都用得到媒体查询 2.2 媒体查询语法规范用 @media开头注意@符号 mediatype 媒体类型关键字 and not only media feature 媒体特性必须有小括号包含 /* 语法格式 */ @media mediatype and

知乎上看的文章

阅读更多关于知乎上看的文章

作者：暗灭链接：https://www.zhihu.com/question/26669731/answer/466936797 来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。想了想,还是先画一系列的图,再来解释一下什么是WEB开发. 第一层入门介绍图适合:刚入门互联网,没多少基础知识和专业知识. 为嘛这个图上传的不清楚?算了.我也不知道对于大多数刚刚接触到互联网这个职业的人来说,对于软件是怎么编写的,大概的职业是怎么划分的,理解到这个程度就够了. 整个系统架构可以分成三层(分层是码农必备思维). 第一层,叫展示层,又被称之为前端.展示层这个名字,其实有点不精确,确切的来说,应该叫用户层,或者是输入输出层,或者叫用户交互层. 它的目标很简单,就是接受用户的输入,并将结果反馈给用户. 什么叫做输入呢?键盘,鼠标,声音,图像等等都是输入,最简单的输入就是键盘和鼠标,你们如果看过各种黑客电影,不管是在键盘上啪啪啪,还是在空气中点点点,都是输入. 输出就是展示出来的结果,在屏幕上就是文字动画,在音箱就是声音之类的. 叫展示层的原因,是因为大部分的情况下,都是用户只需要看,少部分才是操作. 所以通常是用展示层来代指用户的输入输出层. 为什么要分层? 其实最早在互联网没有出现之前,分层是一个相对而言,软件设计里的概念.但是在现在,就很简单了

全栈工程师的第一步

阅读更多关于全栈工程师的第一步

全栈工程师的第一步记得在大学到时候，上计算机课觉得最有挑战的，就是做个一个个人主页。相对写个WORD文档、写个C语言程序，个人主页也是最有意思的一个主题。最开始的是用html标签方式来实现，用table来进行各种排版，丑得可见一斑。后面技术发展演进，大量的使用了html+css+js，再往后就衍生了html+css+jquery，一直到现在的各种vue、react群魔乱舞。早起前端写法一直从事后端开发，在刚阿里的两年里，还写了一些spingmvc+velocity的后台页面。主要是满足一些测试或者开发小二常用的后台功能，比如查询订单、查询商品等。页面相对来说比较简单，主要就是一些form组成的表单，然后提交到后端做处理，或处理数据，或返回数据。 springmvc+velocity的实现方式也很简单，后端提供Controller来渲染和接收数据，vm页面用来提供用户视图，包括展示数据和接收用户数据。缺点就是页面和java是在同一个工程的，也就是说前后端是没有分离的。全栈工程师后面阿里2年，就基本做纯后端了，基本上没有接触过前端相关的逻辑。随着业务发展，对前端诉求越来越大，专业的前端已经不能满足需求，而且前端招聘难度也极大，因此要去我们每个人做到一专多能。即后端专业前端能力全面。于是我开始了我写全新前端的历程。以下记录我自己的前端开发心得。首先是新概念，有nodejs

新手在学习web前端过程中会遇到哪些困境

阅读更多关于新手在学习web前端过程中会遇到哪些困境

刚刚学习 web 前端的新手在学习过程中或多或少都会遇到很多问题，下面和小编一起来看看阻挡新手在学习 web 前端过程中的困境都有哪些，希望对正在学习的你能有所帮助。一、入门 web 前端时的一些困境 1 、因一些基础算法、数据结构理论不扎实导致一些编程思维难于理解。比如原型链，如果清楚数据结构中链表结构，那么这个东西不难理解，再比如哈希值，懂得数据结构中哈希表，哈希值也就迎刃而解。 2 、计算机体系结构、操作系统理论、网络理论不扎实导致到后期一些东西难于理解。比如有同学从前端学习入手，后来学习 node 开发，在 I/O , 进程、线程、 IPC 、线程锁方面有些概念就比较难于理解，而导致不能很好得使用 node 的 api 。 3 、前端整体体系架构没有做过深入思考。导致用会用，但不知道为什么用，用另外一个有什么区别。 4 、学习环境中无高手。没有高手能够指导自己进入下一个层次。 5 、有意识但是没有行动我的网盘收集了一堆资料或者一堆视频，然后就没有然后了。二、如何才能快速入门前端 1 、学习东西，自学是一种途径，然而在自学的过程中，很多人处于不知道自己不知道的状态。 2 、另一种是跟着高手，开阔视野，达到知道自己不知道的境界，从而有方向，在短时期内进入到一个新的境界，节约时间成本。来源： https://www.cnblogs.com/coffees/p

【Web前端开发】《零基础入门学习Web开发》（HTML5&CSS3）（小甲鱼）

阅读更多关于【Web前端开发】《零基础入门学习Web开发》（HTML5&CSS3）（小甲鱼）

1 P1:凉凉好像挺厉害的奥？听完了！ 2 P2:HTML是用来描述网页的一种语言官方：超文本标记语言 Hyper Text Markup Language 使用标签来描述网页 < >括起来的就是标签，成双成对开始标签+结束标签 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>第一个程序</title> 5 </head> 6 <body> 7 <h1>Hello world</h1> 8 <p>2020 CS</p> 9 </body> 10 </html> 第一行：声明——由HTML5（最新）编写。声明的作用是帮助编译器去解析你的代码。 html元素：描述所有网页的内容 head元素：所有头部元素的容器 title指定网页的标题 body:包含网页中所有可见的内容 h1:标题的尺寸往下由h1,h2,h3,h4,h5,h6 h1最大 p元素：定义了一个段落，存放文本 P3: 服务器搭建？? 课程案例在线演示：http://demo.fishc.com HTML5速查宝典：http://man.fishc.com/html5 CSS3速查宝典：http://man.fishc.com/css3 扩展阅读：bbs.fishc.com 课堂课后资料阶段考核——项目！！！ img标签——插入一个图片必须设置alt src属性

2020 前端必看 20个最好的前端 Web开发工具

阅读更多关于 2020 前端必看 20个最好的前端 Web开发工具

引言市面上有许多前端开发工具可以加速 Web 开发工作。本文是对一些顶级 Web 开发工具的一次精选汇总，分别介绍了每款工具的关键特性，并已附上下载链接。 1. Novi Builder Novi Builder 是一个拖放式构建器，它对于经验丰富的 Web 开发人员而言是一个不错的选择。它为开发人员提供了访问源代码的权限，并允许开发人员在 Web 设计中进行多项更改。你能用它完全控制你的 Web 项目，并且可以充分利用它的各项功能。尽管这款工具对于初学者来说可能很难入门，但在它的众多优势面前这一不足也就不值一提了。特性：高级代码编辑器附加应用集成多种预制主题拖放界面电商功能支持预览工具下载链接： https://novibuilder.com/ 2. ONE Subscription ONE Subscription 是一款很有用的 Web 开发工具包，包含了众多高质量的数字产品。它提供了大批高品质的部件，可以打造出功能完善的博客、在线商店、登录页面等各种网站。总的来说，它能为你提供数以千计的主题和模板、多种插件和图形元素、附加服务以及其他许多好处。特性：对所有部件提供专业支持定期更新安全性（如果你订阅后尚未从数据库中下载任何内容，则可以在订阅开始后的 14 天内轻松取消订阅）无使用限制的年度许可证很多有用的服务（例如模板定制或安装）下载链接：

订阅前端入门