摘要: 一、背景 设计狮童鞋总是会设计各种高大上的效果图,比如下面这个土豪金的效果。 该图中“已阅读并同意相关服务条款”前面的复选框有一个金色的边框,打钩时是一个金色的对勾。接下来说说怎样实现该效果。 二、解决方法 1、纯css解决方法 在css3 选择器(三)一文中介绍过一个选择器【:checked】选择阅读全文
posted @ 2015-10-27 12:51 starof 阅读(4786) 评论(3) 编辑
摘要: css多栏自适应布局还是需要总结一下的,都是基本功。 一般使用position属性布局,或者用float属性布局,也可以使用display属性。 看资料说position适合首页布局,因为首页内容往往可以完全控制。float适合模板布局,模板中填充的内容无法控制。 一、左侧尺寸固定右侧自适应 1、浮阅读全文
posted @ 2015-08-20 15:55 starof 阅读(3239) 评论(6) 编辑
摘要: 一、包含块(Containing Block) 要讲position,首先就涉及到一个概念:包含块。 1、包含块介绍 包含块简单理解就是一个定位参考块,就是"大盒子里套小盒子"中那个大盒子。元素有positon属性就必然涉及到包含块。先简单总结一下。 1、初始包含块(Initial containi阅读全文
posted @ 2015-07-13 22:45 starof 阅读(639) 评论(0) 编辑
摘要: 一、浮动介绍 历史: 浮动属性产生之初是为了实现“文字环绕”的效果,让文字环绕图片在网页实现类似word中“图文混排”。 定位方式: 浮动让元素脱离正常流,向父容器的左边或右边移动直到碰到包含容器的边【经测试碰到padding即停】或者碰到其他浮动元素。文本和行内元素将环绕浮动元素。 Note: 1阅读全文
posted @ 2015-07-06 23:13 starof 阅读(2372) 评论(5) 编辑
摘要: 一、text-overflow 1、text-overflow作用 简单来说,text-overflow用来设置文本溢出时是否用省略标记(...) 准确的说是设置溢出的文本在不显示的情况下怎样展示给用户,直接裁剪掉?用省略(...)标记?或者显示自定义的string。 2、text-overflow阅读全文
posted @ 2015-05-30 23:21 starof 阅读(496) 评论(0) 编辑
摘要: 前提是定义了background-image属性,然后用background-attachment来指明背景图的位置是固定于视口的,还是随着包含块移动的。可简单理解为定义背景图片随滚动轴的移动方式。 取值: scroll:默认值,背景图相对于元素固定,背景随页面滚动而移动,即背景和内容绑定。 fix阅读全文
posted @ 2015-05-19 17:25 starof 阅读(6788) 评论(1) 编辑
摘要: 一、opacity属性 1、opacity 习惯上说“透明度”,其实应该叫“不透明度”。opacity 意思:不透明,而背景色的默认值:transparent意思才是“透明的”。所以opacity用来设置不透明度,取值从[0.0~1.0],代表从完全透明到完全不透明,0.0就和transparent阅读全文
posted @ 2015-05-19 14:23 starof 阅读(979) 评论(0) 编辑
摘要: 为什么要写这篇文章是因为 上面代码执行结果是这样的。按照我的理解,body在DOM中比html近,应该会按body h1中定义的绿色来显示文字,但是恰恰相反,文字颜色是紫色的。 原因现在我当然是知道的,因为css中优先级无视DOM树中节点的距离远近,就是说DOM树中的距离不会对元素优先级计算产生影响阅读全文
posted @ 2015-04-07 09:28 starof 阅读(5422) 评论(2) 编辑
摘要: 一、Webpack和gulp/grunt对比 1、Gulp和Grunt Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编 译,组合,压缩等任务的具体步骤,工具之后可以自动替你完成这些任务。 Grunt 弊端: 是基于文件流的(读到内存,替换),随着项目膨胀,会越来越慢,越阅读全文
posted @ 2018-05-24 08:57 starof 阅读(6) 评论(0) 编辑
摘要: 所有import进来的模块都export出去 本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:https://www.cnblogs.com/starof/p/9069336.html 有问题欢迎与我讨论,共同进步阅读全文
posted @ 2018-05-21 21:07 starof 阅读(3) 评论(0) 编辑
摘要: 核心模块CoreModule在整个系统中只加载一次,如何实现? 使用SkipSelf注解避免重复注入。 使用Optional注解 让SkipSelf作为可选,在第一次注入时候成功注入。 后续加了模块,后在declartions中声明后需要在exports中导出 这样只需要在app.module.ts阅读全文
posted @ 2018-05-21 20:33 starof 阅读(12) 评论(0) 编辑
该文被密码保护。
posted @ 2018-05-21 20:02 starof 阅读(0) 评论(0) 编辑
摘要: 一、todolist功能开发 <div id="root"> <div> <input type="text" v-model="inputValue"> <button @click="handleSubmit">提交</button> </div> <ul> <li v-for="(item, 阅读全文
posted @ 2018-05-19 23:10 starof 阅读(49) 评论(0) 编辑
摘要: 一、挂载点,模版和实例 二、Vue实例中的数据,事件和方法 1、v-html指令和v-text指令 v-html :不转义 v-text :转义过后的内容 <div id="root"> <div v-html="content"></div> <div v-text="content"></div阅读全文
posted @ 2018-05-19 23:09 starof 阅读(12) 评论(0) 编辑
摘要: CSRF(Cross Site Request Forgeries)跨网站请求伪造,也叫XSRF,通过伪装来自受信任用户的请求来攻击利用受信任网站。 与对比 xss:本网站运行了来自其它网站的脚本 csrf:其它网站对本网站产生了影响 一、攻击 利用用户登录态伪造http请求。 危害: 盗取用户资金阅读全文
posted @ 2018-05-16 15:57 starof 阅读(288) 评论(0) 编辑
摘要: 一、路由守卫 当用户满足一定条件才被允许进入或者离开一个路由。 路由守卫场景: 只有当用户登录并拥有某些权限的时候才能进入某些路由。 一个由多个表单组成的向导,例如注册流程,用户只有在当前路由的组件中填写了满足要求的信息才可以导航到下一个路由。 当用户未执行保存操作而试图离开当前导航时提醒用户。 A阅读全文
posted @ 2018-05-09 22:01 starof 阅读(251) 评论(1) 编辑
摘要: 一、辅助路由语法 同时控制多个插座内容。 第一步: 模版上除了主插座,还需要声明一个带name属性的插座 第二步: 路由配置中配置name为aux的插座上可以显示哪些组件,比如显示xxx和yyy组件。 第三步: 在导航时候,路由到某个地址时,辅助的插座上显示哪个组件 二、实例 聊天功能可以在任何页面阅读全文
posted @ 2018-05-09 07:12 starof 阅读(37) 评论(0) 编辑
摘要: 有3种方式 1、在查询参数中传递数据 2、在路由路径中传递数据 定义路由路径时就要指定参数名字,在实际路径中携带参数。 3、在路由配置中传递数据 一、在查询参数中传递数据 第一步:修改模版中商品详情链接,带一个指令queryParams 效果:点击链接会传一个商品id为1的参数过去。 第二步:在商品阅读全文
posted @ 2018-05-08 08:08 starof 阅读(22) 评论(0) 编辑
摘要: 一、子路由语法: 二、实例 在商品详情页面,除了显示商品id信息,还显示了商品描述,和销售员的信息。 通过子路由实现商品描述组件和销售员信息组件展示在商品详情组件内部。 1、新建2个组件修改其内容 重点是修改销售员信息组件,显示销售员ID。 2、修改路由配置 给商品组件加上子路由 3、修改produ阅读全文
posted @ 2018-05-08 08:07 starof 阅读(24) 评论(0) 编辑
摘要: 一、路由相关对象 Router和RouterLink作用一样,都是导航。Router是在Controller中用的,RouterLink是在模版中用到。 二、路由对象的位置 1、Routes对象 配置在模块中。Routes由一组配置信息组成,每个配置信息至少包含两个属性,Path和Component阅读全文
posted @ 2018-05-07 08:19 starof 阅读(26) 评论(0) 编辑
摘要: 运行时动态改变组件模版的内容。没路由那么复杂,只是一段html,没有业务逻辑。 ngContent指令将父组件模版上的任意片段投影到子组件上。 一、简单例子 1、子组件中使用<ng-content>指令来标记投影点 2、父组件中把要投影到子组件的投影点的html片段写到子组件的标签中 效果: 子组件阅读全文
posted @ 2018-04-09 08:31 starof 阅读(55) 评论(0) 编辑
摘要: 一、view钩子 view钩子有2个,ngAfterViewInit和ngAfterViewChecked钩子。 1、实现ngAfterViewInit和ngAfterViewChecked钩子时注意事项 以父组件调用子组件方法 中例子为基础,在父组件中实现ngAfterViewInit和ngAft阅读全文
posted @ 2018-04-09 08:24 starof 阅读(358) 评论(0) 编辑
摘要: 组件声明周期以及angular的变化发现机制 红色方法只执行一次。 变更检测执行的绿色方法和和组件初始化阶段执行的绿色方法是一个方法。 总共9个方法。 每个钩子都是@angular/core库里定义的接口。 虽然接口不是必须的,Angular检测到钩子方法就会去执行它,还是建议把接口写上。 一、钩子阅读全文
posted @ 2018-04-03 08:07 starof 阅读(288) 评论(0) 编辑
摘要: viewChild装饰器。 父组件的模版和控制器里调用子组件的API。 1、创建一个子组件child1里面只有一个greeting方法供父组件调用。 import { Component, OnInit } from '@angular/core'; @Component({ selector: '阅读全文
posted @ 2018-04-02 07:50 starof 阅读(277) 评论(0) 编辑
摘要: 填充样式主要针对fillStyle。fillStyle除了可以赋值为color,还可以赋值渐变色,包括线性渐变色和径向渐变色,还是和css3里的内容类似。 一、线性渐变 1、设置线性渐变的填充样式 设置线性渐变的填充样式需要2步骤 1、设置渐变线段 通过2个坐标确定渐变线段,来定义渐变的方向和尺度。阅读全文
posted @ 2018-03-29 08:16 starof 阅读(183) 评论(0) 编辑
摘要: 一、canvas是基于状态的绘图环境 1、canvas是基于状态的绘制 context.moveTo(100,100); context.lineTo(700,700); context.lineWidth=10; //直线的宽度状态设置 context.strokeStyle="#058"; //阅读全文
posted @ 2018-03-27 23:04 starof 阅读(33) 评论(0) 编辑
摘要: 图形变换。 一、画一片星空 先画一片canvas.width宽canvas.height高的黑色星空,再画200个随机位置,随机大小,随机旋转角度的星星。 window.onload=function(){ var canvas=document.getElementById("canvas"); 阅读全文
posted @ 2018-03-27 21:39 starof 阅读(526) 评论(0) 编辑
摘要: 一、线条的帽子lineCap 取值:butt(默认值),round圆头,square方头 var canvas=document.getElementById("canvas"); canvas.width=800; canvas.height=800; var context=canvas.get阅读全文
posted @ 2018-03-27 08:03 starof 阅读(185) 评论(0) 编辑