HTML5|CSS3

基础知识HTML5、CSS3以及在PC和H5页面的适配和兼容

noopener和noreferrer

前端学堂 发布于 2019-03-25

ESLint的确是个好东西,在使用airbnb的JavaScript语法校验工具时,如下的<a>链接标签报出了安全错误:

阅读(229)赞 (2)

Shadow DOM简单了解

11

前端学堂 发布于 2019-03-09

你有好奇过这个问题吗,为什么只用video标签包裹着source标签,就可以完成一系列视频功能:播放/暂停按钮、进度条、视频时间显示、音量控制等等?既然 DOM [...]

阅读(109)赞 (4)

前端入门学习案例1 – 致敬卓别林

1

前端学堂 发布于 2018-12-04

实现效果:   要求: 1. 用html+css实现整体效果(致敬卓别林) 2. Hover到Laughter上是,展示其他文案 3. 点击中间的小胡子,帽子会有个[...]

阅读(208)赞 (0)

实现路径动画SMIL或offset-path和canvas

2

前端学堂 发布于 2018-11-27

路径动画在增强用户体验过方面还是挺有用的。当然你也可以用个gif图来实现,gif是万能的,但是前提是一定要满足业务对页面性能的要求。我们这里主要介绍的[...]

阅读(303)赞 (1)

高性能CSS动画

8

前端学堂 发布于 2018-11-27

CSS Animation是实现Web Animation方法之一,其主要通过@keyframes和animation-*或者transition来实现一些Web动效。不过今天我们聊的不是怎么制作Web动画,[...]

阅读(207)赞 (1)

JS和CSS使用的一些小技巧和问题

2

前端学堂 发布于 2018-10-12

定制间隔线 需要上面这样一条虚线,怎么搞? 方法一: border-top: 1px dashed #eee; 方法二: //基于渐变 .dash { height: 1px; [...]

阅读(758)赞 (2)

HTML元素嵌套约束

3

前端学堂 发布于 2018-09-08

块级元素特点: ①总是在新行上开始,占据一整行(很霸道); ②高度,行高以及外边距和内边距都可控制; ③宽带始终是与浏览器宽度一样,与内容无关; [...]

阅读(352)赞 (0)

css基线与行高关系

18

前端学堂 发布于 2018-04-09

一、基本概念 1、基线、底线、顶线、中线 注意:基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿。 2、内容区 内容区[...]

阅读(627)赞 (0)

基于rem方案实现自适应布局

6

前端学堂 发布于 2018-04-02

rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。本文讲的是如何使用rem实现自适应。rem这是个[...]

阅读(611)赞 (0)

每日一击:z-index与translateZ

1

前端学堂 发布于 2018-01-03

我们在写样式的时候,经常会用到 transform: translate3d(0px, 0px, 0px),据说这个还能开启浏览器动画硬件加速。但是你知道吗,这里面包含了一个坑,那就[...]

阅读(717)赞 (0)