HTML5/CSS3

如何在 CSS 中引入 JS 变量

一、在传统前端开发中实现 在 JS 中定义: 在 CSS 中引用: 作用于跟 js 变量类似: 也就是说,变量的作用域就是它所在的选择器的有效范围。 二、在 Vue 中实现 下面介绍怎样才能在 vue3 的 <style> 中使用 <script> 里声明的变量: 首先创建一个支持 vue3 的 vite 项目 然后在组件中这样使用: 首先要在<style>标签中写个vars=& […]

前端资源文件下载 – HTML5 中的 download 属性

目录 download 属性介绍 动态资源下载 文件命名问题 Blob: URL 解决方案 总结 随着前端技术的发展,越来越多的业务场景中需要前端来处理文件下载。在众多的方法中,通过 <a> 标签的 download 属性实现下载是其中常见也是比较简单的一种方法。 download 属性介绍 常规的 <a> 标签通过 href 实现链接跳转,如果只想下载文件而不是跳转预览,最好的方式是 […]

从 font-size 探索移动应用的前端开发

2016-12-14 在 Dynamsoft 公司月度例会上所做分享的部分内容 目录: 讲 font-size 的原因 拉勾网 – 简单问题简单解决 网易 – 内容丰富、排版相对固定 淘宝 – 内容丰富、改动相对频繁 比较网易与淘宝的做法 前端开发如何与设计协作 讲 font-size 的原因 自公司网站首页改版之后我在慢慢的将一些老页面改成响应式,改版过程中我 […]

从输入 url 到页面展示之间发生了什么

2017-11-15 在 Dynamsoft 市场部例会上所做分享的部分内容 目录 输入地址 浏览器查找域名的 IP 地址   浏览器向 web 服务器发送一个 HTTP 请求 服务器的永久重定向响应 浏览器跟踪重定向地址 服务器处理请求 服务器返回一个 HTTP 响应  浏览器显示 HTML 浏览器发送请求获取嵌入在 HTML 中的资源(如图片、音频、视频、CSS、JS等等) 思考 Web 优化 […]

用纯 CSS 实现三角形小图标的两种方法

小三角用到的地方还是挺多的,比如导航和下拉菜单上,经常会放一个小三角来告诉用户这下面还有内容,点击可展开;当然,完全可以用小图片来实现这个小三角图标,但是有时候我们希望用 css 来画出这个三角图标;下面是我常用到的两种用 css 画出小三角图标的方法。 目录 利用 css3 的 rotate 来画小三角 利用 border 属性来画小三角 利用 css3 的 rotate 来画小三角 这种方法我 […]

用 Canvas 绘制一个动态时钟

开始绘制之前首先要了解 Canvas 有哪些属性以及哪些用法。 目录 Canvas 的常用方法跟基础属性: Canvas 绘制时钟流程: 完整 JS 代码: 绘制时钟步骤详解 Canvas 的常用方法跟基础属性: 1>.Canvas.getContext(contextID); 返回一个表示用来绘制的环境类型的环境。其本意是要为不同的绘制类型(2 维、3 维)提供不同的环境。当前,唯一支持的是 & […]

总结的一些 CSS 居中的方法

从事前端开发以来,对于 css 居中的代码可以说写过无数遍了,在平时的工作和学习中也常有小学弟小学妹亦或是同事来问我,这个盒子怎么居中,这个行内元素,块状元素怎么居中啊,在 table 里有怎么居中啊,垂直方向和竖直方向又怎么居中啊,等等问题。 说实话,虽然我能够解决绝大部分的居中问题,但是对于每种情况的居中方法我分的也不是很清楚,往往都是要好几种方法都试着写一遍来挑选最合适的那种。 这篇博客是结 […]

常用的一些 CSS 小技巧

目录 使用 :not() 去除导航上不需要的边框 垂直居中任何元素 逗号分离的列表 使用负 nth-child 选择元素 文本显示优化 继承 box-sizing 表格单元格等宽 使用 Flexbox 摆脱边界 Hack 使用属性选择器选择空链接 使用 :not() 添加 / 去除导航上不需要的边框 下面两个方法的效果是一样的。 方法一: 添加边框: 然后去除最后一个元素的边框: 方法二: 使用伪 […]

利用 css 改变选中文本的颜色和背景色

原理很简单,只要应用 css3 的伪类 ::selection 就能实现。 css 代码: 当然,如果不想定义全局,也可以用 CSS 定义局部标签内容文字选中后的样式状态。 比如,只定义第一段是文字选中绿色背景: 只能向 ::selection 选择器应用少量 CSS 属性:color、background、cursor 以及 outline。

css3 opacity 和 rgba 属性的兼容性

目录 opacity rgba opacity 和 rgba 的比较 opacity opacity 是 css3 中用来设置元素透明度的属性。对于其兼容性,w3cschool 给出的介绍是:所有主流浏览器都支持 opacity,IE8 以及更早的版本支持替代的 filter 属性。例如:filter:Alpha(opacity=50)。 用法: css: javascript: 考虑到兼容性的一 […]