HTML、CSS
文章平均质量分 86
HTML、CSS系列
Vam的金豆之路
开源 JavaScript 库 Strve.js 作者
展开
-
页面的回流与重绘
页面呈现的具体过程Step1浏览器把获取到的HTML代码解析成1个DOM树,HTML中的每个tag都是DOM树中的1个节点,根节点就是我们常用的document对象。DOM树里包含了所有HTML标签,包括使用了display:none隐藏的元素,还有用JS动态添加的元素等。Step2浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体(CSSOM树),在解析的过程中会去掉浏览器不能识别的样式,比如IE会去掉-moz开头的样式,而FF会去掉_开头的样式。Step3DOM树和样式结构体(原创 2021-05-16 00:26:22 · 5735 阅读 · 0 评论 -
你会用css写一个加载动画吗?
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp...原创 2020-04-21 22:48:11 · 2448 阅读 · 0 评论 -
CSS之纪念日主题网页变灰
你好,我是Vam的金豆之路,可以叫我豆哥。2019年年度博客之星、技术领域博客专家。主要领域:前端开发。我的微信是 maomin9761,有什么疑问可以加我哦,自己创建了一个微信技术交流群,可以加我邀请你一起交流学习。最后自己也创建了一个微信公众号,里面的文章是我自己精挑细选的文章,主要介绍各种IT新技术。欢迎关注哦,微信搜索:臻美IT,等你来。欢迎阅读本博文,本博文主要讲述【CSS之纪...原创 2020-04-04 17:25:34 · 2925 阅读 · 0 评论 -
css写一个原生switch开关按钮
你好,我是Vam的金豆之路,可以叫我豆哥。2019年年度博客之星、技术领域博客专家。主要领域:前端开发。我的微信是 maomin9761,有什么疑问可以加我哦,自己创建了一个微信技术交流群,可以加我邀请你一起交流学习。最后自己也创建了一个微信公众号,里面的文章是我自己精挑细选的文章,主要介绍各种IT新技术。欢迎关注哦,微信搜索:臻美IT,等你来。欢迎阅读本博文,本博文主要讲述【】,文字通...原创 2020-03-28 16:58:36 · 4342 阅读 · 1 评论 -
用svg画一个梯形角标
活不多说,直接上代码。 <div class="status0" > <svg class="rect" width="120px" height="200px"> <polygon points="50,0 100,0 125,30 125,80 " class="pp"/> </svg...原创 2019-12-21 10:17:55 · 17482 阅读 · 3 评论 -
移动端video兼容你需要知道的几点
<video :src="item" loop poster="http://image3.xyzs.com/upload/e1/7c/1440551648673169/20150827/144067879418296_0.jpg" webkit-playsinline="true" x5-playsinline="...原创 2019-09-11 16:31:39 · 9842 阅读 · 3 评论 -
关于CSS预处理器less的使用(未完待续)
简单明了,直接上教程:下面我们先大体了解些我接下来讲的less的功能特性:属性嵌套混合方法继承导入函数其他1、属性(1)、值变量@dividerColor:#000; div{ background: @dividerColor;} (2)、选择器变量@footer: .footer;@{footer}{}(3)、属性变量@color:co...原创 2019-07-01 15:52:43 · 3358 阅读 · 0 评论 -
你知道css圣杯布局与双飞翼布局吗?
圣杯布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...原创 2019-05-28 10:23:49 · 570 阅读 · 1 评论 -
让我们来实现一个css三级导航
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title></title> <style type="text/css"> *{ margin: 0px; padding:原创 2019-01-29 16:21:42 · 4082 阅读 · 1 评论