- 博客(191)
- 收藏
- 关注
RSS订阅原创 css实现“加号”效果
实现下图的加号效果：若想实现这个效果， 只需一个div元素即可搞定。需要用到css的为了before和after， 以及border特性。先设置一个div便签 <div class="add"></div>再设置一个边框：.add { border: 1px solid; width: 100px; height: 100px;
2018-10-21 16:53:11
16303
3
原创 开始学习React—概述与演练（好文翻译）
这篇文章来自于Getting started with ReactReact基本概念的概览与演示, 如components, state和props, 以及提交表单, 从API获取数据或者部署React 应用到生产环境.自动我第一次学习JavaScript时就已经听说了React, 但是我要承认我看了它一眼就被它吓到了. 我看到它像混合着JavaScript的HTML, 这不是我们正要避免的吗...
2018-10-11 23:09:59
492
原创 script中的defer和async
script的使用方式在html页面中使用JavaScript的主要方法便是使用script标签. 它有两种使用方式. 第一种便是用src属性引用外部文件. 第二种是将JavaScript代码嵌套在script标签中. 如:<!-- 第一种--><script src="http://www.example.com/xxx.js&am
2018-09-18 14:03:06
391
原创 css清除浮动
清除浮动清除浮动的方法在网络上有许多文章总结了. 我为了加深记忆, 就写一篇吧. 我最喜欢的清除浮动方法是, 使用.clearfix<div class="father clearfix"> <div class="left">child1</div> <div class="right">child2&am
2018-09-10 21:27:39
244
原创 css选择器的优先级
四个等级css选择器的优先级规定了文档采用哪一种样式. 选择器的等级主要有以下四个等级(依次递减)行内样式(style声明)id选择器类, 伪类, 属性选择器元素选择器, 伪元素选择器当同一个元素有多个css规则时, 对照着上面的四个等级, 对每一个规则确定每个等级有几个选择器, 记下个数. 然后做下列运算. 行内样式的选择器个数乘以1000 id选择器的个数乘以10...
2018-09-10 11:50:51
375
原创 CSS居中全攻略
水平居中内联元素css的水平居中相对于垂直居中比较好些. 当要居中的元素是一个内联元素时, 只需要在其父元素上加上下面的一条css规则即可:text-align: center;块级元素要居中的是一个块级元素, 那么设置元素的左右外边距为zuto即可. 即下面的规则:margin-left: auto;margin-right: auto;多个块级元素多个...
2018-09-10 10:59:22
281
原创 meta viewport是干啥用的
meta初探在每个html页面的header部分常常会看见一个meta标签. 这个标签中最常写的就是下面的内容: &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"&gt;这个标签内...
2018-09-10 10:09:19
4223
原创 HTML语义化
什么事HTML语义化html语义化就是根据标签, 我就知道标签内的是啥内容. 比如: aside标签表示一个侧边栏, header标签表示头部, 而footer标签表示尾部. 这就是html语义化. 语义话可以更好的让我们理解文档内容. 一篇文档会根据内容区分结构, 这些结构我们就可以了赋予不同的标签, 比如header, footer, main, section, article等. ...
2018-09-10 09:27:51
293
原创 vue中组件通信(父子组件, 爷孙组件, 兄弟组件)
vue中我们常常用到组件. 那么组件总体可以分为如下的几种关系. 父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢? 父子组件通信根据vue中的文档可知, 组件的props属性用于接收父组件传递的信息. 而子组件想要向父组件传递信息, 可以使用$emit事件. 我们定义两个组件, 一个为父组件名为father, 另外一个为子组件child. 子组件通过props属性...
2018-09-04 16:38:06
18818
2
原创 如何写js中的继承
原型继承js中有原型的概念, 通过原型我们可以实现继承. 定义一个函数为animal, 在其原型上定义一个sayHello函数. 并生成一个新对象dog.function Animal(name){ this.name = name}Animal.prototype.sayHello = function() { console.log('hello')}var...
2018-08-31 07:57:01
329
原创 Linux中文件和目录的权限(r, w, x)
在linux中我们都知道文件和目录的本质都是文件, 但是在我们通常的口语化中常常将它们区分. 而且在linux, 文件和目录也是有区别的. linux中的基本权限是: r, w, x 这三个基本权限对应于文件和目录有着不同的含义. 经验老道的程序员也常常犯错搞不清楚. 文件/目录/权限 r w x 文件 读文件内容 修改文件内容 能执行程序...
2018-08-29 22:18:22
2368
原创 打印和换肤(vue简历编辑器)
打印当我们点击打印的时候可以调用window对象的print()方法. <button class="button" @click="print">打印</button>print(){ window.print() }打印的时候不能将侧边栏和多余信息也打印. 所以要将它们设置为none..page > aside { ...
2018-08-29 12:25:36
479
原创 typeof 和 instanceof
我们在检测数据类型的时候常用两种方法. 分别是typeof和instanceof. 但是这两种方法各有不同. typeoftypeof 是我们开始学JavaScript是就会学习的方法. 这个方法作用于不同的数据类型返回不同的值. 如下图所示: 从图中有几处需要我们注意的地方, 分别是undefined和null类型的返回值, object,array及function类型的返回...
2018-08-29 09:21:52
327
原创 完善登录逻辑, 完善项目/技能编辑以及分享功能(vue简历编辑器)
登录逻辑当我们登录的时候, 才会有登出. 那么我们只有在用户登录的情况下才显示登出按钮. 检测状态用hasLogin()来确定, 当检测到用户id时标明用户登录, 没有检测到时表明没有用户登录: <button class="button" @click="onLogout" v-show="hasLogin()">登出注意, hasLogin是在app的methods中的...
2018-08-28 17:58:19
644
原创 添加登陆注册功能(vue简历编辑器)
着重记录下思路以及关键代码. 完整代码请点击这里触发登录/注册机制当我们点击保存的时候, 检测是否有用户登录, 若没有用户登录, 则弹出登录框. 按情况让用户选择登录或者注册功能. <button class="button" @click="onClickSave">保存</button>onClickSave在vue实例app中的methods中定...
2018-08-27 22:20:20
1302
原创 项目初始化(vue简历编辑器)
项目的全部代码在这里, 这篇文章只会将主要的思路. 代码会不完整. 初始化这个编辑器如下图所示:基本结构为: index.html&amp;lt;div class=&quot;page&quot; id=&quot;app&quot;&amp;gt;&amp;lt;aside&amp;gt;&amp;lt;/aside&
2018-08-27 21:46:33
1027
原创 用vue做一个简单的button
项目准备安装parcelnpm i -D parcel-bundler-D的意思是给开发人员用的.基本结构index.htmlsrc button.vue app.js 在index.html中引入src/app.js, 而app.js中引入了vue和button.vue.src下的app.js和button.vue在src中写下b...
2018-08-19 10:36:28
8277
原创 模仿网易云音乐
这是饥人谷系统版的毕设。 每节课写完代码后我稍微回忆下思路。日后也好照葫芦画瓢。 下面几篇文章，我只着重记录思路， 代码只贴关键代码。 稍微完整的代码请点击这里leanCloud环境搭建七牛环境搭建对项目进行css布局在项目中使用发布订阅模式获取歌曲修改歌曲上传加载loading首页tab切换获取歌曲页面丰富歌曲页页面为歌曲添加歌词...
2018-08-16 16:22:15
2185
原创 为歌曲页添加歌词
上一节我们为歌曲页添加了封面。 这一节我们要为歌曲页添加歌词。 同样的， 我们的歌词在最初开始的时候并没有考虑在内。 我们回到song-form.js中，给data添加一个lyrics的属性表示歌词, 注意修改其它代码保证不会出错。 我们的歌词填在如下结构：<div class="song-description"> <h1><!--这里时歌名--...
2018-08-16 11:34:42
1203
原创 丰富歌曲页页面
在网易云的歌曲页中, 我们看到有一个封面. 当音乐播放时, 封面转动.首页让我们更新下song.html的页面结构:<div class="page" id="app"> <audio src="#"></audio> <div class="disc-container">
2018-08-15 15:48:41
2267
原创 获取歌曲页信息
页面结构歌曲也信息我们用song.html来展示。song.html中引入app.js来动态加载html结构let view = { el: '#app', template: ` <audio src="{{url}}"></audio> <div> <button class="play">播放</bu
2018-08-14 10:37:29
1268
原创 首页tab切换
前面几个文章说的是后台页面. 这一节我们说的是首页. 即index.html 我们的项目就是仿照网易云音乐(移动端). 打开控制台, 选择如下图: 基本结构页面的基本结构:<section id="tabs" class="globalTabs"> <ol class="tabs-nav"> <li class="active&qu
2018-08-14 07:36:27
1624
原创 上传加载loading
在上传歌曲的时候, 我们发现屏幕上只有左下角有个文字提示: 文件正在上传, 文件上传成功. 这对于用户来说, 看不看得见是一个问题, 更重要的是影响用户体验, 用户还不一定知道是否上传了呢. 因此我们需要做一件事情. 那就是在上传歌曲的时候, 加载一个loading动画, 让用户理解正在上传. loading的基本结构为&amp;lt;style&amp;gt; @keyframes loa...
2018-08-13 12:38:59
2625
2
原创 修改歌曲
将admin.html划分为几个模块. 页面逻辑新建歌曲当点击新建歌曲时, new-song高亮. 在song-form中填入歌曲信息, 点击保存后, 将歌曲加入到song-list中, 同时在leanCloud的Song中创建歌曲信息. song-list中加入歌曲项后, 高亮这个新添加的歌曲.上传歌曲点击左下方的区域, 上传文件, 上传成功后, 歌曲信息自动填...
2018-08-13 10:45:32
579
原创 获取歌曲
查看官方文档并添加API当我们进入页面或者刷新页面的时候要获取歌曲才行。 歌曲列表由song-list.js动态加载, 在song-list.js文件的model中添加如下函数:find() { var query = new AV.Query('Song'); return query.find().then( (songs)=> { this....
2018-08-10 08:57:53
424
原创 在项目中使用发布订阅模式
在上传歌曲的时候, 我们将歌曲名/歌手/外链会填入表单. 当我们点击保存时, 页面左侧的歌曲列表变回多出一首歌, 同时, 歌曲会保存在leanCloud的项目中. 可以把它抽象为发布订阅模式, 左侧的歌曲列表和将歌曲保存在leanCloud项目这一动作都是订阅者. 发布者就是提交表单这一动作.创建eventHub.js我们创建./js/eventHub.js:window.e...
2018-08-08 15:29:10
853
原创 对项目进行css布局
我们最终的项目大概想做成这样的. https://modao.cc/app/7LMoFzAGQXX45EzSw39JEotoeyMrFzo根据图纸, 我们写css布局. 这是大概布局: 对应的html代码为: (这是admin.html中的片段代码)&amp;lt;div class=&quot;page&quot;&amp;gt; &amp;lt;!-- 左侧栏 --&amp;g
2018-08-08 07:48:27
389
原创 七牛环境搭建
创建项目注册七牛账号, 进入控制台. 点击对象存储. 然后创建项目. 安装七牛的包. 由于七牛的包还依赖一个叫moxie的包. 所以moxie也要安装. moxie放在vendors/目录中npm i qiniu创建server.js文件点击这里查看源代码. 七牛提供客户端上传和服务端上传, 不管哪一种上传方式, 我们都要进行有一个授权凭证, 即uptoken. 七...
2018-08-03 14:24:01
851
原创 leanCloud环境搭建
注册并创建项目注册leanCloud后, 创建项目163-music. 之后控制台会出现项目的列表. 点击并进入这个项目, 出现项目的信息. 我们需要三个表_User, Song, PlayList. 其中_User已经存在, 我们只需创建Song和PlayList即可. 创建过程如下: 接下来我们创建表的列. 下面时三个表的列信息: _user: PlayList: ...
2018-08-03 10:32:17
2223
原创 npm install时--save和--save-dev的区别
dependencies和devDependencies在使用node开发时， 我们在工程中用到的包必须是package.json中列出。 而dependencies和devDependencies是package.json中的两个属性. 我们要用的包在这两个属性中列出即可. dependencies列出的包用于生产环境.devDependencies用于开发环境和测试环境.- ...
2018-08-03 09:15:07
838
原创 使用vertical-align属性除去图片下的间隙
当我们在一个元素中嵌入图片时, 会发现图片下面有一条空隙<style>div { border: 1px solid red; background: blue;}</style><div> <img src="https://images.cnblogs.com/cnblogs_com/libra-yong/991915/...
2018-07-25 13:06:06
1141
原创 Linux中的变量, locale, read, declare,ulimit
echo, 设置变量, 取消变量可以通过echo $var 的方式打印变量, 若系统中没有变量, 则不会打印任何东西变量可以直接设置. 假设要设置myName的变量, 则可以这样写:myName=HelloyongmyName就是新设置的变量, 其变量内容是Helloyong.可以使用unset 命令取消变量. 取消myName的变量:unset myName...
2018-07-25 07:55:30
608
原创 块格式上下文
css2.1中定义浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和overflow不为visible的块盒会为它们的内容建立一个新的块格式化上下文在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直距离由margin属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直m...
2018-07-24 15:58:54
249
原创 canvas之2d上下文
本文根据JavaScript高级程序设计(第三版)的15章所做笔记使用canvas时必须先指定width和height作为绘图区域. canvas的开闭标签之间的内容, 在浏览器不支持canvas标签时显示.getContext(contextType)用于获取上下文, contextType是上下文的类型, 值可以为&quot;2d&quot;, &quot;webgl&quot;等 填充和描边填充fill...
2018-07-24 13:40:38
1454
原创 层叠上下文与层叠顺序
层叠顺序在css2.1时代, 堆叠顺序遵循下面这张图. 图片来自这里层叠上下文满足一下条件的任意元素就会形成堆叠上下文.根元素 (HTML)z-index 值不为 auto的 绝对/相对定位一个 z-index 值不为 auto的 flex 项目 (flex item)，即：父元素 display: flex|inline-flexopacity 属性值小于1 的元素...
2018-07-23 15:09:27
414
原创 如何防止图片变形
在写代码的时候经常会使用image标签. 这个标签是用来嵌入图片的. 但是这个标签在一定程度下会变形. 所以我们可以使用其他方法来防止图片变形.div { background: transparent url(path/image.gif) no-repeat center; background-size: cover;}background是一个简写属性, url(...
2018-07-23 13:50:11
1041
原创 float布局, 清除浮动
float的bug我们时长使用float进行布局, 但是在使用float布局的同时, 常出现父级元素包不住子元素的情况. 比如:<div class="parent"> <div class="child"></div></div>css设置如下:.parent { border: 1px solid red;}.ch...
2018-07-23 12:58:28
389
原创 如何添加图标?
切图通过ps等软件, 将图片切成一个图片. 在页面中引入img标签.background-image: url(path)在一个div标签内设置其css属性, url的参数是图片的路径css image sprites这种图片也是我们常说的雪碧图(其实直译过来是精灵图).将多张图拼接成一个图片, 再用background-image应用到相应位置, 然后使用backgr...
2018-07-11 17:45:05
777
原创 Generator函数
GeneratorGenerator函数是ES6提供的异步编程的解决方案。它和普通的函数有第一定的区别。 在普通函数后面加上一对括号那么普通函数会执行并返回结果。 而Generator函数并不执行， 它返回的也不是运行结果， 而是一个遍历器对象.yield和nextyield用来暂停后面的操作, 我们可以使用next方法进行取值. next方法返回的是一个对象,这个对象有连个属性: ...
2018-06-18 22:56:17
201
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人