Alfred的博客

webpack 是一款模块加载器兼打包工具，它能够把各种资源，例如js（含JSX）、样式（含less/sass）、图片等都作为模块来使用和处理。1.简介Webpack 是一个模块打包器。根据模块的依赖关系进行静态分析，然后按照指定的规则将这些模块生成对应的静态资源。相比于 gulp、grunt 等构件工具，WebPack 是一种模块化的解决方案，适合一些前后端分离项目的的场景，模块间依...

有时需要将一些前端静态资源部署到GitHub上，如博客、在线简历这类的情况。这只涉及一些简单的页面和静态文件，为了减少一些脚本的使用，前端有gh-pages这样一个模块，可以帮助部署到GitHub上。1.注册 GitHub 账号确保有一个GitHub账号，新建仓库，并设置与本地关联，具体步骤参考网上的资料。2.创建 gh-pages 分支为了不影响项目的开发，在 GitHub 上创建...

前端的静态资源压缩的方式有很多，这里记录一下 Grunt 和 Gulp 的使用1. Grunt压缩Grunt3是基于NodeJS的一个自动化压缩、合并、测试等构建工具，可用npm安装，任务文件Gruntfile.js放在项目的根目录下。1.1.安装npm install -g grunt-cli1.2.新建 package.json文件内容如下：{ "name": "...

以下资料来源于网络。1.简介CSS网格布局（又名“网格”）是一个二维的基于网格的布局系统，其目的只在于完全改变我们设计基于网格的用户界面的方式。Grid是第一个专门为解决布局问题而生的CSS模块雷切尔·安德鲁（Rachel Andrew）的书为CSS Grid布局准备。 这本书对网格布局做了彻底、清晰的介绍，也是是整篇文章的基础。Chris Coyier的Flexbo...

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年, W3C提出一个新方案: Flex布局1.Flex 简介Flex 是 Flexible Box的缩写, 意思是"弹性布局", 用来为盒状模型提供最大的布局灵活性，任何一个容器都可以设置为Flex布局模式...

本文简单整理一下前端样式中的经典布局方式。1.三栏布局所谓的 ‘三栏布局’， 即：左右两栏固定宽度，中间部分自适应的布局方式。1.1.相同点双飞翼与圣杯布局的相同点：都是浮动布局，在实现三栏布局；左右两边加上负的margin值，使之与中间并排；中间盒子优先渲染，两边的盒子框子固定不变，即使页面宽度变小，也不影响浏览。1.2.不同点圣杯布局：通过父容器的内边距（pad...

本文主要记录一下HTML标签的常用属性和CSS样式。1.一些特殊标签标签描述<b>粗体字<strong>粗体字，强调<i>斜体字<em>斜体字，强调<dfn>斜体定义<u>底线<ins>底线，插入文字<strike>...

如题，本文主要描述博主对之前前端学习中HTML5标签的一些整理。一、基本分类HTML4中，元素被分成两大类: inline(内联元素)与block(块级元素)。1. 块级元素每个块级元素独占一行，可以直接控制宽度、高度以及盒子模型的相关css属性，默认情况下，其宽度为父级元素内容的宽度，默认情况下，其高度为本身内容的高度。常用的块级元素有：标签描述&l...