2018年11月_AsaZyf

12月 11月 10月 09月 07月 06月 05月 04月

原创响应式布局--入门案列

要求：iPad页面显示如下其他页面显示如下codeHTML：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale

2018-11-29 15:56:16 306

原创 CSS--盒子居中显示

HTMl：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no&quo

2018-11-28 20:49:07 412

原创 CSS--样式重置

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, ...

2018-11-28 20:45:19 193

原创 CSS文字隐藏

超出部分省略号显示code：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><style type="text/css"&

2018-11-27 16:14:32 1776

原创 Vue使用插件--轮播图

插件>>地址1.找到第一个点进去2.安装3.引入4.使用5.页面使用 ①新建swiper.vue②找到SPA复制template代码③绑定了变量得定义，删除不需要的代码④注意点，它的高度会相对于宽度撑开31.25%，实现宽高比平衡【图片】PS:不能写在height是因为height是相对于父级元素的...

2018-11-27 09:56:37 786

原创 Vue--自定义文件名缩写

找到build文件夹下的webpack.base.conf.js，在resolve里面定义文件名和文件位置

2018-11-21 21:54:41 530

原创 vue中使用stylus

1.在vue项目中用cmd敲下面这段代码npm install stylus-loader css-loader style-loader stylus --save2.下载成功后要查看Vue里面是否配置了3.使用stylus4.定义变量并调用文件后缀为styl，储存变量对应的样式引入自定义的文件【注意用的是@import】和使用...

2018-11-21 21:51:13 259

原创 Vue单文件组件和路由

单文件组件路由配置路由出口【显示】

2018-11-21 16:28:19 385

原创 flex实际应用-- flex-card布局

code:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&amp

2018-11-20 16:36:43 820

原创 CSS3用户界面--pointer-events

code:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>pointer-events</title><style type="text/css">.

2018-11-17 11:51:07 185

原创 CSS3用户界面--user-select

code：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>user-select</title><style type="text/css">div

2018-11-17 11:49:26 243

原创 CSS3用户界面--resize

code:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>resize</title><style type="text/css">div { wid

2018-11-17 11:43:13 169

原创 CSS3用户界面--cursor

code:<!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><title>cursor</title><style>.test { width: 400px; bo

2018-11-15 11:53:15 283

原创 CSS3--column-span

code:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>column-span</title><style type="text/css">body

2018-11-14 20:09:12 326

原创 CSS3多列属性--column-rule

code：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>column-rule</title><style type="text/css">body

2018-11-13 20:31:31 282

原创 CSS3多列属性--column-gap

code：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>column-gap</title><style type="text/css">body

2018-11-13 20:25:48 346

原创 CSS3多列

定义：参数：code:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>columns</title><style type="text/css"&

2018-11-13 14:29:42 150

原创 CSS3动画--@keyframes

定义：语法和参数：code：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>@KeyFrames</title><style type="text/css&quot

2018-11-12 21:44:03 369

原创 CSS3--animation属性复合

code：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Animation</title><style type="text/css">body {

2018-11-08 16:20:02 1885

原创 CSS3--animation(play-state)

code:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>animation-play-state</title><style type="text/css"&amp

2018-11-08 16:15:03 344

原创 CSS3--animation属性（fill-mode）

图片链接见https://blog.csdn.net/AsaZyf/article/details/83831462code:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>animation-fill-mode&lt

2018-11-08 11:29:42 426

原创 CSS3--animation属性（direction）

图片链接见https://blog.csdn.net/AsaZyf/article/details/83831462code：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>animation-direction&lt

2018-11-08 11:27:53 448

原创 CSS3--animation属性(delay和iteration-count)

delay:iteration-count:图片链接见https://blog.csdn.net/AsaZyf/article/details/83831462code:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title&g

2018-11-08 10:48:37 778

原创 Vue--利用路由完成todolist

目录文件：index.js：import Vue from 'vue'import Router from 'vue-router'import news from '@/components/news/news'import done from '@/components/news/pages/done'import nodone from '@/components/ne...

2018-11-07 21:11:17 354

原创 Vue--脚手架的搭建

1）什么是vue-cliVue-cli是官方推荐的快速构建单页应用的脚手架，用于快速构建vue项目目录，无需手动加载项目文件。我们需要知道项目的目录文件是由webpack打包工具为我们编译完成。2）安装node.js安装node.js，从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了，安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 nod...

2018-11-07 20:57:10 619

原创 CSS3动画--animation属性(name和duration)

animation-name:animation-duration:code:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>animation-duration</title>&

2018-11-07 20:45:53 1330

原创 CSS3--transition简写

code：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } div

2018-11-07 10:24:56 2675

原创 HTML5--底部导航

code：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initia

2018-11-06 17:22:06 8480 1

原创 Vue动画--组件的过渡

code：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Vue中组件的过渡</title> <script type="text/javascript" src="js/vue.js&q

2018-11-06 11:09:21 225

原创 Vue动画--两个元素过渡

code：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Vue中两个元素过渡</title> <script type="text/javascript" src="js/vue.js&

2018-11-06 11:08:28 232

原创 Vue动画--同时使用过渡和动画

code：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Vue中同时使用过渡和动画</title> <script type="text/javascript" src="js/vue.

2018-11-05 23:57:21 449

原创 Vue动画--使用 animate.css库

code：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>使用 animate.css库</title> <script type="text/javascript" src="js/vu

2018-11-05 16:02:31 194

原创 Vue动画--Vue中CSS动画原理

code：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Vue中CSS动画原理</title> <script type="text/javascript" src="js/vue.js

2018-11-05 15:42:04 200

原创 Vue--slot作业

require：将title和arrlist的内容显示在页面上code：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type=&quo

2018-11-05 15:07:26 247

原创 Vue--动态组件与v-once指令

code：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>动态组件与v-once指令</title> <script src="https://cdn.bootcss.com/vue/2.5.17-

2018-11-04 17:15:29 198

原创 CSS3--transform与坐标系统

explain：(默认以中心为转换点)code：

2018-11-04 15:47:44 2101

原创 CSS3 3D转换--rotate

rotateX：rotateY：transform：rotateY（angle）rotateZ：rotate3d：注意点：当x,y,z数值为0或小于0时无效果

2018-11-04 12:00:27 223

原创 CSS3 2D转换--扭曲skew

三种情况：skewX：skew(X)注意点：skew(Y):transform:skewY(angle)skew(X，Y):skew(X，Y)注意点：当只写一个值时，默认y值为0

2018-11-04 11:35:53 389

原创 CSS3 2D转换--缩放scale

缩放scale三种情况：scaleX：scaleY：scale(x,y)：

2018-11-04 11:13:29 388

原创 CSS3 2D转换--旋转rotate

explain：code：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>rotate</title><style type="text/css">

2018-11-04 00:27:06 622

Vue待办清单

用javascript一个很有名的框架写的，一个由中国人开发出来的框架VUE，具体用了HTML5，CSS3，javascript和Vue

2018-10-28

公益网页比赛作品星火公益

本网页是我用于参加学院网页比赛的作品，网站类型属于公益，里面的文章等都是我上网找的，有不懂的可以留言

2018-06-28

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人