orangeVege-CSDN博客

原创 Css盒模型

Css有两种盒模型:盒子模型的组成为：border、padding、margin、content（内容）标准模式:标准模式下的盒模型的宽度仅为内容的宽度，即content（内容）的宽度。怪异模式（IE模式）：盒子模型的宽度为content+padding+border...

2019-06-22 15:43:51 104

原创 grid之表格属性及css函数

css函数repeatfit-contentminmax1、repeat：跟踪列表的重复片段，允许大量显示重复模式的列或行以更紧凑的形式编写可用范围：grid-template-column，grid-template-row实例：repeat（auto-fill，minmax（50px,100px））auto-fill:以网格项为准自动填充，auto-fit：以网格容器为准自动...

2019-06-19 21:02:37 334

原创 grid之网格属性

网格容器中的属性：displaygrid-template（网格模板）：控制网格行数、列数（grid-template-rows、grid-template-columns）gap：单元格之间的空隙items：定义网格项之间的对齐content:内容之间的对齐grid-auto：自动生成的网格这五个可以合并为：grid1、display：grid | inline-gird | s...

2019-06-19 19:45:15 383

原创 grid布局之grid属性详解

功能特点：术语：1、grid container网格容器：元素应用 display：grid；它是其所有网格项（网格项）的父元素网格项：是网格容器的子元素，display：grid下的子元素称为网格项2、grid line网格线（组成网格项的分割线）3、grid track网格轨道：两个相邻的网格线之间为网格轨道（不相交）特点：顶到容器边缘4、grid cell网格单元：两...

2019-06-19 07:53:50 3731

原创 grid布局-网格与表格的关联及应用

详解网格：布局有优势，布局与网格类似，淘汰了表格布局性能缺陷。表格：性能缺陷，表格标签容易10秒钟，页面空白div布局：块级布局，多个div放同一行，诞生float布局，float布局简单，诞生了position布局（放大缩小可能错位），诞生了inline，float+position+inline称为hack布局。hack布局（竖直方向对齐不容易）诞生了弹性盒模型（flexbox）（只能...

2019-06-19 07:52:06 605

原创 Vue之Css动画

Vue中动画实现解析：给实现动画效果的元素用transition包裹，这个是Css3中的过渡属性，再添加style样式,v-enter-active和v-leave-active 会在动画执行的整个过程，v-enter和v-leave为初始值，v-enter-to和v-leave-to为动画最终效果。代码：<!DOCTYPE html><html> <hea...

2019-06-04 22:10:43 383

原创 Vue作用域插槽详解

作用域插槽使用场景：用于将子组件的数据显示到父组件，但样式，由父组件决定。代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"...

2019-06-04 10:52:57 859

原创 Vue观察者模式

Vue观察者模式详解：观察者模式，又称订阅发布模式（总线），用于非父子关系的vue组件之间的值的传递。代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>组件间的传值，Bus/总线/订阅发布模式/观察者模式</title> </h...

2019-06-01 16:49:55 961

原创 Vue之axios跨域

app.use(function(req, res, next){ //设置跨域访问 res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, ...

2019-05-30 14:44:56 227

原创 Vue之小知识点(标签中嵌套模板)

Vue之模板的使用小知识点：解决方案之模板在table和ul中使用的小知识点：解析：在table表格中使用模板，名字为定义的模板名称，在页面上会显示在table外，解决方案，将模板名称改为tr(table中的组件),可以使用tr标签中加is="模板名称"。代码：<!DOCTYPE html><html> <head> <meta char...

2019-05-24 16:50:07 1365

原创关于font-face图标使用小知识点

在iconfont中使用字体图标：先在css中引入在线代码，css中的配置文件格式为：//如果iconfont上的图标代码为//在css中引用格式为：标签名:before{ content:"\e636";}...

2019-05-16 14:44:02 267

原创原生js轮播代码的实现

html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图</title> <link rel="stylesheet" href="css/css.css"></head><bod...

2019-05-14 20:35:09 361

原创 JS之设计模式详解

JS六大设计模式：单例模式，工厂模式、桥接模式、状态模式、装饰者模式、适配器模式单例模式详解：简易解析：如在网页中，点击按钮O，添加（显示）一个遮罩层（需求：得到遮罩效果），可以第一次点击添加，以后的点击按钮O，将遮罩显示出来就行，不需要重复添加遮罩层。实现代码<style type="text/css"> .zhezhao{ widt...

2019-05-11 11:33:37 537

原创 axure动效设计

一、axure浏览器顶部固定知识点：1、准备一个动态面板放置在页面，进入动态面板。2、在动态面板中放置，一个矩形当顶部容器，将两个图片放置于容器中。3、退出动态面板，返回主页，右击动态面板，设置固定到浏览器，点击页面空白处，设置交互样式中窗口滚动时，添加条件，选择值，选择window.scrolly，大于选定值时，一个图像设置图像，导入，改变该图像。设置另一个，大小变小。4、返回主页，设置...

2018-12-25 19:43:35 1686

原创 axure原型图设计

一、axure确定网站原型，以便程序编码。二、axure制作按钮小知识点：1、axure自带按钮比较单一，采用矩形制作，注意圆角，保持美观。2、axure自己制作文本框，设置美观的样式,制作小知识点：①准备一个文本框，一个矩形。②矩形设置样式。③文本框设置提示文字，类似placeholder。④文本框、矩形组合，鼠标右击文本框置于顶层，并取消文本框的边框。三、axure之按钮经过变...

2018-12-21 22:55:26 1082

原创 Ps的应用

1、ps属于前端流程中的设计流程。2、ps可以采用切片工具，切出所有需要的图片，保存时，点击文件，存储为web所用格式，保存时选择，用户的切片，（切记：不能凭字面意义选择选中的切片，会丢失其余切片）。3、ps采用选框工具等抠图，进行自由组合图片。4、ps用Ctrl+R可调出参考线，进行网站的设计。...

2018-12-21 19:00:57 167

原创前端功能及布局实现

第一天学习内容一、类型分析二、需求分析三、 B/S与C/S1、 B/S，B指浏览器(browser)，S指服务端（server）。2、 C/S，C指客户端(client),S指服务端(Server)。四、重点，商业价值分析，与竞争对手分析。五、网站开发流程1、需求分析① 网站类型② 功能实现2、网站设计3、程序编码4、网站维护六、布局形式1、国字型...

2018-12-17 17:25:31 163

cfyfcyf的博客