自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

大梦前端

记录前端路上的点点滴滴

  • 博客(22)
  • 收藏
  • 关注

原创 bootstrap v5 色彩变量设置

原文请见:http://yueziyao.site/2021/03/31/frontend/bs5-var/相关文章:《Bootstrap V5的一些新特性》

2021-03-31 23:09:19 301

原创 前端基础设施建设参考

几篇文章可以参考下:《浅谈前端基建思路》

2021-01-26 22:30:42 488

原创 前端单位px,pt,rem,逻辑像素,物理像素

px = 逻辑像素pt = 物理像素rem = 相对单位,对标html标签设置的字体大小详见 http://yueziyao.site/2021/01/18/screen/

2021-01-19 23:23:48 530 1

原创 macOS Big Sur osx系统引导盘制作

1.格式化U盘打开 “应用程序 → 实用工具 → 磁盘工具”,将U盘「抹掉」(格式化) 成「Mac OS X 扩展(日志式)」格式、GUID 分区图,并将 U 盘命名为「Install macOS Big Sur」2.下载系统,安装到本机应用系统在iTunes上下载即可3.使用命令行生成引导盘sudo /Applications/Install\ macOS\ Big\ Sur.app/Contents/Resources/createinstallmedia --volume /Volumes/

2021-01-07 11:17:08 1098

原创 Mac和windows 安装nvm实现快速切换nodejs版本

团队项目新老共存的情况下,某些时候不得不频繁切换nodejs版本。n模块比较难搞,有一些问题,还是推荐使用nvm。首先,强烈推荐看官网安装:https://github.com/nvm-sh/nvm(ps:因为如果插件更新了,下边的教程可能没那么及时更新~)一、Macos安装nvm1.1 命令行下载及安装打开命令行工具,输入以下命令,等待安装成功curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | b

2021-01-07 10:54:56 172 3

原创 团队任务管理(Gitlab)及自动数据持久化(爬虫+MongoDB)方案(上)

前言在团队日常工作中,必不可少的是任务监控、管理以及每月、每年的考核评价。在大数据时代,数据驱动研发是现在主流的趋势,团队的开发过程也离不开数据。曾经,每月的月度考核曾经也是我们团队最头疼的。因为生产考核的 依据难以收集,其准确性更是难以确认。年度的考核更是如此,一言难尽。在进行团队敏捷实践时,我发现敏捷计划会议中的任务估点非常适合记录,如果结合一些自研工具、系统,我们能将团队中所有数据都持久化,所有问题应该都迎刃而解。于是,结合团队任务管理特点和需求,经过充分调研比对,我们将工作任务转移到Gitla

2020-07-19 00:50:10 808

原创 前端基础-屏幕尺寸、样式单位

前端知识点很多,才入门的萌新可能不知道从哪里学起。今天我们来看看几个最基础的概念:屏幕尺寸、样式单位。1.物理像素 — DP(device pixels)显示屏的成像原理:通过一系列的小点排列成一个大的矩形,不同的小点通过显示不同的颜色来显示成图像。单位pt,属于真正的绝对单位。2.逻辑像素PX(CSS pixel)CSS像素单位是pxDIP(Device independent Pixel) 设备独立像素,也称为逻辑像素CSS像素 = 独立像素 = 逻辑像素浏览器里的一切长度都是以

2020-05-16 23:25:13 1052

原创 四、bootstrap是如何实现一个按钮的?

我们看看最简单的一个组件是如何实现的。<a class="btn btn-default" href="#" role="button">Link</a><button class="btn btn-default" type="submit">Button</button><input class="btn btn-default" ...

2020-05-09 23:32:51 292

原创 三、bootstrap v3的变量系统是如何设置的?

bootstrap v3的变量系统是如何设置的?变量系统是贯穿整个ui框架的重要设置,通过设置统一的变量,控制系统统一的色调、间距、响应式设置等参数。那么,像bootstrap这样一个庞大的UI框架,是如何通过变量系统来控制的呢?那么下面我们来细品。还是打开上一章我们下载的sass源码,stylesheets>bootstrap>_variables.scss_variable...

2020-05-04 23:35:35 433

原创 Mojave osx系统引导盘制作

Mojave osx系统引导盘制作1.格式化U盘打开 “应用程序 → 实用工具 → 磁盘工具”,将U盘「抹掉」(格式化) 成「Mac OS X 扩展(日志式)」格式、GUID 分区图,并将 U 盘命名为「Mojave」2.下载系统,安装到本机应用系统在iTunes上下载即可3.使用命令行生成引导盘sudo /Applications/Install\ macOS\ Mojave.app...

2020-05-01 22:41:16 395

原创 二、bootstrap v3是如何组织样式结构的?

v3.3.7版本样式结构解析目前bootstrap用得较多的是v2、v3、v4,3个版本。其中v3的v3.3.7版本是一个比较成熟的版本,也是bootstrap中文网所翻译的(不过v3版本最新的是v3.4.1),方便大家进行查阅。step1 下载源码bootstrap中文网:https://v3.bootcss.com/Ps: 不过个人还是更推荐大家看官网,翻译过来的始终更新不及时。...

2020-04-28 22:44:35 283

原创 一、我和Bootstrap不得不说的故事

故事从Bootstrap开始这是一个有故事的专栏。前言2014年毕业后,有幸进入现在的公司从事java开发工作。期间,由于有前端开发经历,经常被部门交去实施很多项目的前端工作。要知道在当时,还是SpringMVC + jquery独领风骚的时代,大多数java后端都喜欢用一个叫Bootstrap的UI框架来构建系统前端。在经历过好几个由Bootstrap构建的项目后,我对这个神奇的框架产生了...

2020-04-26 01:05:27 197

原创 web无障碍实施细节(三)语音读取适配

提升屏幕朗读器对web应用的识别。1.分析视力障碍用户通常会使用屏幕朗读器,读取、操作web应用。1.1 屏幕朗读器屏幕朗读器软件会试图辨认和解释屏幕所显示的东西(或者,更准确地说,是标准输出的东西,无论是显示器还是其他)它的解释对用户会表现为朗读文本、声音图标或盲文输出设备。屏幕朗读器是一种辅助技术(AT),可用于帮助盲人、视力障碍者、文盲或学习障碍者,它通常和其他辅助技术——比如,屏幕...

2019-06-18 15:06:15 1278

原创 web无障碍实施细节(二)分离鼠标与键盘的focus轮廓样式

通常情况下,鼠标操作时,不需要出现focus轮廓样式,而键盘操作时,需要focus轮廓样式来确定焦点元素。1.分析为什么要 “分离鼠标与键盘事件的focus样式”?为了回答这个问题,首先,我们明确一点:浏览器是有默认的focus样式的,当可以focus的元素,处于focus状态时,就会显示outline轮廓。当我们设置了HTML tabindex属性的元素,鼠标点击就会出现以下情况:其实...

2019-06-18 15:03:50 478

原创 Web无障碍实施细节(一)跳到内容区

无障碍的具体实施过程中,测试了多家符合无障碍的国外航司。无一例外,均采用了“跳到内容区”的功能设计。1.示例法国航空达美航空亚航2.分析触发条件:在使用键盘切换焦点触发区域:焦点进入header区域触发状态:显示 “skip to content”(类似链接)操作:当焦点处于“skip to content”的时候,按enter选中,焦点跳过header区域,进入内容区。...

2019-06-18 15:00:44 423

原创 web响应式基础

0. 屏幕在讲响应式技术之前,了解一下设备屏幕相关的知识。0.1 物理像素 — DP(device pixels)显示屏的成像原理:通过一系列的小点排列成一个大的矩形,不同的小点通过显示不同的颜色来显示成图像。单位pt,属于真正的绝对单位。0.2 逻辑像素PX(CSS pixel)CSS像素单位是pxDIP(Device independent Pixel) 设备独立像素,也称为逻...

2019-06-13 17:36:45 361

原创 FE入门 — position定位

定位的重要性为了让网页中的元素,在我们html中更加合理的分布和展示。我们需要使用position属性,对其进行定位。例如很多网页中的提示语浮动层,一些特殊情况的形状见的拼合。废话不多说,直接进入教程。定位种类static:无特殊定位—html中默认absolute:绝对定位—对象从文档流中脱离(不再占位),使用left,right,top,bottom等属性进行绝对定位。其层叠展示,使...

2019-06-02 23:04:18 289

原创 FE入门 — html、css基础

标签常用标签通过看http://www.w3school.com.cn/tags/index.asp,熟悉以下html标签:<p></p><div></div><input><span></span><a></a><i></i><ul>&...

2019-06-02 23:01:17 459

原创 CSS3 基础及动画相关实践

一、分享目的普及CSS基础知识介绍CSS3基础及动画相关熟悉通过分析iceland首页动画源码,介绍使用CSS3动画属性最终目的:让大家了解,什么样的动画和动效,前端能使用CSS3写出来。二、什么是CSS以下是官方解释:CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0...

2019-06-02 22:58:41 325

原创 前端新人入门资料推荐

前端新人入门资料推荐仅供参考技术栈前端工程师所涉及的技术较为广泛,github上有个项目对涉及技术栈有个系统归纳,可以看看——前端工程师技能树。重点技能在前端工程师入门的阶段,最需要掌握的技术是html、css、js。综合教程各类综合知识合集:web开发指南w3school菜鸟系列UI框架:bootstrapbootstrap3.0、4.0版本,建议看看sass源...

2019-06-02 22:52:06 395

原创 MacOS GitHub访问过慢问题解决

家里github访问非常缓慢,百度了几个方法,亲测有效。方法:本地host地址绑定打开dns查询工具网站http://tool.chinaz.com/dns 查询域名github.global.ssl.fastly.net解析获取其IP.MacOS找到host文件,在finder里边command+shift+G,前往文件夹/etc/hosts,里边的hosts文件,拷贝到桌面进行编辑后拷...

2019-01-09 11:56:25 2016

原创 2018自我总结

前端技术总结又到年底了,在技术方面,自己做下小总结吧。一、技术进步18年算是稳中有进的一年,在我的推进下,主要完成以下技术“突破”:完成团队前端的持续集成方案完成标准版响应式UI架构(V1.0 &amp; V2.0)1.设计、前端持续集成方案其实这个持续集成还比较原始,使用到了gitlab-ci,docker镜像,nodejs等技术。当前端工程师上传代码后,触发CI,在自研的d...

2018-12-17 22:41:03 389

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除