前端
前端老司机
上车么?小老弟
展开
-
自学了一年多的web前端,可是面试却一次都没过,应该怎么办?
web前端学习起来相对容易些,自学了一年多时间已经不短了,如果面试过很多次没有一次成功需要反思自己,梳理自己自学过程中有哪些问题,自学需要抓住四个关键点:1.学的东西是不是自己感兴趣,还是看着别人学自己也跟着学2.自学需要制定计划,不能走到哪算哪,完成不了就要有惩罚3.自学需要知道遇到问题如何去解决,学会在网络上寻找答案4.自学要知道如何找到实践项目,并且要亲自动手去弄要完成这四个关键...原创 2019-06-27 21:05:30 · 5643 阅读 · 1 评论 -
前端基础入门三(CSS总结篇——思维导图)
总结CSS学习路线原创 2019-06-05 21:18:03 · 404 阅读 · 0 评论 -
前端基础入门一(HTML)
学习大纲了解常用浏览器掌握WEB标准理解标签语义化掌握常用的排版标签掌握常用的文本格式化图像链接等标签掌握三种列表标签掌握表格标签掌握表格标签掌握表单标签自己是个做了几年开发的老码农,希望本文对你有用! 这里推荐一下我的前端学习交流圈:767273102 ,里面都是学习前端的,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目...原创 2019-06-05 21:06:00 · 476 阅读 · 0 评论 -
前端开发入门到实战:HTML5 video视频播放
一、下面播报一则新闻Chrome 70已经原生支持HTML5 <video>播放时候Picture-in-Picture,也就是俗称的画中画技术,也就是很多视频网站看评论时候,播放视频变小挂在右下角的这种交互技术。我一瞅自己的Chrome浏览器,正好就是Chrome 70,体验了一番,挺有意思的,值得介绍下,以后估计用得着。二、先看画中画实例demo点击页面的切换按...原创 2019-05-28 16:19:57 · 7111 阅读 · 1 评论 -
前端开发入门到实战:纯CSS实现数据上报和HTML验证
一、纯CSS实现数据上报举个例子,要跟踪并统计某个按钮的点击事件:.button-1:active::after { content: url(./pixel.gif?action=click&id=button1); display: none;}.button-2:active::after { content: url(./pixel.gif?act...原创 2019-05-28 16:20:01 · 270 阅读 · 0 评论 -
前端字体截取技术,做炫酷网站再也不用怕中文字体数据量大啦!【实战】
众所周知,相对于英文字体,中文字体天生是“庞然大物”。英文字体两三百KB已经很大了,而中文字体几MB十几MB都算小的。一方面,中文字体包含的字形数量极多,动辄数以千计甚至万计,而英文字体则只需包含几十个基本字符和符号,哪怕支持多种语言及字符变体,容量达到三千多个字形已经算非常庞大的了。另一方面,中文字形的曲折变化复杂度高,在基于轮廓的矢量字体设计中,用于控制中文字形曲线的控制点普遍比英文更多,因而...原创 2019-06-13 20:30:14 · 936 阅读 · 0 评论 -
前端开发入门到实战:六种组织CSS的方式
OOCSSOOCSS 意为面向对象的CSS。这种方法有两种主要 观点:结构与设计分离容器和内容分离使用这套结构,开发者能得到可以在不同地方使用的一般类。在这一步,会存在两点(通常就好和坏):好: 通过重复利用减少代码量 (DRY原则)。坏: 组合使用。当你改变一个特定元素的样式, 你需要改变的很有可能不仅仅是CSS(因为大多是类都是公共的),而且还会添加新的类。...原创 2019-06-04 21:59:44 · 529 阅读 · 0 评论 -
html-div和span元素的用法简单介绍
简单介绍一下div元素和span元素的用法,这里对于它们的细节不做介绍,这里所要介绍的是在何种场合应该选择何种元素,希望能够对初学者有所帮助。一.div元素:首先它是一个块级元素,当然也可以转换为内联元素。它所使用的场合一般是页面的结构布局,例如网页左中右区域的划分,或者新闻版块的划分等等,也就是说它一般使用在较"大"的层面上。二.span元素:它是一个内联元素,当然也可以转换为块级元素...原创 2019-06-15 22:00:35 · 1028 阅读 · 0 评论 -
善用CSS伪类,不用JS也能做出选项卡功能
善用CSS伪类,不用JS也能做出选项卡功能先看看Demo:讲到选项卡(Tabs)功能时,大多会想到用JavaScript去做,像知名的前端框架:Bootstrap所提供的Tab元件,就是用jQuery实现的(其实网络上有很多用jQuery开发的Tab);但其实不用jQuery或JavaScript技术,就能实现高效能且易维护的Tabs元件,让我们来看看是怎么办到的:规划HTML结构通常...原创 2019-05-23 17:42:42 · 269 阅读 · 0 评论 -
前端开发入门到实战:CSS中字体单位:px、em、rem和%
对于绘图和印刷而言,“单位”相当重要,然而在网页排版里,单位也是同样具有重要性,在CSS3普及以来,更支持了一些方便好用的单位(px、em、rem…等),这篇文章将整理这些常用的CSS单位,也帮助自己未来在使用上能更加得心应手。“网页”和“印刷”的单位若要把单位做区隔,最简单可以分为“网页”和“印刷”两大类,通常对于CSS来说只会应用到网页的样式,毕竟真正要做印刷,还是会倾向透过排版软件来进行...原创 2019-05-25 21:50:47 · 694 阅读 · 0 评论 -
强大的CSS: 使用“变量种子计数器”扩展动画更多可能性
一、不是所有CSS属性都能动画经常和CSS打交道的人肯定都知道,不是所有的CSS属性都能使用animation属性实现动画效果,最典型的例子就是background-image渐变。一个典型的线性渐变是由角度,颜色和位置组成,例如:.gradient { background-image: linear-gradient(45deg, red 50%, blue 50%);}...原创 2019-05-21 21:29:59 · 235 阅读 · 0 评论 -
强大的CSS:文字下波浪线动画效果
之前有至少5个人在评论中询问我文章中链接hover时候波浪下划线动画是怎么实现的,类似下图gif示意:这里就介绍下是如何实现的。有两种实现方法,各有优劣。一、使用径向渐变纯CSS实现就是使用径向渐变绘制我们的波浪线效果,一个波浪线循环段是有一个朝上的半个圆弧和一个朝下的半个圆弧组合而成的。所以,我们只要使用径向渐变绘制圆弧,再通过background-position控制两个圆弧的位...原创 2019-05-21 21:29:56 · 1824 阅读 · 0 评论 -
强大的CSS:滤镜和混合模式处理的图片如何上传下载?
一、使用CSS滤镜和混合模式在线PS使用CSS滤镜和混合模式可以实现各种各样的图像处理效果,内置众多图像处理效果,部分效果示意如下缩略图:进入demo页面你也可以点击这里的按钮,更换你本地的素材,查看对应的图像效果:呈现的效果虽好,但是也带来另外一个问题,虽然视觉上是已经处理后的图片,但是如果我们右键-图片另存为,会发现还是原图。如果用户觉得某个图片处理后的效果很棒,想要保存到自己的本...原创 2019-05-21 21:29:54 · 249 阅读 · 0 评论 -
强大的CSS:实现平行四边形布局效果
如何实现下图所示的平行四边形布局效果?一、skewX的局限一提到平行四边形,条件反射般的就会想起CSS transform中的skew()/skewX()/skewY()方法,可以让元素斜切,从而实现平行四边形效果HTML如下:<div class="input-x"> <input class="input" placeholder="您的姓名">&l...原创 2019-05-21 21:29:53 · 1238 阅读 · 0 评论 -
强大的CSS:scroll-snap滚动事件停止及元素位置检测
一、Scroll Snap是前端必备技能CSS Scroll Snap是个非常好用的特性,可以让网页容器滚动停止的时候,无需任何JS代码的参与,浏览器可以自动平滑定位到指定元素的指定位置。类似幻灯片广告效果就可以纯CSS实现。而且CSS Scroll Snap的兼容性非常好,移动端几乎可以放心使用。二、源自实际项目的scroll-snap场景今天下午在实现一个功能需求的时候,正好遇到一个...原创 2019-05-21 21:29:50 · 558 阅读 · 0 评论 -
强大的CSS:focus-visible伪类真的太6了!
一、快速了解CSS :focus-visible伪类:focus-visible伪类是非常年轻的一个伪类,目前仅Chrome浏览器标准支持,但足够了。如果你是一个深入用户体验的开发者,这个伪类会非常有用。:focus-visible伪类应用的场景是:元素聚焦,同时聚焦轮廓浏览器认为应该显示。是不是很拗口?规范就是这么定义的。:focus-visible的规范并没有强行约束匹配逻辑,而是交给了...原创 2019-05-22 21:04:53 · 1452 阅读 · 0 评论 -
强大的CSS:var变量的局部作用域(继承)特性
一、CSS变量非全局最近做项目,发现CSS变量一个有意思的特性,那就是变量作用域非全局。举个例子,如下HTML和CSS:<div class="box"> <div class="a">测试a</div> <div class="b">测试b</div> <div class="c">测试c<...原创 2019-05-22 21:04:55 · 655 阅读 · 0 评论 -
前端开发入门到实战:css 定位布局
文档流:文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列。块元素占一行,行内元素在一行之内从左到在排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置。关于定位:可以使用css的position属性来设置元素的定位类型,position设置项如下:(1)relative 生成相对定位元素,元素所占据的文档流的位置保留,元素本身相对自身原位置进行偏移。...原创 2019-05-27 20:39:54 · 200 阅读 · 0 评论 -
前端开发入门到实战:CSS 外边距(margin)重叠及防止方法
两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界,则在最大的正边界中减去绝对值最大的负边界。如果没有正边界,则从零中减去绝对值最大的负边界。注意:相邻的盒子可能并非是由父子关系或同胞关系的元素生成。但是边界的重叠也有例外情况:1、水平边距永远不会重合。2、在规范文档中,2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方...原创 2019-05-27 20:40:02 · 211 阅读 · 0 评论 -
前端开发入门到实战:css3常用动画+动画库
一、animates.cssanimate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库。包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡出淡出效果,如果你想快速的整合各种CSS3动画特效的话,使用它即可方便的实现。查看演示:https://daneden.github.io/animate.css/ github地址:...原创 2019-05-27 20:40:11 · 408 阅读 · 0 评论 -
强大的CSS:图形绘制合集,方便你我!
以下这些造型简单的图形都是纯CSS外加一个HTML标签实现的,不少实现以前我介绍过,或者你也知道,但是有些相信你没见过。1. 正方形实时渲染效果如下:相关CSS代码:#square { width: 100px; height: 100px; background: red;}2. 长方形效果:相关CSS代码:#rectangle { width: 200px; ...原创 2019-05-22 21:04:58 · 287 阅读 · 0 评论