洛小宇-CSDN博客

转载清除浮动

“清除浮动”这个说法容易让人产生误解，我认为这个说法的本意应该是“清除浮动带来的负面效果”，这个负面效果即“子元素的浮动会脱离标准文档流，从而造成父元素的高度塌陷”。解决这个问题有如下几个目前流行的做法。一、浮动的子元素后加一个空的div，并加上clear：both属性；二、BFC方法（1）父元素加上overflow：hidden，该方法会带来IE6的兼

2018-04-25 22:22:31 208

转载 css3弹性布局-flex

页面布局一直都是web应用样式设计的重点我们传统的布局方式都是基于盒模型的利用display、position、float来布局有一定局限性比如说实现自适应垂直居中随着响应式布局的流行，CSS3引入了更加灵活的弹性布局模型flex弹性布局使用弹性布局可以有效的分配一个容器的空间即使我们的容器元素尺寸改变它内部的元素也可以调整它的尺寸来适应空间若想让一个元素变成弹性盒很简单.demo...

2018-04-18 15:48:18 227

转载【转载】前端项目开发流程及技术选型

喂喂喂，那个切图的，把页面写好就发给研发工程师套模板吧。你好，切图仔。不知道你的团队如何定义前端开发，据我所知，时至今日仍然有很多团队会把前端开发归类为产品或者设计岗位，虽然身份之争多少有些无谓，但我对这种偏见还是心存芥蒂，酝酿了许久，决定写一个系列的文章，试着从工程的角度系统的介绍一下我对前端，尤其是Web前端的理解。只要我们还把自己的工作看作为一项软件开发活动，那么

2018-04-02 17:04:11 468

转载电商平台搭建笔记

第一章：课程介绍与开发前的准备工作课程导学架构设计：前后端完全分离、分层架构、模块化技术选型：html、css、js、jquery辅助工具：Webpack、NodeJs、NPM、Shell效率工具：Sublime、Chrome、Charles、Git　课程安排：一：基础框架的搭建（１）双平台的开发环境按照（２）git仓库的规范化用法（３）webpack脚手架搭建实战　　　

2018-04-02 15:00:05 845

转载 Hogan模板引擎的使用

先贴个Hogan的github地址镇楼：https://github.com/twitter/hogan.js在实战课《手把手从0打造企业级电商平台-前端实战》里，很多同学反馈对Hogan模板引擎不太熟悉，这里整理个手记，对它介绍一下。Hogan是一个非常简单的模板引擎，可以把它理解成Mustuche语法的编译器。Hogan简单到只有六七条语法，可以说是目前最简单的模板引擎了，估计以后也仍

2017-12-20 22:03:02 456

转载 CommonJs, AMD/RequireJs,CMD/seajs, UMD, webpack

JavaSript模块化在了解AMD，CMD规范前，还是需要先来简单地了解下什么是模块化，模块化开发？模块化是指在解决某一个复杂问题或者一系列的杂糅问题时，依照一种分类的思维把问题进行系统性的分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理，可维护性更高的可管理的模块的方式。可以想象一个巨大的系统代码，被整合优化分割成逻辑性很强的模块时，对于软件是一种何等意义的存在。

2017-12-20 16:52:24 1020

转载 JavaSript模块规范 - AMD规范与CMD规范介绍

JavaSript模块化在了解AMD，CMD规范前，还是需要先来简单地了解下什么是模块化，模块化开发？模块化是指在解决某一个复杂问题或者一系列的杂糅问题时，依照一种分类的思维把问题进行系统性的分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理，可维护性更高的可管理的模块的方式。可以想象一个巨大的系统代码，被整合优化分割成逻辑性很强的模块时，对

2017-12-20 16:02:46 167

转载 js模块化编程之彻底弄懂CommonJS和AMD/CMD！

先回答我：为什么模块很重要？答：因为有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。但是，这样做有一个前提，那就是大家必须以同样的方式编写模块，否则你有你的写法，我有我的写法，岂不是乱了套！于是下面三个模块规范出来了，这篇文章也出来了（拼出来的 {捂脸笑}）。 JS中的模块规范（CommonJS，AMD，CMD），如果你听过j

2017-12-20 15:53:31 231

转载 JavaScript模板引擎原理

一、前言什么是模板引擎，说的简单点，就是一个字符串中有几个变量待定。比如：var tpl = 'Hei, my name is , and I\'m years old.';通过模板引擎函数把数据塞进去，var data = { "name": "Barret Lee", "age": "20"};var result = tplEngi

2017-12-04 13:46:17 246

转载 git入门姿势

git是什么? 好吃么？在《手把手从零打造企业级电商平台-前端实战》课程里用到了git，很多还没参加过公司项目开发的同学就会很疑惑，git是什么？git好吃么？这货是不是我们斗图的图片？哦！不对！那是gif！那TM git到底是什么?!我们可以把git理解成我们管理代码的工具，把代码找个远程服务器备份一下，当我们电脑死翘翘的时候，就不用害怕代码丢了。当然把git理解成代码备份工

2017-12-04 13:35:07 206

转载 JS面向对象基础篇（封装继承多态）

JS面向对象基础篇（封装继承多态）首先我们要创建一个对象，我们可以利用javascript的语法特征，以类的思想来创建对象一:封装（1）原始方法，代码如下 var obj=new Object(); obj.name='Tom'; //给对象添加属性 obj.sex=22; obj.showName=function(){

2017-11-08 14:57:58 478

转载堆”,"栈","堆栈","队列",它们的区别？

如果你学过数据结构，就一定会遇到“堆”,"栈","堆栈","队列"，而最关键的是这些到底是什么意思？最关键的是即使你去面试，这些都还会问到，所以如果你不懂对你是损失很大的。堆：什么是堆？又该怎么理解呢？①堆通常是一个可以被看做一棵树的数组对象。堆总是满足下列性质： ·堆中某个节点的值总是不大于或

2017-09-18 15:27:16 537

原创 Sublime Text 3 快捷键总结

选择类Ctrl+D 选中光标所占的文本，继续操作则会选中下一个相同的文本。Alt+F3 选中文本按下快捷键，即可一次性选择全部的相同文本进行同时编辑。举个栗子：快速选中并更改所有相同的变量名、函数名等。Ctrl+L 选中整行，继续操作则继续选择下一行，效果和 Shift+↓ 效果一样。Ctrl+Shift+L 先选中多行，再按下快捷键，会在每行行尾插入光标，即可同时

2017-09-18 14:19:06 468

转载 HTML5 VideoAPI，打造自己的Web视频播放器

本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器，需要用到HTML5提供的video标签、以及HTML5提供的对JavascriptAPI的扩展。一、基础知识1.用法video src="./video/mv.mp4">video>注意：audio和video元素必须同时包含开始和结束标签，不能使用<audio />这样的空元素语法形式。2

2017-09-07 15:46:59 947

转载 git命令将本地项目上传到github

1、（先进入项目文件夹）通过命令 git init 把这个目录变成git可以管理的仓库git init12、把文件添加到版本库中，使用命令 git add .添加到暂存区里面去，不要忘记后面的小数点“.”，意为添加文件夹下的所有文件git add .13、用命令 git commit告诉Git，把文件提交到仓库。引号内为提交说明git commit -m 'first

2017-09-01 15:37:26 347 1

转载解释 Git 和 GitHub

本文由伯乐在线 - 听风翻译，艾凌风校稿。未经许可，禁止转载！英文出处：Red Radger。欢迎加入翻译组。本文旨在使用通俗易懂的文字，讲解版本控制背后的理论，以便你能对程序员们如何工作有个全局概念。本文不涉及代码，不用下载啥东西，循序渐进，不关注繁复细节，只有文字和一些不怎么漂亮的手绘涂鸦。写本文的动机学习任何东西都能在网络上找到如此之多的指导教程，这

2017-08-28 15:18:45 1062

转载关于css3中linear-gradient中的百分比

《Css secret》第二章《背景与边框》第五节《条纹背景》正文在第二章《背景与边框》中第五节《条纹背景》中，谈到了css3的新属性值linear-gradient,但是这里并不是详细说明这个新属性的用法，这里主要是用它来完成背景条纹，来看看原文中的说明与演示。假设我们有一条基本的垂直线性渐变，颜色从#fb3 过渡到#58a（参见图2-20）：backgroun

2017-06-16 11:01:03 1960 1

转载响应式（自适应）网页到底是什么？

响应式（自适应）网页到底是什么？本文作者：小兽SEO2年前 (2015-01-22) 评论 15 条网站建设响应式网页的话题随着如今移动互联网的盛行又被推到了很重要的位置，有相关人士预计，移动互联网的数据流量将在2015年超越桌面端的流量。你一定听说过，我们目前正处在“后PC时代”，这对于前端开发人员来说，意味着应该处理一些用户行为上

2017-06-14 19:45:12 660

转载 css3属性中background-clip与background-origin的用法区别？

困惑在哪里？background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性，它们有相同的可选值，即border、padding、content三种，而且这两个属性表示的都是元素背景与元素边框、补白(padding)和内容区域之间的某种关系。比如，我们想要在边框上显示背景，我们可以使用background-origin帮我们实现（前提

2017-06-14 18:24:07 747

翻译该把JS文件放在HTML文档的那个位置

首发于：技术风暴我们今天来聊一聊关于JavaScript文件的引入位置的问题；大家在平时的Web开发中有没有想过这样一个问题，那就是我应该在文档的头部（也就是标签内部里面）引入所需要的JavaScript文件还是应该在尾部（也就是之前）引入所需要的JavaScript文件呢？今天我们就来深入的探究一下这个问题。首先我们需要了解的一点就是，在浏览器渲染页面之前，它需要通过解析HTML标记

2017-06-08 19:39:47 11973 2

转载我们所说的前端框架与库的区别？

前端发展速度已经远远超出了我们的预计范围，JS迅速的流行，前端基于JS的框架(frameworks)/库(librarys)更是层出不穷，且各自都有其自身的优势以及劣势，有些是向开发使用者提供整套的服务，比如MVC一整套，有些则是专注于某一个点，比如专注于dom操作或异步请求；最近被问到这个问题，其实到我被问到这问题之前，都没有认真的考虑过它们的区别，处于学习以及好奇心理，查阅了相关文档，

2017-06-08 18:51:29 2249

转载 CSS3属性border-radius参数详解

border-radius，国内翻译成圆角，你可能以为这个属性就是用来画圆角，没错，但是除此之外，它还可以做点别的事情。radius其实指的是边框所在圆的半径，这个CSS3属性不仅能够创建圆角，还可以创建椭圆角（如图下图第7），把这些角按照不同的顺序和大小来展现，能够绘制成多种多样的图形。以下图例就是通过定义border-radius得到的效果。语法和解释border-ra

2017-06-04 17:02:15 8052 1

转载 js中数组的用法

js中数组的用法1、数组的创建var name= new Array();　//创建一个数组name[0]="zhangsan"; //给数组赋值name[1]="lisi";var arrayObj = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度var name=["zhang

2017-06-04 16:56:30 481

转载 js对象声明方式

在JS中，创建对象（Create Object）并不完全是我们时常说的创建类对象，JS中的对象强调的是一种复合类型，JS中创建对象及对对象的访问是极其灵活的。JS对象是一种复合类型，它允许你通过变量名存储和访问，换一种思路，对象是一个无序的属性集合，集合中的每一项都由名称和值组成（听起来是不是很像我们常听说的HASH表、字典、健/值对？），而其中的值类型可能是内置类型(如number,st

2017-06-04 16:50:54 3393

原创 div 居中问题

css div上下左右居中相信大家都会遇到这样的问题，要求一个块上下左右居中，在这里我总结了几个好用的方法1.已知要居中的块width height 假设 content 要在f里上下左右居中.f{ width: 800px; height: 800px;　　position:rel

2017-06-01 20:45:03 301

转载浅谈display:flex

浅谈display:flexdisplay:flex 意思是弹性布局首先flex的出现是为了解决哪些问题呢？一、页面行排列布局像此图左右两个div一排显示可以用浮动的布局方式html部分css部分这种布局有两个缺点1.需要一个空div来清除浮动，当然也可以选用其他清除浮动的方法，但此处需要清除浮动才能不影响下面的布局。2

2017-06-01 19:42:21 309 1

转载学习使用：before和：after伪元素

伪元素能做什么呢？“伪元素”，顾名思义。它创建了一个虚假的元素，并插入到目标元素内容之前或之后。单词“pseudo”是希腊语的英译，它的基本意思是“说谎的，不诚实的，错误的。”因此叫伪元素是适合的。因为在文档中它不实际改变什么。相反的，它们是像幽灵一般的元素插入在css中，他们对用户是可见的，可以通过css控制。基本语法:before 和 :after 伪元素编码非

2017-05-31 19:38:54 480

原创 for in 循环

for(variable in object) for（变量 in 对象）var arr = ['one','two','three','four']; //数组也是对象数组对象arr.five = 'five';for(var p in arr){alert(arr[p]);//'one','two','three','four','five' 返回数组的值alert(p

2017-05-23 21:07:06 294

转载 HTML语义化

1、什么是HTML语义化？ “语义化”指的是机器在需要更少的人类干预的情况下能够研究和收集信息，让网页能够被机器理解，最终让人类受益。　　HTML 标签语义化是让大家直观的认识标签(markup)和属性(attribute)的用途和作用，很明显Hx系列看起来很像标题，因为拥有粗体和较大的字号。,用来区别于其他文字，起到了强调的作用。2、HTML语义化的目的是什么？

2017-05-23 19:15:52 367

转载 Javascript 普通函数和构造函数的区别

普通函数和构造函数的区别理解方式一：在命名规则上，构造函数一般是首字母大写，普通函数遵照小驼峰式命名法。在函数调用的时候：function fn() { } 构造函数：1. new fn( ) 2 .构造函数内部会创建一个新的对象，即f的实例 3. 函

2017-05-21 20:10:34 348

转载 draggable属性和dataTransfer对象

首先说下HTML5里新增的draggable属性在Html5中，默认和设置了href的是可拖动的，其他都需手动把元素的draggable属性设置为true然后使元素携带数据应该为被拖动元素的ondragstart（开始拖动触发该事件）事件指定监听器，在监听器中让拖动操作可以携带数据。之后为了让document接受放的动作，为documen的ondragover事件设定监听器，在监听器中

2017-05-16 09:57:32 1405

转载拖放操作之——dataTransfer对象

HTML5实战与剖析之原生拖拽-三dataTransfer对象HTML5拖拽的数据传输　　虽然通过dragstart、drag和dragend事件实现了原生拖拽。但是这仅仅是拖拽，在IE6和IE7中还是有些拖拽问题，并且也没有实现数据的交换。为了实现数据的交换，IE5引入了dataTransfer对象。dataTransfer对象是事件对

2017-05-16 09:55:11 1430

转载 HTML5 之文件操作(file)

前言在 HTML 文档中标签每出现一次，一个 FileUpload 对象就会被创建。该元素包含一个文本输入字段，用来输入文件名，还有一个按钮，用来打开文件选择对话框以便图形化选择文件。该元素的 value 属性保存了用户指定的文件的名称，但是当包含一个 file-upload 元素的表单被提交的时候，浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。

2017-05-12 11:17:32 1208

转载 Web SQL API

简介　　Web SQL数据库API实际上未包含在HTML 5规范之中，它是一个独立的规范，它引入了一套使用SQL操作客户端数据库的API。这些 SQL 语句可以直接在 js中编写运行，并且带有基本的数据库事务性的支持。兼容浏览器　　　　chrome 17+ Safari5+ opera11.6+ iOS Safari3.2+ Opera Mobil

2017-05-11 14:36:08 738

转载 Web Storage API

web storage内容web storage提供在浏览器端通过key/value的方式存储数据。包括以下两部分： session storage（会话级别的存储，会话结束后失效） local storage（持久性存储，用户主动删除或js操作清空） web storage优势web storage的提出的初衷主要是为了解决cookie在数据存储时

2017-05-11 14:34:11 455

转载 Application Cache API （二）

开展的对于HTML5及移动端性能方面的一些探索，而appcache我们更加关注的是缓存策略上对于性能的优化上的帮助，所以对于appcache的运行过程我们需要更加地清楚，上一篇Application Cache API （一）整体介绍了一下appcache，接下来会对appcache做一些黑盒测试，以便我们了解更多。　　这个demo中主要涉及到3类资源，两个页面，我们观察3类资源在不同

2017-05-11 14:31:17 332

转载 Application Cache API（一）

什么是Application Cache API？HTML5提供了一系列的特性来支持离线应用： application cache localStrorage web SQL & indexed database online/offline events本文要讲的是application cache。传统的web程序中浏览器也会对资源文件

2017-05-11 14:29:41 535

转载 Fullscreen API 全屏显示网页

第一次看到应用 Fullscreen API 全屏显示网页，是 FaceBook 中的照片放大。作为一个比较新的 API，目前只有 Safari、Chrome 和 FireFox 三种浏览器支持该特性。因为尚未发布正式版的标准，所以必须使用浏览器特定的方法，也就是应用添加前缀（webit/moz）的方法。这个 API 不仅能够使整个页面全屏显示，也可以使页面中的某个元素全屏显示。它的设计初

2017-05-11 10:22:56 1782

转载 onpopstate浏览器点击回退按钮时触发的事件

知识点：1、onpopstate事件，点击后退按钮(或者在JavaScript中调用history.back()方法)时触发；2、hash 属性：可对URL的锚部分（从 # 号开始的部分）进行操作（可读可写）；关于hash的链接点击打开链接需求：微信页面，在当前页面点击某处时，弹出一个覆盖整个手机屏幕的层，弹出这个层以后，点击微信屏幕的返回按钮时，隐藏弹出层

2017-05-10 14:58:13 1538

转载 HTML5 history API 有什么用？

HTML5 history API有什么用呢？从Ajax翻页的问题说起请想象你正在看一个视频下面的评论，在翻到十几页的时候，你发现一个写得稍长，但非常有趣的评论。正当你想要停下滚轮细看的时候，手残按到了F5。然后，页面刷新了，评论又回到了第一页，所以你又要重新翻一次。再或者，你想把这个评论发给别人分享，一面给了别人页面地址（为什么不直接复制呢？因为要连带视频等场景啊），一面

2017-05-10 11:24:15 613 1

知乎日报666

空空如也