CSS
文章平均质量分 78
Michael18811380328
常与同好争高下,不与傻瓜论短长。
展开
-
Accessibility 无障碍支持
Web 无障碍涉及确保内容保持无障碍,无论访问 web 的人员或方式。任何用户都可以使用其所有的功能和内容,特别是有身体或精神障碍的用户。键盘鼠标和触摸屏用户,以及用户访问网络的任何其他方式,包括屏幕阅读器,都能够访问网站。无论人们的听觉、视觉、身体或认知能力如何,应用程序都应该是可以理解和使用的。网站也不应该造成伤害:像动画这样的 web 特性会导致偏头痛或癫痫发作。国外网站中基本支持无障碍,我测试 MDN github airtable 等网站都支持比较好。原创 2024-03-06 14:03:23 · 891 阅读 · 1 评论 -
前端网页设计颜色使用原则
在视觉展现上能够用尽量少的样式去实现设计目的,避免毫无意义的使用大量颜色强调视觉重点或对比关系。少即是多: 在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、字重强调视觉重点或对比关系。例如 bootstrap 官方案例,配色简单明确,重点突出。原创 2024-03-06 13:48:11 · 898 阅读 · 0 评论 -
pdfjs 打印空白页
最近遇到一个问题,前端使用 pdfjs 预览 PDF 文件时,在浏览器中执行打印,谷歌浏览器最后一页会出现空白。如下图所示。在火狐浏览器和 Safari 中是正常的,初步判断是某个代码兼容性问题。原创 2024-01-09 11:57:45 · 457 阅读 · 0 评论 -
SVG 避免锯齿
svg shape-rendering 最近遇到一个项目,svg 图标较大的情况下边缘平滑,显示较小时候,界面有一些锯齿和模糊。查阅资料如下。原创 2022-08-23 17:17:56 · 3653 阅读 · 0 评论 -
字体锯齿问题
界面中文字和字体图标,通常需要平滑显示,常规设置如下(全局字体图标设置)张鑫旭推荐的最佳实践(兼容系统和物理屏幕)原创 2022-08-23 16:49:41 · 543 阅读 · 0 评论 -
Bilibili CSS filter 分析
Bilibili filter 模糊虚拟实现效果分析最近看到 B 站上面首页更新的效果,随着鼠标的移动,界面顶部的 banner 会虚拟化变化,感觉效果很好,增加了用户的交互。具体的效果如下:可以使用 CSS 实现 PS 中复杂的效果;然后使用JS获取当前鼠标的位置,动态改变界面效果,达到和用户交互。当鼠标在不同位置时,banner 部分的模糊效果发生变化。filter 效果代码实现如下:.blur { -webkit-filter: blur(4px); filter: blur(原创 2020-10-28 18:18:22 · 259 阅读 · 0 评论 -
z-index 和 fixed 在苹果手机ios不生效
z-index 和 fixed 在苹果手机ios不生效问题描述今天开发遇到一个问题:当一个元素固定定位时(fixed),同层级节点如果不想被固定定位的元素覆盖,那么需要设置 z-index,这样就不会被覆盖了。举个例子:A是固定定位的元素,B不能被A覆盖,所以需要设置 B z-index(同时需要设置 position: relative,因为Z-index 必须在定位的元素上才能生效)。.a { position: fixed; top: 100px; left: 100px;}原创 2020-09-11 22:06:19 · 2661 阅读 · 0 评论 -
ios 系统中 position: fixed 和 z-index
ios 系统中 position: fixed 界面滚动问题问题描述某个组件中,设置了部分元素 position: fixed 后,在 iOS 设备中滚动卡顿,部分内容显示卡顿。当界面停止滚动,内容显示正常。在桌面浏览器测试正常,在安卓设备测试正常,在 ios 各种浏览器都不正常(iphone - ipad)。基本判断是系统兼容性问题。截图如下:解决结果因为水平滚动设计元素宽度问题,我首先测试了界面中元素的尺寸。在 chrome 中尺寸显示正常。因为这个组件内容宽度可变,所以初始 css 中原创 2020-09-09 16:17:07 · 1424 阅读 · 0 评论 -
怎样提升自己的编程能力?
最近反思一个问题:自己编程两年多以来,为什么近期的编程能力没有较大的提升?日常自己也参与不少项目,gitHub 上提交了不少的代码,CSDN 上面也写了不少自己的见解。还是感觉编程中有些力不从心。过去一段时间中参与了若干开源项目,github 上也提交了不少代码。csdn 上主要记录自己编程中遇到的报错问题,和常用的库的介绍,和学习笔记等。正确的方法看了一些论坛和大牛...原创 2020-04-09 13:13:19 · 8753 阅读 · 0 评论 -
font-weight失效移动安卓处理方法
font-weight失效移动安卓处理方法1、BUG 现象最近遇到一个奇怪的现象:一段文本设置了font-weight,但是在移动端中的浏览器中不显示加粗。左侧是浏览器中移动端模拟器中的界面,可以看到对话框的标题和按钮文字是加粗的,右侧是真机开发中的对话框,标题和按钮文本是不加粗的。多次测试,中文不会加粗,英文正常。浏览器兼容性测试后也没问题,各种浏览器都是这样的。很郁闷。...原创 2020-02-26 15:12:56 · 17682 阅读 · 6 评论 -
z-index 无效解决方法
在工作中遇到这样一个问题:设置一个DIV z-index 很大,但是仍然被其他元素遮挡。例如:左侧的若干图标 z-index 依次增加,右侧的四个图标也需要设置 z-index。如果界面中同一个位置有多个元素层叠,可以设置 z-index 设置不同元素的层级。有时候遇到设置 z-index 后无效的原因,下面简单分析:父级元素溢出隐藏或者不显示如果父元素设置了 overflow:hidd......原创 2020-01-02 18:24:56 · 72440 阅读 · 1 评论 -
Ant-design CSS 打包优化
Ant-design CSS 打包优化最近使用蚂蚁金服的 ant-design-mobile 组件,下面记录一下使用过程的问题。官方安装文档如下https://github.com/ant-design/ant-design-mobile/blob/master/docs/react/introduce.en-US.md安装完成后,官方强烈建议我们使用压缩版本的CSSNote: Str...原创 2019-12-05 11:32:18 · 1787 阅读 · 0 评论 -
更改自定义 input CheckBox 颜色
使用表单验证时,CheckBox 是不可缺少的一部分。由于浏览器兼容性,checkbox 会显示不同的样式,直接设置 input 的 backgroundColor 属性,不能改变checkbox 的背景颜色和样式。下面是 Safari 浏览器 PC 端样式下面是 Chrome 移动端样式如果是用第三方库(例如 bootstrap),实际上是在原生的 input 上面进行改变,仍然不能...原创 2019-11-15 17:27:45 · 14617 阅读 · 0 评论 -
贪吃蛇JS实现
网上看到可以使用原生JS实现贪吃蛇,JS代码300行,下面是游戏截图。代码太多,CSDN 不让上传:>> 所以到github上面下载吧:github 链接废话不多说,直接上代码,HTML和CSS部分不分析。JS部分的功能说明在注释中。先放CSS代码body { background: rgb(102, 178, 255);}main { max-w...原创 2019-08-16 18:20:06 · 1566 阅读 · 0 评论 -
扫雷JS实现
前几天分析了贪吃蛇的JS前端实现方案,今天分析了扫雷的实现。因为扫雷单元格较多,获取元素设置样式频繁,所以使用Jquery库处理元素选择部分。代码太多,CSDN 不让上传:>> 所以到github上面下载吧:github 链接下面是源代码function Cell(row, column, opened, flagged, mined, neighborMin...原创 2019-08-19 09:32:12 · 1725 阅读 · 0 评论 -
超级实用前端知识点和面试题
这是搜集网上的多个前端经典知识点,不断更细中。虽然忙着每天的工作,但是基础知识要熟练掌握不断温习。CSSCSS 常见布局方式【整理】CSS布局方案CSS查漏补缺[布局概念] 关于CSS-BFC深入理解[译]这些 CSS 命名规范将省下你大把调试时间CSS知识总结前端开发规范:命名规范、html规范、css规范、js规范HTTPHTTP状态码(HTTP Status Cod...原创 2019-06-28 11:22:29 · 289 阅读 · 0 评论 -
五月前端细节总结
细节知识点1、代码格式数学操作符两侧留空格;props数据类型监测放在类前面;翻译;warning;函数名变量名是否最佳;减少不必要的props, state;减少不必要的请求;使用一个代码(JS-css)尽量避免其他样式的改变(不需要的不要加,避免画蛇添足);屏幕录制的结束快捷键:control + command + escwebpack 内存溢出解决方法:配置"scripts":...原创 2019-05-21 10:26:37 · 1668 阅读 · 0 评论 -
CSS-界面滚动时不显示滚动条
最近产品提出一个需求,在界面滚动时,元素右侧不显示滚动条。查了网上的答案,最后总结了一下几个情况。1、设置常规的滚动条:使用 overflow:auto。父元素需要设置一个高度,设置相对定位,这样子元素的高度大于父元素高度才能显示滚动条。如果父元素的高度完全由子元素撑开,界面上不会出现滚动条。设置overflow:auto 失效的主要问题:可能是这个div没有设置 100% 然后父元素清除浮动......原创 2019-03-17 17:43:47 · 64322 阅读 · 7 评论 -
JS 操作 CSS3 的问题
复习第一次:2019-1-25今天和朋友做项目,使用JS改变对象的样式,对于传统的宽高等可以改变,但是部分样式(opacity、z-index和其他CSS3的样式)直接使用对象点语法无法进行更改。查询资料后,对于这部分C3样式需要单独处理。这是常见的写法,直接使用style.属性进行赋值,对于 CSS 传统属性没问题。div.style.cssText = "width:300px;...原创 2018-06-15 14:58:49 · 205 阅读 · 0 评论 -
JS的正则表达式
2019-1-28 复习还记得刚开始接触JS中的正则表达式,是源代码中压缩后的一大段正则表达式(对于强迫症的我就是一种考验):一方面惊叹这部分代码的神奇之处(可以进行用户表单验证),同时对着一堆“乱码”无从下手。正则表达式,如果没有标注,没有换行,直接阅读,困难很大。当时在CSDN上一个一个查也没找到合适的结果。。。于是暂时放下来看其他代码if(RegExp 没有换行){ if(...原创 2018-06-15 15:22:34 · 166 阅读 · 0 评论 -
前端旋转木马效果
轮播图,俗称“旋转木马”,前端设计经典的一个案例。通常电商首页会使用轮播图或者旋转木马。废话不多说,直接上代码。主要逻辑:静态界面:中部是图片,左右分别是前进和后退按钮,下面是不同的页码。功能分析:不操作时,界面会自动向某个防线滚动;点击左右上下按钮会切换,直接点击下面的页码会直接跳到对应界面中。技术难点:页面切换的动画;点击按钮时默认的滚动暂停;第一个图片和最后一个图片的滚动...原创 2018-06-15 15:24:48 · 3753 阅读 · 0 评论 -
Error: Invalid CSS after and expected expression 错误原因及分析
错误信息:使用scss语法进行css编译过程中,写好的sass文件用koala进行编译,报出上面的错误:Error: Invalid CSS after and expected expression。错误分析:无效的css,选择器没有任何属性,所以将不会被编译成css。解决思路:将文件后缀名由sass改成scss即可。这是原始的sass文件,仔细检查没有拼写错误或者css语法...原创 2018-07-16 15:41:13 · 9399 阅读 · 2 评论 -
Web前端开发标准规范总结
Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦)。不同公司不同团队具有不同的规范和文档。下面是根据不同企业和团队的要求进行全面详细的整理结果。备注:实际开发请以本公司的规范为标准。A.基本原则符合web标准(UTF-8,HTML5),语义化html(HTML5新增要求,减少div和span等无特定语义的标签使用),结构表现行为...原创 2018-07-15 07:32:40 · 34225 阅读 · 1 评论 -
最全面计算机英语单词列表(一)
作为一名开发者,不管是自己写代码还是阅读英文文档,英语水平对于开发进度有很大的影响。业余时间简单整理了计算机开发中常见的英语单词(不限于前端开发),再此和朋友们分享。单词较多,为了阅读体验良好分成几个部分。1.file,n.文件;v.保存文件[faɪl]2.command,n.命令,指令[kəˈmænd]3.use,v.使用,用途[jus]4.program,n.程序[ˈproʊgræm]5.li...原创 2018-07-15 07:46:01 · 53256 阅读 · 30 评论 -
最全面计算机英语单词列表(三)
702.general,a.通用的[ˈdʒɛnərəl]703.associated,a.联合的,相联的[əˈsoʊʃieɪtɪd]706.partition,v.划分,分区,部分[pɑrˈtɪʃn]707.hexadecimal,a.十六进制的[ˌhɛksəˈdɛsəməl]709.specification,n.说明书,规则说明书[ˌspɛsəf...原创 2018-07-15 07:49:22 · 7397 阅读 · 0 评论 -
ArgumentError:invalid byte sequence in UTF-8 错误原因及分析
在使用coala软件进行sass或者less进行编译,发生上面的报错ArgumentError:invalid byte sequence in UTF-8:直接翻译的结果是,在UTF-8中无效字节序列。什么是无效字节序列呢?可能是部分文件(需要编译的文件)路径中存在中文。解决方法:将文件路径全部设置为英文。PS:为了开发的规范性和统一性,避免部分软件报错,需要将文件名和文件夹名全...原创 2018-07-15 07:56:01 · 10169 阅读 · 3 评论 -
React中loading界面处理
前几周,boss给出一个任务:在网站页面加载前设置一个loading界面。设置loading界面,如果用户网络状况一般,或者用户执行请求操作频繁,可以让用户减少等待时间,有利于提升用户体验。那么具体怎样实现loading界面呢?查询资料进行实践,得出下面几个方案:方案一:在react框架中,根据组件的生命周期,在componentdidmount进行判断。在render中进行判断:当用...原创 2018-08-19 13:04:18 · 25553 阅读 · 0 评论 -
元素垂直居中水平居中的方法
元素和文本的居中在css中是入门的考察点。元素在盒子内部水平居中或者垂直居中,文本在盒子内部水平居中或者垂直居中都是很关键的考察点。加上移动端和PC端适配,就是基本的CSS考察点。在面试过程中这个是一个最基本的问题,需要每时每刻熟练记忆。好了,下面上代码:<!DOCTYPE html><html lang="en"><head> <meta ...原创 2018-11-18 10:49:18 · 281 阅读 · 0 评论 -
前端如何提高网站品质
如何提高网站品质1. 符合主流标准H5 C3 web验证(代码经过官方的验证通过)2. HTML DOCTYPE 确定当前正在适用的界面的版本;这样浏览器会快速一致的显示当前页面。主要包括 HTML 4.0.1 XML 1.0 HTML5 三个大类;每一个大类包括严格模式、传统模式、框架集模式等(对于代码严格程度不一样)。 title 网页的标题:描述网页的功能——尽量...原创 2018-12-03 15:42:28 · 331 阅读 · 2 评论 -
SVG 绘制基本图像
svghttp://www.ruanyifeng.com/blog/2018/08/svg.html1、svg 插入界面方法一:直接以svg标签插入界面中方法二:以外部文件的形式插入embed iframe 标签中方法三:以 css 的背景图片插入界面中2、svg标签使用基本图形&lt;svg width='100%' height='100%' viewBox="50 50 50...原创 2019-01-07 18:32:29 · 4927 阅读 · 1 评论 -
前端绘制小猪佩奇(CSS)
绘制小猪佩奇的方法有很多。从前端的角度,可以在 canvas 中绘制,或者直接使用 css3 绘制。这里就练习最基本的CSS绘制小猪佩奇。<!DOCTYPE html><html><head> <title>用css画一个小猪佩奇</title> <style type="text/css">原创 2019-01-19 15:28:53 · 2556 阅读 · 0 评论 -
svg绘制折线图
svghttp://www.ruanyifeng.com/blog/2018/08/svg.html1、svg 插入界面方法一:直接以svg标签插入界面中方法二:以外部文件的形式插入embed iframe 标签中方法三:以 css 的背景图片插入界面中2、svg标签使用基本图形<svg width='100%' height='100%' viewBox=...原创 2019-01-23 10:59:21 · 5313 阅读 · 0 评论 -
前端canvas制作微信小游戏(二)
这次简单分享一个canvas坐标效果和矩形动画效果,这是制作小游戏的基础组件。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas</title></head><body><scrip...原创 2018-06-21 15:40:48 · 1463 阅读 · 0 评论