2020

yumefx - 5年前

clip-path实现部分遮挡

clip-path 直译过来就是裁剪路径，是使用SVG或形状定义一个HTML元素的可见区域的方法。原理类似于Photoshop中的形状工具，通过设置一个封闭的路径实现一种遮罩效果，封闭路径内部的区域正常显示，外部的区域隐藏，从而在方形的图层上绘制出形状各异的几何图形。而在clip-path中，封闭的路径可以来自于外……

来自分类：前端 / 技术

2.91k 0 0 阅读

yumefx - 5年前

VSCode使用技巧

原创工具黑科技

因为以前一直用的编程语言是python，主要使用的代码编辑器是pycharm（偶尔偷懒用一下notepad++）。而最近开始写前端，虽然pycharm注册版对于HTML和JavaScript有基本的支持，但毕竟是主要面向python的，有些功能还是不太方便。因此最近开始使用VSCode，一款免费、开源、轻量、跨平台的……

来自分类：工具 / 技术

3.73k 13 0 阅读

yumefx - 5年前

Chrome插件(扩展)开发（下）

Chrome插件学习笔记转载

上一篇主要说了5种注入JS脚本的方式和常用的功能，这一篇说一下不同注入方式之间的通信以及一些有用的小技巧。通信上一篇说的5种JS之间的通信方法，可以用一张图来表示。其中，popup和background其实几乎可以视为一种东西，因为它们可访问的API都一样、通信机制一样、都可以跨域。 popup和back……

来自分类：前端 / 技术

6.75k 17 0 阅读

yumefx - 5年前

Chrome插件(扩展)开发（上）

Chrome插件学习笔记转载

前言这几天研究前端技术走火入魔，突发奇想琢磨着自己搞一个谷歌浏览器插件，因此找了好多教程，也算是有些收获，记录一下。所谓chrome插件，严格来说应该叫做Chrome扩展(Chrome Extension)，是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一……

来自分类：前端 / 技术

7.28k 17 0 阅读

yumefx - 5年前

网页布局之像素

HTML 前端原创学习笔记

本文想简单介绍一下CSS像素、物理像素、逻辑像素、设备像素比等概念，并记录一下自己对于网页在不同平台的不同设备中的显示效果以及处理逻辑的思考。概念介绍 CSS像素 CSS像素，顾名思义其实就是在网页开发中，用于CSS样式和Javascript代码中的px单位，是一个相对单位，在不同显示设备中可能显示为不同的物理像……

来自分类：前端 / 技术

3.54k 7 1 阅读

yumefx - 5年前

CSS样式表基础（二）

CSS HTML 前端原创学习笔记

这一篇主要说一下网页布局。网页布局的本质，其实就是用CSS来摆放盒子。 CSS提供了三种传统布局方式：普通流（标准流）、浮动、定位。普通流就是标签按照规定好的默认方式顺序排列。浮动（float）浮动可以改变标签的默认排列方式，最典型的应用就是让多个块级元素在一行中排列显示。 div { float: lef……

来自分类：前端 / 技术

1.55k 0 0 阅读

yumefx - 5年前

CSS样式表基础（一）

CSS HTML 前端原创学习笔记

CSS和HTML一样，也是一种标记语言，主要用于设置HTML页面中的文本、图片以及版面的显示样式和布局。格式与书写 CSS格式如下：选择器 { 属性: 值; … } 主要有三种书写位置，一种是单独的css文件，叫做外部样式表，然后在html中引入。 <head> … <link rel……

来自分类：前端 / 技术

2.42k 0 0 阅读

yumefx - 5年前

常用HTML标签

HTML 前端原创学习笔记

在前端三大件（网页元素、CSS层叠样式表、JavaScript）中，网页元素像骨骼，定义好大体框架和功能；CSS像皮肤，用来美化和增添细节；JS像肌肉，负责让整个系统动起来。因此今天开始会将这几部分内容梳理一下记录下来，今天就从常见的HTML标签开始。基础 <h1> to <h6> 定义……

来自分类：前端 / 技术

2.95k 0 0 阅读

clip-path实现部分遮挡

VSCode使用技巧

Chrome插件(扩展)开发（下）

Chrome插件(扩展)开发（上）

网页布局之像素

CSS样式表基础（二）

CSS样式表基础（一）

常用HTML标签

标签云

文章归档