HTML & CSS
文章平均质量分 87
前端三大件
超悠閒
博客文章倉庫:https://github.com/superfreeeee/Blog
博客代码仓库:https://github.com/superfreeeee/Blog-code
展开
-
HTML 踩坑笔记: video 标签 autoplay 属性失效(Error: Uncaught (in promise) DOMException: play() failed)
HTML 踩坑笔记: video 标签 autoplay 属性失效(Error: Uncaught (in promise) DOMException: play() failed)文章目录HTML 踩坑笔记: video 标签 autoplay 属性失效(Error: Uncaught (in promise) DOMException: play() failed)0. 项目背景1. 问题描述尝试: 主动调用 play 方法(失败)2. 解决方案2.1 解决方案 1: 静音2.2 解决方案 2: 监听原创 2022-01-23 17:03:53 · 10621 阅读 · 0 评论 -
CSS 实战: 纯 CSS 画三角形
CSS 实战: 纯 CSS 画三角形文章目录CSS 实战: 纯 CSS 画三角形实现技术核心: Border 属性基础改变高度、宽度扭曲变形其他资源参考连接完整代码示例实现技术核心: Border 属性基础使用 CSS 实现三角形的基础在于 Border 属性首先我们先来看基础的 border 使用#t1 { border-top: 20px solid blue; border-right: 20px solid green; border-bottom: 20px solid ye原创 2022-01-03 19:27:32 · 770 阅读 · 1 评论 -
HTML 进阶: Web Components 原生组件技术
HTML 进阶: Web Components 原生组件技术文章目录HTML 进阶: Web Components 原生组件技术Web Components 概念 & 技术核心1. Custom Elements 自定义标签1.1 注册 Web Component1.2 生命周期钩子2. Shadow DOM3. Template 模版 & Slot 插槽3.1 Template 模版的作用3.2 Slot 插槽的作用小结其他资源参考连接完整代码示例Web Components 概念 &原创 2022-01-03 12:26:31 · 1634 阅读 · 0 评论 -
CSS 实战: Switch 按钮开关(checkbox 实现)
CSS 实战: Switch 按钮开关(checkbox 实现)文章目录CSS 实战: Switch 按钮开关(checkbox 实现)正文1. 效果2. 代码实现2.1 html 结构2.2 外框 wrapper + 底座 box 样式2.3 白色按钮 but2.4 表情符号其他资源参考连接完整代码示例正文1. 效果 2. 代码实现2.1 html 结构<label class="box-wrapper"> <input type="checkbox" />原创 2021-11-02 00:39:04 · 840 阅读 · 0 评论 -
CSS 实战: Loading 动画
CSS 实战: Loading 动画文章目录CSS 实战: Loading 动画正文1. html 结构2. div 实现样式3. svg 实现样式4. 实现效果其他资源参考连接完整代码示例正文1. html 结构这里一共实现两种 loading 图样,一个使用 <div> 标签,一个则是 svg 的 <circle> 元素<div class="loading-css"></div><svg viewBox="0 0 50 50" clas原创 2021-11-01 23:50:18 · 839 阅读 · 0 评论 -
CSS 实用工具: Google Fonts API 引入免费字体库
CSS 实用工具: Google Fonts API 引入免费字体库文章目录CSS 实用工具: Google Fonts API 引入免费字体库正文1. Google Fonts 使用2. 在代码中引入字体 & 效果其他资源参考连接完整代码示例正文今天给大家分享一个有趣的工具,写 Web 的时候常常找不到有什么字体是好看的或是要一直去找。本篇将给大家介绍一个免费的字体库,由 Google 提供的 API1. Google Fonts 使用地址:https://fonts.google.co原创 2021-10-28 17:31:06 · 4774 阅读 · 3 评论 -
深入 Canvas: 基础 2D API
深入 Canvas: 基础 2D API文章目录深入 Canvas: 基础 2D API正文1. 基础 2D API 总览1.1 Canvas 标签1.2 渲染上下文1.3 CanvasRenderingContext2D API2. 绘制矩阵3. 绘制路径3.1 直线路径3.2 曲线路径3.3 二次/三次贝塞尔曲线路径4. 绘制样式4.1 填充颜色4.2 描边颜色4.3 绘制透明度4.4 线段样式4.5 渐变颜色4.6 绘制阴影5. 绘制文字5.1 填充/描边文字5.2 文字垂直基准线5.3 测量文字宽原创 2021-10-16 12:29:17 · 336 阅读 · 0 评论 -
CSS in JS: styled-components 实践
CSS in JS: styled-components 实践文章目录CSS in JS: styled-components 实践正文0. 演进1. 特性:原生标签样式2. 特性:为组件加上样式3. 特性:嵌套、占位符4. 特性:组件属性赋值5. 特性:动画 & keyframes6. 特性:布景主题7. 总结:用法、特点其他资源参考连接完整代码示例正文0. 演进pure CSSSass、Less (CSS preprocess)BEM = Block Element Modifie原创 2021-10-07 18:28:44 · 455 阅读 · 0 评论 -
HTML5 新特性: Web Worker 的创建与使用(webpack + TS 环境)
HTML5 新特性: Web Worker 的创建与使用(webpack + TS 环境)文章目录HTML5 新特性: Web Worker 的创建与使用(webpack + TS 环境)前言正文1. 基础使用1.1 Worker 定义1.2 Worker 使用2. worker-loader2.1 webpack 配置2.2 Worker 定义2.3 Worker 使用2.4 TS 环境下的配置3. 实践示例:计时器3.1 Worker 定义3.2 Worker 使用结语其他资源参考连接完整代码示例前原创 2021-08-21 14:07:19 · 3603 阅读 · 0 评论 -
CSS 滚动条: 自定义滚动条样式
CSS 滚动条: 自定义滚动条样式文章目录CSS 滚动条: 自定义滚动条样式前言正文overflow & ::-webkit-scrollbar实际效果(自定义滚动条、隐藏滚动条)结语其他资源参考连接完整代码示例前言本篇来介绍如何为自己的网页定制化自己的滚动条正文由于滚动条大部分时候其实是属于浏览器管控的元素,所以我们只能透过一些伪类的方式来影响它的样式。本篇介绍的是专用于 webkit 引擎上生效的写法overflow & ::-webkit-scrollbar与滚动条相关的原创 2021-07-30 09:06:27 · 1969 阅读 · 3 评论 -
CSS 应用: 文本溢出省略效果(单行/多行)
CSS 应用: 文本溢出省略效果(单行/多行)文章目录CSS 应用: 文本溢出省略效果(单行/多行)前言正文使用属性介绍普通用法1. 单行文本溢出2. 多行文本溢出结语其他资源参考连接完整代码示例前言本篇主要介绍一个在 css 中还挺常见的文本溢出省略效果,也就是指定行数之后就会在最后一行最后变成删节号表示有更多文本。正文使用属性介绍首先我们介绍几个待会会用到的 css 属性overflow MDN reference主要处理任何内容在块元素中溢出时效果,常见的值有overflow:原创 2021-07-30 08:14:20 · 504 阅读 · 0 评论 -
CSS 预处理器: Sass/Scss & Less
CSS 预处理器: Sass/Scss & Less文章目录CSS 预处理器: Sass/Scss & Less前言Why 预处理器?Sass?Scss?正文1. 预处理器的编译工具Less 编译Sass/Scss 编译2. Gulp 实现自动化编译3. 预处理器功能3.0 预处理器功能概述3.1 变量(Variables)3.1.1 基本使用3.2 嵌套(Nesting)3.2.1 基本使用3.2.2 父选择器3.3 混合(Mixins)3.3.1 基本使用3.3.2 带参数的混合器3.原创 2021-05-07 05:27:18 · 673 阅读 · 2 评论 -
`<script>` 标签与 defer、async 属性
<script> 标签的加载和执行时机文章目录`简介在浏览器的运行环下,我们知道要想在网页中插入脚本,我们可以使用 <script> 标签来选择引入内联脚本/外部文件脚本的方式来为网页插入 js。但是脚本的加载和执行时机其实是与 HTML 文件的解析紧密关联的,本篇将详细介绍使用 <script> 标签时关于脚本加载的 defer、async 属性之间的区别。参考 defer和async的区别 https://segmentfault.com原创 2021-04-01 18:23:14 · 466 阅读 · 0 评论 -
Canvas 实战: 实现纯前端图形验证码(Graph Verification Code)
Canvas 实战: 实现纯前端图形验证码(Graph Verification Code)文章目录Canvas 实战: 实现纯前端图形验证码(Graph Verification Code)简介参考完整示例代码正文图形验证码实现要素 & 功能代码实现文件结构 & 页面模版图形验证码实现:GVerify 类引入 GVerify 类工具函数定义GVerify 类结构GVerify 各方法详细实现事件处理运行截图结语简介本篇将使用 Canvas 实现纯前端的图形验证码。在各式各样的系统中原创 2020-12-26 13:47:22 · 1632 阅读 · 0 评论 -
Canvas 实战: 水波图
Canvas 实战: 水波图文章目录Canvas 实战: 水波图简介参考正文实现原理绘图开始绘制基本 sin 图形使波形流动上色并切边完成结语简介由于 Canvas 的基础功能太广了,有机会的话会出一篇基础的 Canvas 使用教学。本篇就暂时先默认小伙伴已经看过一些些 Canvas 基础(其实只要知道 getContext('2d') 就行啦),本篇将来介绍使用 Canvas 画出一个动态的水波图,详细公式和过程可以查阅参考一的链接哦~参考 Canvas制作水波图实现原理原创 2020-12-01 01:09:55 · 1483 阅读 · 0 评论 -
CSS進階:Media Query 媒體查詢
CSS 進階:Media Query 媒體查詢文章目錄CSS 進階:Media Query 媒體查詢簡介參考正文Definition 使用語法Media Type 媒體類型Media Feature 媒體特徵視窗規格(Viewport/Page dimension)Sample顯示品質(Display Quality)色彩(Color)交互能力(Interaction)邏輯運算符:OR、AND、NOT、ONLYOR 或AND 與NOT 非ONLY 只有Sample結語簡介21 世紀之後網際網絡迅速發展原创 2020-06-09 21:17:06 · 163 阅读 · 0 评论 -
CSS基礎:Specificity權重(優先級)
CSS 基礎:Specificity 權重文章目錄CSS 基礎:Specificity 權重簡介參考正文Type 類型引入方法選擇器類型權重計算Level 5Level 4Level 3Level 2Level 1`!important`Sample結語簡介前面我已經寫過一個CSS 基礎:Selector 選擇器,介紹了 CSS 裡面最重要的選擇器,接下來本篇將要介紹 CSS 是如何計算選擇器的權重。有時候你寫 CSS 的時候會發現,我寫的樣式怎麼沒有生效?原來是同時存在多個同樣的定義,那為什麼是另原创 2020-06-09 19:26:20 · 500 阅读 · 0 评论 -
CSS基礎:Selector選擇器
CSS 基礎:Selector 選擇器文章目錄CSS 基礎:Selector 選擇器簡介參考正文Overview 概述基礎選擇器(Basic Selectors)標籤選擇器(Type/Tag Selectors):`tagName`Sample類選擇器(Class Selectors):`.className`SampleID 選擇器(ID Selectors):`#idName`Sample通配符(Universal Selectors):`*`Sample屬性選擇器(Attribute Selecto原创 2020-06-07 17:02:35 · 380 阅读 · 0 评论 -
CSS進階:Grid格線佈局
CSS 進階:Grid 格線佈局文章目錄CSS 進階:Grid 格線佈局簡介參考正文Grid Element 格線佈局元素Container 外容器1. display2. grid-template-rows / grid-template-columnsSamplerepeat & fr3. grid-template-areasSampleSample-empty4. grid-templateSample5. grid-auto-rows / grid-auto-columnsSample原创 2020-06-05 03:18:12 · 846 阅读 · 0 评论 -
CSS進階:Flex彈性盒子
CSS: flex 詳解文章目錄CSS: flex 詳解簡介參考正文Element 元素Container 外容器屬性display語法flex-direction語法Sampleflex-wrap語法Sampleflex-flow語法Samplejustify-content語法Samplealign-items語法SampleItem 內元素屬性flex-grow語法Sampleflex-s...原创 2020-05-07 19:59:16 · 206 阅读 · 0 评论 -
HTML基礎:Input 輸入框
HTML 基礎:Input 輸入框文章目錄HTML 基礎:Input 輸入框簡介參考正文Types 類型Common Property 通用屬性輸入類型Property 屬性選擇類型Property 屬性時間日期類型本地資源Property 屬性表單行為和其他Event 事件Event 常用監聽事件結語簡介上一篇:HTML 基礎:Form 表單,介紹了 HTML 中 <form> 元素的用法。接下來本篇將來詳細展開 <input> 輸入元素的所有類型以及用法。參考原创 2020-06-18 17:21:02 · 1834 阅读 · 0 评论 -
HTML基礎:Form 表單
HTML 基礎:Form 表單文章目錄HTML 基礎:Form 表單簡介參考正文Form Attribute 表單屬性Basic 基本款裝飾一下數據綁定結語HTML 基礎:Form 表單簡介參考正文Form Attribute 表單屬性Basic 基本款裝飾一下數據綁定結語簡介在開始學網頁的時候,一定都會從 HTML 開始著手,加上 CSS 的樣式,以及動態操作 HTML 的 JavaScript。其中,表單(Form)可以說是前端網頁的靈魂,所謂的前端除了原创 2020-06-17 11:02:52 · 217 阅读 · 0 评论