Front-End
关注
分享
扫一扫
文章平均质量分 50
那等雨停吧
愿你有梦可依，有树可栖。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
使用xampp访问本地网页
使用xampp访问本地网页1.把文件放到D:\XAMPP\htdocs\code下 2.cmd->ipconfig获取IPv4 3.http://本地IP地址/code/example.html （或http://localhost/code/example.html只能在本地PC上访问）原创 2015-06-04 20:38:18 · 2381 阅读 · 0 评论 -
Angular实战记录---Date格式化
使用Date获取当前时间 this.trainTime = Date.now();Date pipe使用Angular自带Date pipe进行格式化 <span class="training-time">{{trainTime | date:'yyy-MM-dd hh:mm:ss'}}</span>美滋滋~2019-03-03 10:06:52...原创 2019-03-03 10:08:57 · 718 阅读 · 0 评论 -
Angular实战记录---使用Echarts及配置项Option解读
安装Echarts在自己的项目目录下安装npm install echarts --savenpm install ngx-echarts --save在module中载入ngx-echarts以备后用。import { NgxEchartsModule } from 'ngx-echarts';...@NgModule({ declarations: [ ......原创 2019-03-07 09:17:09 · 1871 阅读 · 0 评论 -
前端夯实基础（二）--- HTML（超文本标记语言）基础
1、超（Hyper）文本？可以加入图片、声音、动画、多媒体等内容，还可以与其他文件链接。2、标记语言标记语言就是一套标记标签。用标记来描述网页，把网页在浏览器中展示出来。3、标签类型双标签：head、body、div、span···单标签：br、hr、img···或块级元素：html、body、div、header、footer、nav、section、aside、arti...原创 2019-08-18 15:54:58 · 356 阅读 · 0 评论 -
前端夯实基础（三）--- HTML之Table
1、表格存在的意义显示格式数据。使表格数据在没有CSS的情况下，依然具备可读性。2、表格标签 W3School练习地址<table> <tr> <th>x列头</th> <th>y列头</th> <th>z列头</th> </tr> <tr> ...原创 2019-08-18 17:59:50 · 287 阅读 · 0 评论 -
前端夯实基础（四）--- HTML之Form
1、表单表单控件提示信息表单域 <form>之间的内容</form>2、<input />输入类型W3CSchool练习地址type：说明属于哪种表单text：单行文本框password：密码输入框，浏览器会将输入内容变成*******button：<input>标签会渲染成一个按钮<input type="button...原创 2019-08-18 23:58:32 · 250 阅读 · 0 评论 -
前端值得一探究竟特辑 --- meta标签属性总结
设置charset字符集此属性声明网页的字符编码方式。常用字符集：UTF-8：包含全世界所有国家需要用的字符GB2312：国家标准码，简体中文，6763个汉字BIG5：繁体中文，港澳台使用GBK：国标扩展，支撑繁体中文，包括全部中文字符...原创 2019-08-19 12:48:14 · 563 阅读 · 0 评论 -
前端值得一探究竟特辑 --- 特殊行内元素img
可设置宽高的行内元素图片预加载占位CSS3新增属性原创 2019-08-20 15:10:34 · 320 阅读 · 0 评论 -
前端夯实基础（五）--- CSS选择器及权重+彩蛋
CSS 参考手册+练习地址1、三种样式表行内样式表<h1 style="color:pink; height:20px"> 行内样式表 </h1>内部样式表：位于 <head> 标签内部被<style>包裹。<head><style> h1 {color:pink}</style><...原创 2019-09-08 22:34:20 · 190 阅读 · 0 评论 -
前端夯实基础（六）--- CSS的四个伪元素+彩蛋
1、:first-line用于向文本的首行设置特殊样式，只能用于块级元素。p{ width: 200px; color: #c0c0c0;}p:first-line { color: skyblue;}<p>海洋几乎涵盖所有的动物种类。海洋动物门类繁多，各门类的形态结构和生理特点可以有很大差异。微小的有单细胞原生动物，大的有长可超过30 m、重超过 1.90...原创 2019-08-22 13:56:24 · 432 阅读 · 0 评论 -
前端夯实基础（一）--- 浏览器内核
浏览器内核有市场就有竞争，大家都搞个内核想分一杯羹。常用五大浏览器：IE、火狐、Chrome、Safari和Opera。因此内核就有所不同。浏览器内核：渲染引擎（Render Engine）+Js引擎。内核说明Trident（IE内核）：国内多数双核浏览器的其中一核即为Trident，称为“兼容模式”。Win10发布后，内置浏览器为Edge，其新特点即是EdgeHTML内核。Ge...原创 2019-08-18 13:13:15 · 254 阅读 · 0 评论 -
前端值得一探究竟特辑 --- 字体大小单位px、em、rem、%
字体大小单位px、em、rem原创 2019-08-28 21:46:45 · 531 阅读 · 0 评论 -
前端夯实基础（七）--- 字体样式font属性
font-style、font-weight、font-size、line-height、font-family、font皆可被行内元素继承。1、font-stylenormal：正常italic：斜体2、font-weight数字以100为步长。400：normal700：bold3、font-sizepx：通常使用双数。任意浏览器的默认字体大小都是16px。em：...原创 2019-08-28 21:54:43 · 712 阅读 · 0 评论 -
前端值得一探究竟特辑 --- BFC(块级格式化上下文)、BFC清除浮动、BFC自适应两栏布局
参考文章以前对于BFC的理解相当肤浅和片面，这次决定把BFC好好理解清楚。1、块级格式化上下文(Block formatting context)并不是块级元素就是BFC呀，哎哟我滴小撒瓜···哭了···太难了···BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Bloc...原创 2019-08-29 14:07:14 · 243 阅读 · 0 评论 -
前端夯实基础（八）--- link与@import
link属于html标签，而@import是css提供的页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。link方式样式的权重高于@import的。...原创 2019-09-08 00:00:57 · 371 阅读 · 0 评论 -
Angular实战记录---ant Design手动上传
nzBeforeUpload 返回 false 后，使用手动上传按钮替换上传按钮。xxx.component.html &amp;amp;lt;nz-upload class=&amp;quot;import-excel&amp;quot; [(nzFileList)]=&amp;quot;fileList&amp;quot; [nzBeforeUpload]=&amp;quo原创 2019-03-02 15:47:52 · 1964 阅读 · 1 评论 -
Angular实战记录---Ant Design自定义Modal页脚
背景在Modal中设置了表单，通过Modal的OK按钮提交表单。但在提交表单之前会对表单内容进行检查，检查通过才允许提交，不通过的话则需要禁用OK按钮，用户要么修改表单内容使之合格，否则只能舍弃表单内容直接关闭模态框。Angular+AntDesign之Modal使用自定义的页脚按钮，当不符合提交时OK按钮进入 disabled状态，符合则可用。&lt;nz-modal[(nzVisib...原创 2019-02-18 17:09:14 · 3362 阅读 · 0 评论 -
Angular实战记录---可编辑表格
编辑流程1. 原始数据 赋值到 临时变量。2. 使用临时变量填充表格。3. 修改表格即修改临时变量。4. 取消修改，使用原始数据覆盖临时变量。5. 提交修改，使用临时变量的数据覆盖原始数据。全新的临时变量但我们在使用原始数据和临时变量时存在拷贝问题，即修改了临时数据，原始数据也发生了改变。归根结底，就是变量直接赋值的时候，新变量和原变量的地址指向同一块内存地址，所以改新变量，也会...原创 2019-02-16 17:06:43 · 1763 阅读 · 2 评论 -
Axure 8.0 ······N久以后的再探
前言其实当时 Axure 7.0 并没有坚持学下去，第一是觉得界面有些复杂，没那个耐心去学习他的功能以及欣赏他的魅力所在，虽然一直都知道他是如此的完美【害羞】··· 再次打开 Axure 时，他已经成长到8.0了，我有些忏愧，也很惊喜。把汉化已搞定，就上手了。虽然基本没学，但是再用时依然倍感亲切，谨以此文纪念与 Axure 的青涩时光····【捂脸】满满一颗少女心呀，一个软件都不放过···吼吼，废原创 2015-12-20 19:35:21 · 997 阅读 · 0 评论 -
CSS3折腾集
boder这里写链接内容这里写链接内容 background这里写链接内容 gradient这里写链接内容 filters这里写链接内容这里写链接内容box-shadow这里写链接内容 text-shadow这里写链接内容display position这里写链接内容 float这里写链接内容Text-align margin这里写链接内容 paddinganimat原创 2016-02-04 17:03:57 · 396 阅读 · 0 评论 -
CSS折腾集——选择器
:first-child选择某个元素的第一个子元素 B A:first-child 意味选择B元素的子元素中的第一个元素且为A的元素，A可以是标签名也可以是类名，若为类名，第一个元素必须是A类对应的标签类型，否则匹配失败.:last-child选择某个元素的最后一个元素 B A:last-child 意味选择B元素的子元素中的最后一个元素且为A的元素，A可以是标签名也可以是类名，若为类名，最原创 2016-03-07 08:51:57 · 424 阅读 · 0 评论 -
前端杂记
iframe可用在以下几个场景中： 1：典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe。 2：ajax上传文件。 3：加载别的网站内容，例如google广告，网站流量分析。 4： 在上传图片时，不用flash实现无刷新。 5： 跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源。onchan原创 2016-04-13 18:57:20 · 435 阅读 · 0 评论 -
学习正则表达式
这里分享一个正则表达式测试工具，学习的同时自己可以动手敲一敲。 正则表达式测试工具小栗子从W3C上，很容易学习到RrgExp对象的使用。 简单的举个小栗子。其实就是那个测试工具的简易版。var str='this is a string to test my regexp'; var re='s'; regexpFun(str,re); function regexpFu原创 2016-04-15 17:25:29 · 882 阅读 · 0 评论 -
JS控制HTML5媒体播放与暂停，及Chrome兼容的视频格式
嗨！嗨！嗨！嗨起来正常播放最近写了个小Dome，在Chrome和微信上播放视频和音乐，并通过按钮控制他们的播放和暂停。 经测试，目前Chrome和微信对 Html5的video/audio Tag支持良好。 嵌入背景音乐<audio id="backAudio" src="h5bg2.mp3" autoplay="autoplay" preload="auto" loop="loop"></au原创 2015-10-29 10:14:06 · 12069 阅读 · 0 评论 -
React学习笔记---生产周期方法
一个组件的一生实例化 存在期 销毁&清理期原创 2016-04-24 17:55:21 · 449 阅读 · 0 评论 -
垂直居中和水平居中总结
一 、table-cell#container{ width: 1300px; height: 700px; display: table-cell; text-align: center; vertical-align: middle;}#center{ display:inline/block/inline-block; }以上代码可原创 2016-06-02 22:04:50 · 584 阅读 · 0 评论 -
视频加载
默默动态添加video标签吧···我也不知道为什么，用了ajax，请求到一堆二进制···· 只能说学习是循序渐进的过程··· 遇到坑遇到难题，从容面对，能理解最好，不能理解就先记录，总有一天，见得多了，自然就理解了···原创 2016-06-02 19:34:07 · 912 阅读 · 0 评论 -
Javascript异常捕获
很久没写blog了，一直在积累知识，其实也就是看看vue，react的官方api，瞅着别人的demo，自己临摹点小demo。一直没有勇气也没有精力给自己一个构建blog的勇气。总是不自信，其实也不见得是不自信，前端技术如今广度越来越广，深度越来越深。没个扎实的基础你能张口说你会前端？你敢拍着胸脯说你精通javascript？ 反正我不敢，知识积累没达到一定境界，问必能答，我都不敢。是的，对于技术，原创 2016-07-19 14:09:59 · 513 阅读 · 0 评论 -
JS获取当前日期前7天
function getStandardDate(){ var _date=new Date(); var year=_date.getFullYear(); var month=_date.getMonth()+1; var day=_date.getDate(); if (month<10) { month='0'+month; }原创 2017-04-18 17:20:02 · 4702 阅读 · 0 评论 -
jQuery File Upload踩坑记录
jQuery-File-Upload官网官方实例HTML:<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>依赖：<script src="js/jquery.min.js"></script><script src="js/vendor/jquery.ui.widget.js"></原创 2017-04-19 14:16:12 · 27668 阅读 · 5 评论 -
Angular实战记录--创建工程
前言Angular已经成熟到自有构建工具的地步，无奈之下接触angular的我还是尤为激动的。官网的Heroes小项目跑一遍下来，基本上就上手了。懒一点的小伙伴可以直接下载官网的程序包angular-quickly-start（这是我自己跟着跑一遍的代码哈，不是官方下载滴，也可以在这个基础上进行修改，变成自己的项目架构），跑一跑，理一理，基本就可以上手开发啦。对于像我这样的初等选手，我还是打算...原创 2018-11-17 13:34:37 · 583 阅读 · 0 评论 -
Angular实战记录--工程结构分析
Angular官方网站讲解得非常详细，这里我特别说明几个文件是需要我们关注的。app.module.ts文件项目里需要用到的包，比如ant design，echarts的模块包都需要在这里统一导入，这样才能在其他页面、组件里进行导入。import { BrowserModule } from '@angular/platform-browser';import { NgModule } f...原创 2018-11-27 20:28:10 · 525 阅读 · 0 评论 -
Angular实战记录--主从组件数据传递
父组件向子组件传递数据子组件向父组件传递方法原创 2018-11-28 13:46:02 · 613 阅读 · 0 评论 -
前端值得一探究竟特辑 --- 五种垂直居中
1、利用inline元素和伪元素设置伪元素。vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。即：有两个行内元素a和b，a和b都是img，如果a加了vertical-align:middle样式，b的 底部（基线) 就会对齐a的中间位置；如果a和b都加了一个vertical-align:middle样式。那么就互相对齐了对方的中间位置；也就是它们在垂...原创 2019-09-16 10:48:04 · 521 阅读 · 0 评论