写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3,其实当你真正学习css动画之后,你会被它的魅力所吸引的,它可以减少代码量.提高性能. 上一篇文章我们已经一起学习了transition 的使用,如果有不了解的同学可以查看我的上一篇文章…

马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3,其实当你真正学习css动画之后,你会被它的魅力所吸引的,它可以减少代码量.提高性能. 上一篇文章我们已经一起学习了transition 的使用,如果有不了解的同学可以查看我的上一篇文章. 话不多…

写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3,其实当你真正学习css动画之后,你会被它的魅力所吸引的,它可以减少代码量.提高性能. 话不多说,马上和我一起去学习今天的主角transition吧! transition 语法 值 描…

写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3,其实当你真正学习css动画之后,你会被它的魅力所吸引的,它可以减少代码量.提高性能. 值此1024程序员佳节之际,我特此推出供同学们学习的动画小案例,这个案例非常简单,但是他可有帮我们…

写在前面 随着前端深入的不断学习,发现数组这个数据结构在前端中有着相当大的存在感,由于我初学前端的时候并没有系统性的学习数组,所以我将通过这篇文章同你一起学习数组,希望我们能一起进步,学会熟练操作数组. 数组基本操作 创建数组 var arr1 = []; //通过字面量的方式创建一个没有元素的空数组 var arr2 = new Array(); //通过构造函数的方式创建一个空数组 var arr3 = new Array(5); //创建一个有五个元素的数组,此时每个数组元素为undefi…

一.背景: CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果. 1.背景色 可以使用 background-color 属性为元素设置背景色.这个属性接受任何合法的颜色值. 例如: p {background-color: gray;} 2.背景图像 要把图像放入背景,需要使用 background-image 属性.background-image 属性的默认值是 none,表示背景上没有放置任何图像.如果需要设置一个背景图像,必须为这个属性设置一个 URL 值: body…

很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确,如有错误或有更好的解法,还请斧正. 前面几题是会很基础,越下越有深度. 附上第一篇:BAT及各大互联网公司2014前端笔试面试题--JavaScript篇 Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 S…

BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇 Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核 Chrome:Blink(基于webkit,Google与Opera Software共同开发) 2.每个HTML文件里开头都有个很重要的东西,Doctype,知道这…

注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5931347.html )作者:wangwen896 整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确,如有错误或有更好的解法,还请斧正. 前面几题是会很基础,越下越有深度. Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefo…

BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇 2014/08/03 · Web前端, 开发 · CSS, HTML, 技术面试 分享到: 188 MongoDB集群之分片技术应用 Hello,移动WEB Linux权限管理之特殊权限 Android高级特效-索引 原文出处: Ico_Coco 的博客(@CHoK__Coco_mAm)   欢迎分享原创到伯乐头条 很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习…

BAT及各大互联网公司2014前端笔试面试题--Html,Css篇   很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确,如有错误或有更好的解法,还请斧正. 前面几题是会很基础,越下越有深度. 附上第一篇:BAT及各大互联网公司2014前端笔试面试题--JavaScript篇 Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别…

CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(content).填充(padding).边界(margin). 边框(border): (3)区 别: IE的content部分把 border 和 padding计算了进去; CSS选择符有哪些?哪些属性可以继承? * 1.id选择器( # myid) 2.类选择器(.myclassname) 3.标签选择器(div, h1, p) 4.相邻选…

某个群友 http://www.cnblogs.com/coco1s/   很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确,如有错误或有更好的解法,还请斧正. 前面几题是会很基础,越下越有深度. 附上第一篇:BAT及各大互联网公司2014前端笔试面试题--JavaScript篇 Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核…

三.JavaScript和CSS篇 JavaScript和CSS也是我们页面中经常用到的内容,对它们的优化也提高网站性能的重要方面:CSS:把样式表置于顶部避免使用CSS表达式(Expression)使用外部JavaScript和CSS削减JavaScript和CSS用<link>代替@import避免使用滤镜 JavaScript 把脚本置于页面底部使用外部JavaScript和CSS削减JavaScript和CSS剔除重复脚本减少DOM访问开发智能事件处理程序 17.把样式表置于顶部   …

Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核 Chrome:Blink(基于webkit,Google与Opera Software共同开发) 2.每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? 答案:<!DOCTYPE> 声明位于文档中的最前…

相关文章 简书原文:https://www.jianshu.com/p/e87bfd27ff59 我的前端规范——开篇:http://www.cnblogs.com/shcrk/p/9271561.html 我的前端规范——HTML篇:http://www.cnblogs.com/shcrk/p/9271613.html 我的前端规范——CSS篇:http://www.cnblogs.com/shcrk/p/9271608.html 我的前端规范——JavaScript篇:http://www.…

二.CSS部分 1.解释一下CSS的盒子模型? 回答一:a.标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度b.网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性.c.这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式.CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型.…

1. CSS 优先级算法如何计算?2.如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?3.用纯CSS创建一个三角形的原理是什么?4. 如何解决inline-block元素的空白间距(i与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?5.CSS强制文本在一行内显示若有多余字符则使用省略号表示6.css中伪类属性修改a标签的样式:7. HTML dl 标签8. 置换元素与不可置换元素9.HTML的Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?10.…

css盒子模型 在W3C模型中: 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right 在IE模型中: 总宽度 = margin-left + width + margin-right 在CSS3中引入了box-sizing属性, 它可以允许改变默认的CSS盒模型对元素宽高的计算方式. 共包括两个选项: content-box:标准盒模型,CSS定义…

web前端庞大而复杂的知识体系的组成:html.css和 javascript 二.css 1.CSS选择器 CSS选择器即通过某种规则来匹配相应的标签,并为其设置CSS样式,常用的有类选择器.标签选择器.ID选择器.后代选择器.群组选择器.伪类选择器(before/after).兄弟选择器(+~).属性选择器等等. 2.CSS Reset HTML标签在不设置任何样式的情况下,也会有一个默认的CSS样式,而不同内核浏览器对于这个默认值的设置则不尽相同,这样可能会导致同一套代码在不同浏览器上的显…

温故而知新,保持空杯心态 HTML 和 CSS 你做的页面在哪些浏览器测试过?这些浏览器的内核分别是什么 浏览器名称 内核 IE trident Firefox(火狐) gecko Safari webkit Opera 以前是 presto ,现在已改用 Google Chrome 的 Blink 内核 Chrome(谷歌) Blink(基于 webkit,Google 与 Opera Software 共同开发) 每个 HTML 文件里开头都有个重要的东西, Doctype,知道这个是干什么…

css概述 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化. CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力.   一 css的四种引入方式 1.行内式           行内式是在标记的style属性中设定CS…

1. 行内元素和块级元素有哪些? 行内元素: 123456789101112131415161718192021222324252627 <a>     //标签可定义锚   <abbr>     //表示一个缩写形式   <acronym>     //定义只取首字母缩写   <b>     //字体加粗   <bdo>     //可覆盖默认的文本方向   <big>     //大号字体加粗   <br>     /…

合理的避免使用ID 一般情况下ID不应该被应用于样式. ID的样式不能被复用并且每个页面中你只能使用一次ID. 使用ID唯一有效的是确定网页或整个站点中的位置. 尽管如此,你应该始终考虑使用class,而不是id,除非只使用一次 另一个反对使用ID的观点是含有ID选择器权重很高. CSS选择器中避免标签名 当构建选择器时应该使用清晰, 准确和有语义的class(类)名.不要使用标签选择器. 如果你只关心你的class(类)名 ,而不是你的代码元素,这样会更容易维护. 如果你只使用具有实际意义的c…

英语是渣渣,想学英语,又不想花钱报培训班.看不懂的文章,还是翻译一下留着自己看吧. 引自   :  https://github.com/bendc/frontend-guidelines HTML 语义 HTML5提供了语义元素的目的是精确描述的内容很多.确保你的词汇丰富的效益. <!-- bad --> <div id="main"> <div class="article"> <div class="head…

原文链接: http://lunax.info/archives/3099.html Web 前端优化最佳实践之 JavaScript 篇,这部分有 6 条规则,和 CSS 篇 重复的有几条.前端优化最佳实践,最重要的还是”实践”,要理解这东西容易得很,关键是要去”实践”,去”执行”,去”反馈”,去获取受益. 1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom) 当一个脚本在下载的时候,浏览器干不了其它的事儿(串行了).所以,把它扔到最后面去处理.对于一些…

紧接着HTML篇的CSS篇开啦,老铁们快来围观... 1.介绍一下标准的CSS盒子模型?低版本IE的盒子模型有什么不同? 1>有两种:IE盒子模型      W3C盒子模型 2>盒模型:内容(content),填充或补白(padding),边界(margin) 边框(border) 3>区别:IE的content部分把border和padding计算了进去 2>CSS的选择符有哪些?哪些属性可以继承? 选择符: 1.id选择器(#wja) 2.类选择器(.wja) 3.标签选择器:…

好程序员web前端分享HTML基础篇,最近遇到很多新手,都会问,如果要学web前端开发,需要学什么?难不难学啊?多久能入门之类的问题?那么今天好程序员就先来给大家分享一下web前端学习路线:HTML基础 学习目标 1.本专业介绍.HTML相关概念,HTML发展历史 2.WEB标准,W3C/WHATWG/ECMA相关概念 3.相关软件的应用以及站点的创建 4.HTML基本结构和HTML语法 5.HTML常用标记 一.本专业介绍.HTML相关概念,HTML发展历史 本专业介绍 移动前端/WEB前端…

webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法.(本篇中的参数配置及使用方式均基于webpack4.0版本) 一. CSS文件基本处理需求 假设项目中的CSS文件均采用预编译语言编写,那么在打包中需要处理的基本问题包括: 预编译语言转换 样式文件挂载方式选择 代码优化(合并及压缩) 去除或保留指定格式的注释 资源定…

HTML篇 使用语义化标签<strong><fieldset><legend><ul>等等,少用<div><span> 判断网页标签语义化是否良好的方法:去掉样式,看看网页结构是否依然有序. 当页面内标签无法满足设计时,才会适当添加div和span 少用纯样式标签b font u等,改用strong em等 即可以用div又可以用p时,尽量使用p CSS篇 CSS结构 一般分为base common page三个层次. base层:提…