用html和css轻松实现康奈尔笔记(5R笔记)模板
缘起人家都说康奈尔笔记法，很好用呢，能抵抗遗忘曲线，让你的笔记事半功倍，有兴趣的同学自行百度哈。网上有很多现成的模板，下载下来之后吧，看着好像在上面写英文可能更方便一点，行距很小，而且还有网址在上面，心里不是很乐意的说呢。后来想着自己在word或者excel里面做一个模板出来，后来愣是不会把一个表格的一行设置成占总表格的70%，最终放弃，后来想起来，css里面是可以用cm做单位的呀，为什么不自己写一个呢，只用div就可以了呀实现先把一个div设置成A4纸的大小，宽21cm，高29.7cm
HTML的三种布局：DIV+CSS、FLEX、GRID
Div+css布局也就是盒子模型，有W3C盒子模型，IE盒子模型。盒子模型由四部分组成margin、border、padding、content。怎么区别这两种模型呢，区别在于w3c中的width是content的宽，IE的width是content+border+padding。具体的可以看下面的图：W3C盒子（标准盒子）：IE盒子：Flex弹性布局通过使用display：flex；或者display：inline-flex；坏处就是不能再设置子元素的float、clear、vertical-align。在这里面主要是在元素里建立主轴（mainaxis、横向的、水平的），交叉轴（crossaxis、垂直的，竖向的）。主轴从左到右，左是mainstart，右是mainend，之间是mainsize。交叉轴是从上到下，上是crossstart，下是crossend，之间是crosssize。如图所示：就用这个为例子嘛：
网易新闻《娱乐圈画传》H5 的动画技巧
今天看到一个非常喜欢的H5，又是网易出品的！于是，我忍不住去研究了他的实现方式，有3个值得我们学习的地方，分别是逐帧动画，多种变换叠加的css动画，还有最亮的：画中画动画的实现方式，下文将分享技术实现方式。实验环境，采用chrome开发者工具：一、逐帧动画这个h5，几乎没有采用gif图片，大部分采用css的方式实现的逐帧动画。比如上图，每一帧的尺寸是500px1000px，共有8帧，存成雪碧图的形式。CSS雪碧即CSSSprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。好处是减少你的网站的HTTP请求数量。重点在于这句代码animation:people_ani1ssteps(1,end)infinite;其他如下：
浅谈，html\css脱离标准文档流相关
（个人知识有限，难免有误，请见谅）标准文档流，顾名思义，是要按照一定规矩排列的，默认的就是元素会从左至右，从上至下排列，块级会独占一行，行内元素会和小伙伴们共享一行。本来在标准文档流下，各个元素相安无事，可突然有一天某个元素心想啊，我那么优秀，不该出现在这里啊，于是它成精了，它发现了一道大门走向另一个空间BFC。BFC：直译为“块级格式化上下文”，这是一个独立的区域，这个区域与外部没有关系了，互不招惹，个人常用的会开启BFC空间的方式有1.float的值不是none2.position的值不为relative和static3.display为inline-block4.overflow不为visible当然还有其他的方式会产生BFC，这里就不列举了。先说说float，浮动，它会相对于自己最近的父元素进行定位，往左或者往右，这种方式会给我们布局带来便利，也可以变相的清除一些空文本给我们带来的不必要的空隙，但是使用它的时候需要注意清除它，不然由于它会脱离文档流的缘故，它的兄弟元素会跑到它原来的位置占位，或者它的
2017-2018年终总结与新年计划
2017-2018年终总结与新年计划今天2017.12.30，后天就是2018了，就要与2017说再见了，觉得这年过的好快，这周一直在思考即将过去的一年自己付出了多少，收获了多少，失去了多少。回头看去年年终总结，自己定下的一个个小目标有好多还没实现，不是不想实现，只是有时计划赶不上变化，个人精力有限，觉得自己要学的、想学的还有好多好多，但鱼和熊掌不可兼得(丑和贫穷可以，哈哈)，只能做出选择有个先后顺序，我们每个人都是在人生的路上不停的做选择题，选择机会可能会失去另一个机会，但不管怎样，还是要回顾一下，也算是为自己过去一年不停做选择题交一个答卷，自己给自己一个KPI绩效。还是按照去年那样，从工作学习生活感情四方便做个总结。一、2017年总结下面是自己去年定的新年计划，一条一条对照觉得好惭愧。1.工作工作上原本想着能加薪，也想到可能我们项目也会搬到东莞松山湖，可万万没想到的是项目直接不做了，然后变相裁员，外包就是这种，其实自己也想工作能稳定一些，可身不由己，这样就造成简历上换工作太频繁，记得科脉的HR看到简历直接说跳槽太频繁了，不
ABP .Net Core Entity Framework迁移使用MySql数据库
一、迁移说明ABP模板项目EntityFrameworkCore默认使用的是SqlServer，也很容易将数据库迁移到MySQL，步骤如下。二、迁移MySQL步骤1、下载项目请到http://aspnetboilerplate.com/Templates下载一个新的项目，选择ASP.NETCore2.x标签，TargetFramework:选中.NetCore就可以了。2、移除默认SQLServer相关包在EntityFrameworkCore项目下移除包Microsoft.EntityFrameworkCore.SqlServer、Microsoft.EntityFrameworkCore.Design3、添加MySql程序包添加程序包Pomelo.EntityFrameworkCore.MySql、Pomelo.EntityFrameworkCore.MySql.Design4、修改源代码修改DbContextConfigurerpublicstati
.NET开发一个微信跳一跳辅助程序
昨天微信更新了，出现了一个小游戏“跳一跳”，玩了一下赶紧还蛮有意思的但纯粹是拼手感的，玩了好久，终于搞了个135分拿了个第一名，没想到过一会就被朋友刷下去了，最高的也就200来分把，于是就想着要是开发个辅助就好了，于是简单想了一下最高游戏先来说下这个游戏的界面和规则：先看看界面规则：按住屏幕按一定时间松开就可以跳跃，跳跃到前方的图案中得1分，图按中间得2分（连续多个中间累加2分，比如第一个2分第二个4分第三个6分最高累计32分）其它规则不说明了整理了下实现原理，其实挺简单的：就是计算黑人的底部到图案中间的距离，然后就调试时间，调好时间后就计算一个像素点的最佳时间X，然后以后每次测试黑人底部到图案中心的距离*X就是最佳时间理论知识好了就来实践把1、首先要获取手机屏幕的图片并展示在winform程序里面2、让客户点击黑人底部和图案中心点（根据图片去获取这两个点貌似有点困难至少我现在的技术困难）3、模拟屏幕按下并按住多长时间获取屏幕图片我们可以根据安卓的adb.exe来获取，但我对这个东西不太
分布式消息队列 RocketMQ 源码分析 —— 事务消息
������关注微信公众号：【芋道源码】有福利：RocketMQ/MyCAT/Sharding-JDBC所有源码分析文章列表RocketMQ/MyCAT/Sharding-JDBC中文注释源码GitHub地址您对于源码的疑问每条留言都将得到认真回复。甚至不知道如何读源码也可以请教噢。新的源码解析文章实时收到通知。每周更新一篇左右。认真的源码交流微信群。1.概述必须必须必须前置阅读内容：《事务消息（阿里云）》2.事务消息发送2.1Producer发送事务消息活动图如下（结合核心代码理解）：
视频演讲： 从码农到CTO再到CEO过程中的认知升级
概要在一个销售渠道驱动的公司里，推动将技术服务业务，走向技术驱动业务的过程，从中孵化出一个2B的创新项目，如何建立一个扁平开放高效的研发团队，在创业的初期阶段如何与地推销售团队形成相互辉映，想和大家简单分享一些经验与思考。个人简介刘小明，广州经传集团CTO，EGO会员，十年前开始就职于广州经传集团，现担任集团分支（美美发项目）的CEO，同时兼任集团CTO，希望在一个销售渠道有强烈优势的集团公司里，建立一个“自驱自律自组织”的大技术团队，实现技术驱动业务，全面提升产能的梦想。同时也寄期望于使用新技术来优化提升传统服务行业的效率和盈利模式，透过互联网来为传统行业赋能，奉献一小份力量。全球架构师峰会（InternationalArchitectSummit，下简称ArchSummit）是由InfoQ中文站主办的一次全球性架构师峰会。ArchSummit专门针对架构师人群，讲述与架构和架构师相关的各方面趋势、技术和案例。这也是继QCon之后，InfoQ中文站主办的又一次高端技术盛会。
React应用架构设计
前言现在已经有很多脚手架工具，如create-react-app，支持一键创建一个React应用项目结构，很方便，但是享受方便的同时，也失去了对项目架构及技术栈完整学习的机会，而且通常脚手架创建的应用技术架构并不能完全满足我们的业务需求，需要我们自己修改，完善，所以如果希望对项目架构有更深掌控，最好还是从0到1理解一个项目。项目结构与技术栈我们这次的实践不准备使用任何脚手架，所以我们需要自己创建每一个文件，引入每一个技术和三方库，最终形成完整的应用，包括我们选择的完整技术栈。第一步，当然是创建目录，我们在上一篇已经弄好，如果你还没有代码，可以从Github获取：gitclonehttps://github.com/codingplayboy/react-blog.gitcdreact-blog生成项目结构如下图：src为应用源代码目录；webpack为webpack配置目录；webpack.config.js为webpack配置入口文件；package.json为项目依赖管理文件；yarn.lock为项目依
『安全开发教程』年轻人的第一款弱口令扫描器(x-crack)
首发于我的征途是星辰大海写文章登录『安全开发教程』年轻人的第一款弱口令扫描器(x-crack)netxfly10hoursago『安全开发教程』年轻人的第一款弱口令扫描器(x-crack)概述我们在做企业安全时，弱口令检测是系统/网络安全的最基础的部分之一，根据经验，经常会出现弱口令的服务如下：FTPSSHSMBMYSQLMSSQLPOSTGRESQLREDISMONGODBELASTICSEARCH那咱们就一起用GO来写一款常见服务的弱口令扫描器，且支持以插件的形式增加新的服务扫描模块。我们的教程暂定为只扫以上服务。给扫描器启一个屌炸天的名字x-crack，在$GOPATH/src/中建立一个x-crack项目后开始撸码，不要给我说什么底层原理、框架内核，老夫敲代码就是一把梭。开发完毕的项目地址为：https://github.com/netxfly/x-crack开工数据结构定义扫描模块的输入内容为为IP、端口及协议的列表，我们需要定义一个IpAddr的数据结构；每个服务的每次扫描需要传入的参数为IP、端口、协议、用户名和
每日一博 | 为什么 43% 前端开发者想学 Vue.js
根据JavaScript2017前端库状况调查Vue.js是开发者最想学的前端库。我在这里说明一下我为什么认为这也是和你一起通过使用Vue构建一个简单的App应用程序的原因。我最近曾与EvanYou，ChrisFritz，SarahDrasner，和AdamJahr做了一个介绍视频，而现在你可以在http://vuejs.org首页找到它。以下是该视频的文字版本。伟大的JavaScript迁移如你所知，JavaScript在过去的10年中已经成熟了很多，而且服务器端正常运行的大部分代码已经迁移到浏览器中了。随着这变得越来越复杂，框架也变得越来越有组织性。我不打算告诉你为什么一个比另一个更好的，虽然在官方网站有一个详细的比较。Vue.js旨在成为一个平易近人，多功能，高性能，可维护性，可测试的JavaScript框架。Vue的目也是为了进步，意思就是如果你有一个现有的应用程序存在只占一个部分的前端，你需要更多的互动体验那么就可以使用Vue。或者，您也可以从一开始就在前端构建更多的业务逻辑。Vue的核
挖洞经验 | 可以被XSS利用的HTML标签和一些手段技巧
XSS让我们在渗透中有无限的可能，只要你发挥你的想象。引用一位前辈总结的很贴切的一句话——“XSS使整个WEB体系变得具有灵性”。网上关于XSS的教程数不胜数，转载来转载去的，就是那么些Payload，可能看的人晕晕的不知所以然。而且还有很多Payload就算把其中的HTML代码闭合后写在自己的前端中，都不一定触发，因为很多老的标签和事件都已经被W3C给废弃了。本文首先给大家总结一下目前通用可以拿来构造XSS的HTML标签和一些标签事件，然后再给大家讲述一些绕过的技巧，教你在么构造出属于你自己渗透时真正需要的Exp。可以成功执行的标签
jQuery| 添加多个标签元素
在jquery中如何实现添加多个标签元素？通过append()、prepend()after()、before()方法添加若干新元素下面的例子中，我们创建若干个新元素。这些元素可以通过text/HTML、jQuery或者JavaScript/DOM来创建。然后我们通过append()方法把这些新元素追加到文本中（对prepend()同样有效）：functionappendText(){vartxt1="
文本。
";//使用HTML标签创建文本vartxt2=$("").text("文本。");//使用jQuery创建文本vartxt3=document.createElement("p");txt3.innerHTML="文本。";//使用DOM创建文本textwithDOM$("body").append(txt1,txt2,txt3);//追加新元素}注意：vartxjQuery 删除元素
通过jQuery，可以很容易地删除已有的HTML元素。删除元素/内容如需删除元素和内容，一般可使用以下两个jQuery方法：remove()-删除被选元素（及其子元素）empty()-从被选元素中删除子元素jQueryremove()方法jQueryremove()方法删除被选元素及其子元素。
jQuery |获取并设置样式css
jQuery操作CSSjQuery拥有若干进行CSS操作的方法。我们将学习下面这些：addClass()-向被选元素添加一个或多个类removeClass()-从被选元素删除一个或多个类toggleClass()-对被选元素进行添加/删除类的切换操作css()-设置或返回样式属性实例样式表.important{font-weight:bold;font-size:xx-large;}.blue{color:blue;}jQueryaddClass()方法下面的例子展示如何向不同的元素添加class属性。当然，在添加类时，您也可以选取多个元素：$("button").click(function(){$("h1,h2,p").addClass("blue");$("div").addClass("important");});
jQuery设置或返回元素样式属性。
jQuerycss()方法css()方法设置或返回被选元素的一个或多个样式属性。如需返回指定的CSS属性的值，请使用如下语法：css("propertyname");设置CSS属性语法css("propertyname","value");例子将为所有匹配元素设置background-color值：$("p").css("background-color","yellow");设置多个CSS属性语法css({"propertyname":"value","propertyname":"value",...});map集合形式，键值对的方式进行设置，以逗号隔开。例子将为所有匹配元素设置background-color和font-size：实例$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery处理元素和浏览器窗口的尺寸
元素的宽高width()和height()方法width()方法设置或返回元素的宽度（不包括内边距、边框或外边距）。height()方法设置或返回元素的高度（不包括内边距、边框或外边距）。下面的例子返回指定的