今天写了一个页面，客户要求在图片上面增加一个背景图片，刚开始感觉还挺不好写，遂百度之： html结构 <divclass="test"> <imgsrc="circle.jpg"> </div> css代码 .test{ background:url(abc.jpg)repeat; position:relative; width:200px; backgrou...

css布局 学习css的主要目的是为了记住各种属性么？NO，最重要的是理解css的定位机制与盒子模型。 接下来，从布局的角度来学习css的定位机制和盒子模型，学习之前还是先来提几个问题 进行css布局前为什么要学习定位机制和盒子模型？ 在实际的工作中到会用到哪些css布局？ 1.css基础 1.1盒子模型 css是用来为页面元素添加样式的，在最开始的时候，开发网页是先将各个尺寸定下来，然后使用最传...

什么是Webpack WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。 WebPack和Grunt以及Gulp相比有什么特性 其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，...

发现学会了一项技能后用的机会并不多，今天需要在Github里面传一些源码，所以又重新使用了，总是记不住命令，还好之前做过笔记，复制粘贴即可，但在运行的过程中还是出现了一些问题，随百度找到解决方法。 我们使用git首先本地仓库使用如下命令初始化 $gitinit 之后使用如下命令添加远程库 $gitremoteaddorigingit@github.com:waccz/response-naviga...

Sass又名SCSS，是CSS预处理器之一，它能让你更好的、更轻松的工作。Sass是一门高于CSS的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通CSS更加强大的功能。Sass能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。 什么是CSS预处理器 CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标...

学习的Git的小伙伴估计都已经注册Gitthub账号了，如果没有注册，可以先自行注册一个Gitthub账号，这样就可以免费获得Git远程仓库。 本地Git仓库和GitHub仓库之间的传输是通过SSH加密的，所以，需要一点设置： 第1步：创建SSHKey。在用户主目录下，看看有没有.ssh目录，如果有，再看看这个目录下有没有id_rsa和id_rsa.pub这两个文件，如果已经有了，可直接跳到下一步...

今天写这篇文章主要是记录自己学习Git过程中遇见的各种命令操作，Git是什么？Git是目前世界上最先进的分布式版本控制系统（没有之一）。本人是在Windows系统上操作的，所介绍的知识点也都是Windows系统上面的。 首先我们需要先安装Git软件，可能翻墙的网速不快，这里提供了百度云地址，下载安装即可 链接：https://pan.baidu.com/s/1gqd_mf9hsWMXtr-t11X...

我们在做前端开发的时候，在head部分会发现有很多meta标签，今天就来详细的总结下我们常用到的一些meta标签。 The<meta>tagprovidesmetadataabouttheHTMLdocument.Metadatawillnotbedisplayedonthepage,butwillbemachineparsable. meta标签提供有关HTML文档的元数据。元数据不...

需求拆分原则 单个迭代不宜太大 需求可交付，能够形成功能闭环 有成本意识，遵循二八原则 有预期的价值体现 提炼核心需求     架构设计--分层架构 定义：把功能相似、抽象级别相近的实现进行分层隔离 优势：松散耦合（易维护、易复用、易扩展） 常见分层模式：MVC和MVVM 架构设计--模块化 定义：解决一个复杂问题时，自顶向下逐层把系统划分成若干个模块的过程 优势：解耦和可并行...

许小珂今天看了一篇之前看过的关于利用伪元素:after和:before制作小三角的简述，因为没代码，只是说利用伪元素可以制作出三角形，当时并没有仔细研究。 正好趁着今早没事就查阅了这方面的相关资料。可以说是收获非常大，不仅对制作小三角熟练了，而且对伪元素:after和:before的属性也理解了很多，许小珂就把今天的理解分享给大家。 首先介绍下这两个伪元素常用的语法规则： 选择器+::after或...

之前已经讲解了很多关于移动开发和响应式布局的基础知识，今天许小珂就来讲讲最后一个基础概念：视口 在桌面上，视口的宽度等同于浏览器窗口的宽度，高度即为浏览器窗口的高度。而在浏览器宽度通常为240px~640px的移动设备上也这样做的话，则布局会出现很大的问题。为了适应为桌面浏览器设计的网站（这类网站使用固定布局，页面主体的宽度通常显式地设置在1000px上下，一般为960px），浏览器出现了布局视口...

许小珂在写这篇文章之前还没想好用什么标题，文章写了一大半了依然感觉写的挺乱的。权当是把自己的一些个人感悟进行下总结。 举个栗子 在分享之前许小珂先问大家一个问题：一个背景为width:640px;和height:1136px能不能再iPhone5上完全展示？大家都知道iPhone5的设备分辨率是640*1136，如果是这样的话是不是这个背景能正好在iPhone5上完全展示？ 接下来咱们用代码去写出...

最近许小珂在研究响应式布局，我们都知道px代表像素的意思。在css中我们一般使用px作为单位，在桌面浏览器css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。由此便引发了许小珂关于px的一系列疑问，所...

最近许小珂在研究响应式布局，说到响应式布局就不得不提媒体查询，那么MediaQueries是如何使用的？ 媒体查询的两种方式 一种是直接在link中判断设备的尺寸，然后引用不同的css文件： <linkrel="stylesheet"type="text/css"href="styleA.css"media="screenand(min-width:400px)"> //意思是当屏幕的...

最近许小珂正在研究响应式布局，也突然发现css中有很多媒体类型，今天特来总结一下 媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。 媒体类型 一些CSS属性只设计了某些媒体。例如"voice-family"属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如，"font-size"属性可用于屏幕和印刷媒体，但有不同的值。屏幕和纸...