前端入门 | 易学教程

web前端入门到实战：CSS项目悬停过渡动画三部曲

阅读更多关于 web前端入门到实战：CSS项目悬停过渡动画三部曲

CSS不一定要写得多么复杂才能实现特殊效果。如下就是三个超级简单的过渡的例子，可能只是几行代码，但是添加到Web应用程序中，却会让它增色不少。如下是我们将在本教程中构建的代码项目设置在这个项目中，我们将把过渡效果应用到一个class为box的元素上面。这个box元素内部是垂直和水平居中的文字内容。HTML结构相当简单： <div class='box'> <p>TEXT</p> </div> CSS代码也一样简单。我们想要使用无衬线字体，并确保div中的段落文本是白色的，可以通过如下代码来实现： body { color: white; font-family: Helvetica, Sans-Serif; } web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）另外，给box元素添加如下CSS属性： .box { width:200px; /* Set the Width of box */ height:50px; /* Set the Height of box */ background:#424242; /* Dark Grey Background color */ transition:all 0.25s ease; /* Transition settings

web前端小白入门教程

阅读更多关于 web前端小白入门教程

一小时学会写页面作为一个懒癌晚期患者，总是习惯找各种简单的解决问题的方法，也习惯性把问题简单化，所以今天想分享给大家简单的 web前端入门方法。既然题目已经定了一个小时那么废话就不多说了，计时开始 1.什么是前端简单来说，前端就是做网页（大神勿喷，本文一切从简） 2.前端技术 html，是首字母缩写，具体意义请百度，大家要记住“t”代表text，ok你们没有想错，text就是文本文件text，好了准备工作做好了，现在开始做网页 3.我们的第一个网页请身边有电脑的小伙伴和我一起开始，在桌面鼠标右击，创建一个txt文件，命名为index把后缀修改为html，可能会跳出一个弹出框点击确定～点击这个文件大部分人应该会在浏览器打开吧，如果是那就对了，然后这个页面可以不关掉接着走下一步 4.添加内容右键点击刚才建立的文件，我们可以直接用记事本打开，ok现在在文档里面输入hello world~刷新刚才用浏览器打开的那个页面~不出意外hello world应该在了 5.页面结构在文档中输入以下代码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> </body></html> 6.代码说明 <!DOCTYPE html>

前端随心记---------HTML5+CSS系列1.0

阅读更多关于前端随心记---------HTML5+CSS系列1.0

HTML+CSS 　　对每一位前端攻城狮来说，HTML和CSS是入门基础，也是码写网页的基础知识！！　　在学习的道路上，我们必须虚心学习前辈们所积累的精华知识，所谓闻道有先后，像走在你前面学习必会有所收获！　　对一位已经踏上了前端的攻城狮，简单地总结一下自己的理解！同时详细可参考官方文档希望对你有所帮助！　　　　你所了解的前端工程师？　　前端工程师是Web前端开发工程师的简称，是随着web发展，细分出来的行业。初期的前端工程师只需要写一些HTML和CSS，在近几年的互联网高速发展中，对前端工程师的要求也越来越高，不仅仅只是前端开发技术，也需要后台的开发技术，简称全栈工程师。　　Web前端开发技术主要包括三个要素：HTML、CSS和 JavaScript ! W3C 标准　　　 W3C( World Wide Web Consortium ) 万维网联盟，创建于 1994 年是 Web 技术领域最具权威和影响力的国际中立性技术标准机构；是专门负责网络标准制定的非赢利组织。制定了结构标准和样式标准； HTML 及相关概念的介绍 HTML 指的是超文本标记语言 (Hyper Text Markup Language) www 万维网的描述性语言。 XHTML 指可扩展超文本标记语言（ Extensible HyperText Markup Language

一文读懂前端技术演进：盘点Web前端20年的技术变迁史

阅读更多关于一文读懂前端技术演进：盘点Web前端20年的技术变迁史

本文原文由作者“司徒正美”发布于公众号“前端你别闹”，即时通讯网收录时有改动，感谢原作者的分享。 1、引言 1990 年，第一个Web浏览器的诞生；1991 年，WWW诞生，这标志着前端技术的开始。在这将近20年的前端发展史中，我们经历了从最早的纯静态页面，到JavaScript跨时代的诞生；从PC端到移动端；从依赖后端到前端可自由打包开发；从早期的网景Navigator浏览器到现在各家浏览器百花齐放…… 我们经历了前端的洪荒时代、 Prototype 时代、jQuery时代、后jQuery时期、三大框架割据时代，这其中均是由国外开发者主导，直到如今的小程序时代，才是中国开发者独创的。这是漫长的技术储备下的成果，最终促成了良好的技术成长收获。期间的前端发展之路，崎岖艰难。（本文同步发布于： http://www.52im.net/thread-2719-1-1.html ） 2、相关文章《小程序技术始于微信？来看看移动端小程序技术的前世今生！》《盘点主流移动端跨平台UI技术：实现原理、技术优劣、横向对比等》《最火移动端跨平台方案盘点：React Native、weex、Flutter 》《快速了解Electron：新一代基于Web的跨平台桌面技术》 3、洪荒时代（1990~1994年）在1990~1994年期间，前端界发生的大事有：WWW（World

前端开发JavaScript入门——JavaScript介绍&基本数据类型

阅读更多关于前端开发JavaScript入门——JavaScript介绍&基本数据类型

　　　　　　　　　　　　　　JavaScript 　　诞生于1995年，它的出现主要是用于处理网页中的前端验证。 • 所谓的前端验证，就是指检查用户输入的内容是否符合一定的规则。 • 比如：用户名的长度，密码的长度，邮箱的格式等。　　JavaScript是由网景公司发明，起初命名为LiveScript，后来由于SUN公司的介入更名为了JavaScript。1996年微软公司在其最新的IE3浏览器中引入了自己对 JavaScript的实现JScript。于是在市面上存在两个版本的JavaScript，一个网景公司的 JavaScript和微软的JScript。 • 为了确保不同的浏览器上运行的JavaScript标准一致，所以几个公司共同定制了JS的标准名命名为ECMAScript。　　　　　　　　　　　　　　JavaScript实现　　我们已经知道ECMAScript是JavaScript标准，所以一般情况下这两个词我们认为是一个意思。 • 但是实际上JavaScript的含义却要更大一些。 • 一个完整的JavaScript实现应该由以下三个部分构成：　　　　　　　　　　　　　　　　　编写第一个javescript页面 alert(""); 控制浏览器弹出一个警告框，括号中填警告框中内容。 document.write("")

第一篇随笔

阅读更多关于第一篇随笔

　　本人目前大三上学期，专业计算机科学与技术，现在2019年11月26日，开始写下第一篇随笔，也为了记录下学习生涯，发现自己总是没总结，今后每周至少两篇，今天就不上代码了。　　简单说明下前两年的大学颓废生活：　　　　学得很渣，就只有数学和体育上过90+，专业课都是水过的，草草了事，底子比较薄，平时宅在宿舍，没什么交际,喜欢过女孩，没脸追，lxl。　　现状学习ing：　　　　安卓android不打算深入下去，因为目前正在尝试微信小程序的开发，但是为了学业，也只能勉强学学，之后会给入门教程，以及实例，还有入门项目。　　　　javaweb，涉及前端和后端，以及mysql，值得庆幸的是，数据库学得还是很扎实的，对于程序员，不会数据库，那不是扯淡吗？？之前暑假强迫自己学习了一下前端，没钱推荐哔哩哔哩哈。有了前端的基础知识后，再去学习后端，自我感觉还是比较的轻松，之后我也会给出前端的样例的，但是我最讨厌前端了，改来改去吗，总是不满意（可能自我要求比较高）。后端：现在基础体系也基本整合了，正在学习SSM框架中，之后详见吧。这门我觉得挺适合大多数的同学，作为入职技能的，女生前端，男生后端，多么完美呀。这里不得不提一下全栈了，这就要看自己的发展吧，反正1+1<2这是必然的，因为交流的成本太高了。　　　　数据挖掘：本来选修课是选择的数据挖挖掘的，然后老师上课跟我讲机器学习？

web前端入门到实战：CSS尺寸单位介绍

阅读更多关于 web前端入门到实战：CSS尺寸单位介绍

前端开发过程中，尺寸单位是我们必须用到的，下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍在这之前，需要先对几个概念进行普及介绍基本概念（以下概念读起来可能有些晦涩，如果看不懂也没关系）像素它不是自然界的物理长度，指基本原色素及其灰度的基本编码。 css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。物理像素它是显示器（电脑、手机屏幕）最小的物理显示单位，物理像素指的是显示器上最小的点。物理像素的大小取决于屏幕。是一个无法改变的属性。设备独立像素我上一张图，你就会理解什么是设备独立像素就是我们开发过程中使用的css中的px 设备像素比（device pixel

web前端入门到实战：CSS奇淫技巧 :视差图像，sticky footer 混合模式等等

阅读更多关于 web前端入门到实战：CSS奇淫技巧 :视差图像，sticky footer 混合模式等等

CSS是一种独特的语言。乍一看，这似乎很简单,但是，某些在理论上看起来很简单的效果在实践中往往不那么明显。在本文中，我将分享一些在大多数CSS教程中不太可能找到的有用技巧。 1. Sticky Footer 这个非常常见的需求,但对于初学者来说可能是个难题。对于大多数项目，不管内容的大小，都希望页脚停留在屏幕的底部—如果页面的内容经过了视图端口，页脚应该进行调整。在CSS3之前，如果不知道脚的确切高度，就很难达到这种效果。虽然我们称它为粘性页脚，但你不能简单地用 position: sticky 来解决这个问题，因为它会阻塞内容。今天，最兼容的解决方案是使用 Flexbox 。主要的做法是在包含页面主要内容的 div 上使用不太知名的 flex-grow 属性，在下面的示例中，我使用的是 main 标签。 flex-grow 控制 flex 项相对于其他 flex 元素填充其容器的数量。当值为 0 时，它不会增长，所以我们需要将它设置为 1 或更多。在下面的示例中，我使用了简写属性 flex: auto ，它将 flex-grow 默认设置为 1 。为了防止任何不必要的行为，我们还可以在 footer 标签中添加 flex-shrink: 0 。 flex-shrink 实际上与 flex-growth 属性相反，控制 flex 元素收缩到适合其容器的大小，将它设置为

web前端入门到实战：利用CSS重置网站的样式

阅读更多关于 web前端入门到实战：利用CSS重置网站的样式

许多前端开发人员都在用 Normalize 为他们的网站设计样式。一些人喜欢在 Normalize.css 中添加一些自己偏好的样式，我也一样。在本文中，我会与你分享我自己的 CSS reset 项目（除了 Normalize.css 之外我还使用它们）。我将 reset 项分为8类： 1.盒子大小 2.删除边距和填充 3.列表 4.表格和按钮 5.图像和嵌入视频 6.表格 7.隐藏属性 8…Noscript 调整盒子大小 box-sizing 属性改变了 CSS 盒子模型的工作方式。它会改变计算 width、 height、 padding、 border 和 margin 的方式。 box-sizing 的默认设置是 content-box。我更喜欢将其改为 border-box，因为这样更容易设置 padding 和 width.。 html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } 删除边距和填充浏览器对不同元素 margin 和 padding 的设置各不相同。当我不了解这些时，默认设置会让我失望。但是我更喜欢通过自己编码设置所有边距和填充。对web前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来，正因为我不是211，985，只是个普通的本科生

我所理解的前端

阅读更多关于我所理解的前端

入坑前端到今天也将近两年半了,这两天突然想到了第一次面试时面试官的一个问题-------你怎样理解前端的工作? 对于当时我一个小白而言完全是胡说一通,词不达意,搞得面试官一脸懵逼,现在想想那可能就叫尬聊吧……时隔两年在不断爬坑中对这个问题有了自己新的认识,今天趁着上午没什么事情,写下这篇博客,想到哪写到哪,谈一谈我所理解的前端。技术方面: 第一阶段(新手村) 一个前端初学者必须所掌握的核心技能HTML,CSS,JavaScript,这三项是前端最底层的技术支持了,如果你看几年前的回答应该还会有一项jquery,但我个人觉得现阶段的前端圈jquery可以不作为必备技能,虽然Jquery对新人很友好,但现在mvvm框架满天飞Vue, Angular,React三分天下,用起来要比直接操作dom的jquery舒服很多,当然在这个阶段是打基础的阶段框架,类库什么的可以往后靠。原生Js永远都是重中之重,只会用框架不懂底层原理永远达不到精通,推荐红宝书Javascript高级程序设计,吃透红宝书打牢基础再去学习其他框架,妈妈就再也不用担心你的学习。接下来还有一项额外的技能PhotoShop,要知道ps可以不用去做,但必须要会,而且在一些小公司里UI只会丢给你一个PSD,没有什么Sketch之类的东西,也没人帮你切图,这些都需要你自己来处理,所以ps是额外的必备技能。第二阶段(副本开启)

订阅前端入门