cxzlp0521-CSDN博客

原创 angular4学习笔记（第九章服务器通信篇）

1.使用nodejs安装本地服务器（使用的是vscode编辑器）创建一个空的项目(什么都没有) 创建package.json npm init -y 引入 node 的运行定义文件 npm i @types/node -–save 创建tsconfig.json(node 本身是不认 typeScript 语言的，所以要将 typeScript ...

2019-02-26 11:20:03 290

原创 angular4学习笔记（第八章响应式编程篇）

1.Rxjs基础知识基本概念 Observable (可观察对象): 表示一个概念，这个概念是一个可调用的未来值或事件的集合。 Observer (观察者): 一个回调函数的集合，它知道如何去监听由 Observable 提供的值。 Subscription (订阅): 表示 Observable 的执行，主要用于取消 Observable 的执行。 Operators (操作符...

2019-02-22 10:25:05 328

1.模板式表单模板式表单使用ngForm、ngModel、ngModelGroup来完成，它们是FormsModule里的内容，所以在使用模板式表单时需要在app.module.ts中引入FormsModule。 ngForm会自动拦截标准的表单处理事件，angular用ngSubmit代替标准的表单提交ngForm隐式的创建一个FormGroup类的实例，代表表单的数据模型，用来存储表单数...

2019-02-19 16:27:46 285

原创 angular4学习笔记(第六章组件通信篇)

1.Input和Output用于父组件与子组件之间（数据）通信 input的用法创建父组件与子组件（ng g c parent , ng g c child）子组件界面（父组件与子组件的通信）子组件使用输入属性Input，从父组件传入两个变量（学生姓名与学生学号）父组件界面，添加两个输入框，向子组件传递信息 Output的用法（子组件与父组件的通信）创建分数类...

2019-02-15 11:48:06 224 1

原创 angular4学习笔记(第五章管道篇)

1.大小写管道<h2>大小写管道(只对字母有用)</h2><p>{{ 'angular的大写管道' | uppercase }}</p><p>{{ 'ANGULAR的小写管道' | lowercase }}</p>2.数字管道<h2>数字管道</h2>&

2019-01-24 15:39:55 273

原创 angular4学习笔记(第四章数据绑定篇）

1.插值表达式2.HTML、DOM属性绑定（待补充） 3.事件绑定4.样式、类绑定 5.双向绑定使用双向绑定[(ngModel)]需要在app.module.ts中引入FormsModule import{FormsModule} from '@angular/forms' imports: [ BrowserModule, ...

2019-01-24 14:15:21 145

原创 angular4学习笔记(第三章依赖注入篇）

1.依赖注入依赖注入是什么？依赖注入是“控制反转”（将实例化这个类的控制权交给外部，从而实现类与组件的解耦）的一体两面。控制反转是目的，依赖注入是手段。是不是不太明白，说得直白一点就是在程序运行过程中，如果需要调用另一个对象协助时，无须在代码中创建被调用者，而是依赖于外部的注入。依赖注入怎么用？我们在组件需要某个服务的实例时，不需要手动创建这个实例，只需要在构造函数的参数中指定...

2019-01-19 14:49:34 236

原创 angular4学习笔记(第二章路由篇)

1.路由导航2.创建带有路由的项目ng new routerdemo --routing3.Routes、RouterLInk、RouterOutlet组合的用法配置app-routing.module.ts 在需要用到路由的组件中插入RouterLink导航指令（此处使用app.component.html）在路由指令界面需要的地方放入路由插座RouterOutl...

2019-01-14 16:39:09 171

原创 angular4学习笔记(第一章基础篇)

1.环境搭配安装nodejs 使用npm -v 来查看版本安装angular cli 使用命令(npm install -g @angular/cli) 使用 ng v 来查看版本安装开发工具,使用的是 visual studio code 创建项目 ng new projectname 进入项目 cd projectname 启动项目 ng serv...

2019-01-04 17:34:58 192 4

原创不会ps，又不想花钱的证件照换底色方法

打开网站https://www.bgconverter.com/ 上传自己的证件照选择想要转换的底色转换好底色之后，单击右键转换好的图片，选择“图片另存为”，将图片保存到本地。打开在线ps工具网站https://www.uupoop.com/ 打开刚刚保存的图片使用印章工具在衣服任意处（颜色应和水印部分的颜色相似）按住ctrl键，点击鼠标左键松开鼠标...

2019-03-19 13:05:13 1328

转载 flex 布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

2019-03-06 09:56:58 159

原创伪元素妙用

1.content[String] - 使用引号包括一段字符串，将会向元素内容中添加字符串。 [attr()] – 调用当前元素的属性，可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。 [url()]– 用于引用媒体文件。2.清除浮动清除浮动的原因（子元素在父元素内使用了float后，脱离标准流，不占用位置，当父元素高度没有设置时，会影响后续元素的排版，清...

2019-01-25 16:45:45 171

原创输入框自定义清除按钮

1.结果展示（需要用到bootstrap，jquery）2.HTML代码 <div class="container"> <form class="form-signin" autocomplete="off"> <h2 class="form-signin-heading text-primary tex.

2019-01-19 11:38:01 2467 1

原创 CSS3动画，开关门

无聊练习的css动画效果1.效果展示2.html代码 <div class="wrap"> <div class="door-l"> </div> <div class="door-r"> &lt

2018-12-12 20:21:54 821

原创 CSS+jQuery实现轮播图

1.效果展示2.html代码<div class="wrap"> <div class="carousel">  <div class="arrow arrow-l">&lt;</div> <!-

2018-12-04 16:54:53 342

原创使用angular-cli创建angular2项目与引入ng-zorro

tips：使用的工具为visual studio code；下载地址为https://code.visualstudio.com/1.检查是否安装了node.jsnpm -v2.安装angular-clinpm install -g @angular/cli3.检查安装angular-cli是否成功ng v或者ng -version4.创建angular...

2018-11-22 17:15:19 1002 1

原创修改input中placeholder的字体样式

1.代码/* 谷歌、苹果浏览器 */::-webkit-input-placeholder { color: #fff; font-size: 14px;}/*火狐浏览器 */::-moz-input-placeholder { color: #fff; font-size: 14px;}/* IE浏览器 */::-ms-input-placeholder ...

2018-11-21 17:28:02 264

原创隐藏与修改滚动条样式

1.隐藏滚动条(只是隐藏滚动条，页面仍可移动)/* 谷歌、苹果浏览器 */::-webkit-scrollbar { display: none;}/* IE浏览器 */::-ms-scrollbar { display: none;}/* 火狐浏览器 */::-moz-scrollbar { display: none;}/* 欧朋浏览器 *...

2018-11-21 17:21:37 349 1

原创 bootstrap多选下拉列表

1.简单功能展示只包含了，多选与搜索功能效果如图（蓝色为我自己设的背景颜色，不是插件颜色） 2.html代码 data-live-search="true"为设置是否可以搜索 multiple设置是否可以多选 selectpicker 为插件所需的类（必填） ...

2018-11-20 10:06:15 523

原创导航栏下划线跟随效果

1.效果展示(颜色仅为了看出效果，可根据情况自行修改)2.html代码 <ul> <li class="active"> <a href="">option1</a> </li> <li> &

2018-11-19 16:56:51 2679 1

原创自定义radio和CheckBox

1.自定义CheckBox 采用label的for属性使用伪类：checked 效果： html代码 <div> <input type="checkbox" name="d" class="check" id="check" checked> <label for="ch

2018-11-06 15:43:18 114

原创 CSS3动画

1.CSS3编写的动画特效，效果可以自己试试看(把想要的效果的class放到相应元素内即可)/* 快速翻转动画 */@-webkit-keyframes flipInLeft { 0% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0.5 } 60...

2018-11-05 19:31:03 293

原创 jquery的表格插件dataTables的使用(一)

1.jquery—Datatable简单案列的使用用于前端界面已写好的table，使用非常方便，引用相应的js与css文件就可以使用（此文章为jquery-datatable插件最基本的应用方式）界面结果 2.使用步骤引入文件(采用CDN方式引入，网址https://www.staticfile.org/) //css文件<link rel="style...

2018-10-30 19:18:20 285

原创点击图片，弹框居中放大显示图片

1.结果展示 2.html代码 <div><img src="./images/face.gif" alt="" class="pimg"></div>  <div id="out

2018-10-22 11:18:47 3639 4

原创前端开发常用的在线工具网站

1.个人感觉比较好的国内免费CDN服务网站https://www.staticfile.org/2.在线学习网站https://www.w3cschool.cn/（w3cschool） http://www.runoob.com/（菜鸟教程）3.在线参考手册https://www.w3cschool.cn/dict/4.图标库http://www.iconfont.cn/（...

2018-10-10 10:17:28 1342

原创 bootstrap页面头部用户图像下拉菜单

1.界面展示2.HTML代码<div class="logo"> <div class="container-fluid"> <div class="row"> <div class="col-lg-10" style="background: #354144;

2018-09-26 18:13:29 6742 4

原创 bootstrap简单的页面布局

1.布局结构(头部固定,内容分为左右结构)2.结果展示3.HTML代码<div class="logo"> logo</div><div class="container-fluid"> <div class="row main"> <div class=&quo

2018-09-25 19:55:56 7819 7

原创 CSS样式格式化

1.采用淘宝的css样式初始化(不建议使用通配符*,会影响页面加载速度)body,h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; paddin...

2018-09-25 17:19:06 1726

原创一个简单的form表单登录界面

1.表单展示2.HTML代码<body><div class="main"> <div class="title"> <span>密码登录</span> </div> <div class="title-msg"

2018-09-21 15:50:42 41321 13

原创 vs code常用插件和快捷键

1.常用插件open in browser(用于打开浏览器浏览页面) beautify(用于更好的格式化代码,Ctrl+F1,输入beautify) HTML CSS Support(让 html 标签上写class智能提示当前项目所支持的样式) HTML Snippets(包含H5的智能提示) css peek(右键单击选择器时，选择“ Go to Definition 和 Peek...

2018-09-20 20:28:11 526

原创前端开发命名规范

1.HTML文件命名小写命名首页一般为index.html或者home.html(一般用index.html) 优先用英文,英文太长可用拼音简写团队开发应该统一命名规则尽量不要使用驼峰命名(驼峰命名语义性不高,html文件一般不分大小写,大小写切换有点麻烦,'-'连字符可以更好的表现出层次感) *建议JavaScript使用驼峰,html和css使用'-'连字符不要中英混...

2018-09-20 11:19:53 638

cxzlp0521的博客