Bootstrap 网格系统

0311lc.com说: 本章节我们将讲解 Bootstrap 的网格系统(Grid System)。 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。 什么是网格(Grid)? 摘自维基百科: 在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的、水平的)组成的结构(通常是二维的)。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中,它是一种用于快速创建一致的布局和有效地使用 HTML ……阅读更多

phpstorm中的PHPDoc Comments注释生成器

0311lc.com说: 1. 生成代码注释块 将光标移动到php文件中 按组合键Alt + Insert会弹出生成器后选择PHPDoc Blocks后,选中所有列出的未添加注释文件列表后点击确定按钮,将自动生成代码注释,详见下方gif图 2. 更新代码注释 将光标移动到php函数参数小括号中 按组合键Alt + Enter会弹出修改菜单,选择Update PHPDoc Comment选项后,点击回车,即可。见下gif图。 —————&……阅读更多

数据库外键的使用以及优缺点

0311lc.com说:主键和索引是不可少的,不仅可以优化数据检索速度,开发人员还省不其它的工作, 矛盾焦点:数据库设计是否需要外键。这里有两个问题:一个是如何保证数据库数据的完整性和一致性;二是第一条对性能的影响。 正方观点: 1,由数据库自身保证数据一致性,完整性,更可靠,因为程序很难100%保证数据的完整性,而用外键即使在数据库服务器当机或者出现其他问题的时候,也能够最大限度的保证数据的一致性和完整性。 eg:数据库和应用是一对多的关系,A应用会维护他那部分数据的完整性,系统一变大时,增加……阅读更多

Babel

0311lc.com说:Babel 是一个 JavaScript 编译器,可以将 JavaScript 代码转换为…不同的 JavaScript 代码!具体来说,它能把用最新版 JavaScript 编写的 JavaScript 代码转换为被更多浏览器支持的旧版 JavaScript 等效代码。 Web 开发人员将 Babel 整合到流程中,就可以使用最新的 JavaScript 功能编写代码,无需担心浏览器兼容性。 小故事:Babel 不包括 Web API 例如,如果你在 JavaScrip……阅读更多

webpack

0311lc.com说:一、全面理解webpack 1、什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能。webpack的官网是 https://webpack.github.io/ ,文档地址是https://webpack.github.io/docs,官网对webpack的定义是MODULE BUNDLER,他的……阅读更多

swiper轮播图插件

0311lc.com说:一、简介 ①Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 ②Swiper 是一款免费以及轻量级的移动设备触控滑块的框架,使用硬件加速过渡(如果该设备支持的话)。主要使用与移动端的网站、网页应用程序(web apps),以及原生的应用程序(native apps)。 ③主要是为IOS而设计的,同时,在Android、WP8系统以及现代桌面浏览器也有着良好的用户体验……阅读更多

zeptojs库

0311lc.com说:一、简介 ①Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api。 ②Zepto的设计目的是提供 jQuery 的类似的API,但并不是100%覆盖 jQuery 。Zepto是一个5-10k的通用库、能够下载并快速执行、有一个熟悉通用的API,可以有效提高开发效率。 ③文档:中文文档 、GitHub 二、模块(参考文档) 注意:如果下载的文件只包含核心模块, Ajax, Event, Form, IE,如果需要使用其他模……阅读更多

webpack基本使用

0311lc.com说:一、概念 ①本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler) ②当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle ③参考文档:webpack中文文档 二、基本使用 1、输出hello world ①全局安装 npm install –global webpack ②准备目录……阅读更多

webpack配合babel使用

0311lc.com说: 一、babel介绍 ①Babel 是一个 JavaScript 编译器,可以把ES6的语法转为兼容浏览器的ES5语法 ②Babel中文官网:https://www.babeljs.cn/ ③Babel可以单独使用,但是一般都是和webpack结合一起使用 二、webpack里使用babel 1、babel-loader babel-core babel-preset-env (转换语法) ①安装依赖: // 已经在项目里安装了webpack的情况下 npm instal……阅读更多

webpack资源管理

0311lc.com说:一、概况 ①webpack不仅可以打包JavaScript模块,甚至它把网页开发中的一切资源的都可以当作模块来打包处理 ②但是webpack本身不支持,它只是一个打包平台,其他资源,例如css、less、sass、img等资源需要结合插件来实现,这些插件在webpack里被称为loader(加载器) 二、webpack打包其他资源 1、打包 css模块 ①安装依赖:style-loader  css-loader // css-loader 的作用是把css文件转为Jav……阅读更多

CSS3 新增选择器:伪类选择器和属性选择器

0311lc.com说: 一、结构(位置)伪类选择器( : ) 1、:first-child 2、:last-child 3、:nth-child(n)或者:nth-child(2n)或者:nth-child(2n+1) <body> <ul> <li>我是第一个</li> <li>我是第二个</li> <li>我是第三个</li> <li>我是第四个</li> <li&……阅读更多

CSS块元素、行内元素、行内块元素的转换

0311lc.com说:一、块元素转行内元素:display:inline 二、行内元素转块元素:display:block div{ display: inline; /*无效 width: 500px; height: 500px; */ background-color: red; } p{ display: inline-block; } span{ display: block; width: 400px; height: 300px; background-color: blue; ……阅读更多

彻底弄懂flex布局

0311lc.com说:目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了。什么是flex布局以及它的好处,这里就不再赘述。 在这篇文章里,想说说flex布局的属性语法及其细节。那么网上也有不少flex布局的教程,为什么又要再写一篇? 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光。先感受一下这12个flex布局属性,是不是很“迷”人。 容器属性 flex-flow flex-direction flex-wrap just……阅读更多

css3 Flex 布局

0311lc.com说:布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。 它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 css3 Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 注意: 1.dispaly:flex用在父元素上 2.flex-direction属性决定主轴的方向(即项目的排列方向)。flex-direction: row |……阅读更多

心跳(纯代码制作心形,animation动画)

0311lc.com说:思路:利用两个长方形(比例是2:3 | 3:2)可以合成心形,然后利用动画,缩放大小实现心跳(纯代码),效果如下: <body> <div></div> </body> div{ margin: 200px; width: 200px;/* 盒子1宽高是2:3 */ height: 300px; background: rgb(218, 9, 9); position: relative; border-radius: 10……阅读更多

css3 动画 animation

0311lc.com说:nimation 属性是一个简写属性,用于设置六个动画属性: 1.animation-name 规定需要绑定到选择器的 keyframe 名称。 2.animation-duration 规定完成动画所花费的时间,以秒或毫秒计。 3.animation-timing-function 规定动画的速度曲线。 4.animation-delay 规定在动画开始之前的延迟。 5.animation-iteration-count 规定动画应该播放的次,n或者infinite无限……阅读更多

css3 2D变形(transform)移动、缩放、旋转、倾斜

0311lc.com说:一. translate(x,y) 或者translateX(x)或者translateY(y) 注意点:translateX(x)和translateY(y)大写X和Y;只写一个值,默认y=0。 <body> <div></div> </body> div{ width: 200px; height: 200px; background: rgb(185, 24, 24); transition: all 1s; } di……阅读更多

鼠标经过图片会移动(css3过渡,overflow:hidden)

0311lc.com说:效果图如下: 代码: <body> <div><img src=”jd.jpg”></div> </body> img{ width: 250px; height: 250px; transition: all 0.6s;/* 过渡效果,图片实现效果,写在图片上 */ } div{ width: 240px;/* 宽度比图片宽度少10px */ height: 250px; border: 1px solid r……阅读更多