- 博客(17)
- 资源 (1)
- 收藏
- 关注
原创 Css盒模型
Css有两种盒模型:盒子模型的组成为:border、padding、margin、content(内容)标准模式:标准模式下的盒模型的宽度仅为内容的宽度,即content(内容)的宽度。怪异模式(IE模式):盒子模型的宽度为content+padding+border...
2019-06-22 15:43:51 118
原创 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 344
原创 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 406
原创 grid布局之grid属性详解
功能特点:术语:1、grid container网格容器:元素应用 display:grid;它是其所有网格项(网格项)的父元素网格项:是网格容器的子元素,display:grid下的子元素称为网格项2、grid line网格线(组成网格项的分割线)3、grid track网格轨道:两个相邻的网格线之间为网格轨道(不相交)特点:顶到容器边缘4、grid cell网格单元:两...
2019-06-19 07:53:50 3762
原创 grid布局-网格与表格的关联及应用
详解网格:布局有优势,布局与网格类似,淘汰了表格布局性能缺陷。表格:性能缺陷,表格标签容易10秒钟,页面空白div布局:块级布局,多个div放同一行,诞生float布局,float布局简单,诞生了position布局(放大缩小可能错位),诞生了inline,float+position+inline称为hack布局。hack布局(竖直方向对齐不容易)诞生了弹性盒模型(flexbox)(只能...
2019-06-19 07:52:06 612
原创 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 396
原创 Vue作用域插槽详解
作用域插槽使用场景:用于将子组件的数据显示到父组件,但样式,由父组件决定。代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"...
2019-06-04 10:52:57 869
原创 Vue观察者模式
Vue观察者模式详解:观察者模式,又称订阅发布模式(总线),用于非父子关系的vue组件之间的值的传递。代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>组件间的传值,Bus/总线/订阅发布模式/观察者模式</title> </h...
2019-06-01 16:49:55 970
原创 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 236
原创 Vue之小知识点(标签中嵌套模板)
Vue之模板的使用小知识点:解决方案之模板在table和ul中使用的小知识点:解析:在table表格中使用模板,名字为定义的模板名称,在页面上会显示在table外,解决方案,将模板名称改为tr(table中的组件),可以使用tr标签中加is="模板名称"。代码:<!DOCTYPE html><html> <head> <meta char...
2019-05-24 16:50:07 1375
原创 关于font-face图标使用小知识点
在iconfont中使用字体图标:先在css中引入在线代码,css中的配置文件格式为://如果iconfont上的图标代码为//在css中引用格式为:标签名:before{ content:"\e636";}...
2019-05-16 14:44:02 279
原创 原生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 367
原创 JS之设计模式详解
JS六大设计模式:单例模式,工厂模式、桥接模式、状态模式、装饰者模式、适配器模式单例模式详解:简易解析:如在网页中,点击按钮O,添加(显示)一个遮罩层(需求:得到遮罩效果),可以第一次点击添加,以后的点击按钮O,将遮罩显示出来就行,不需要重复添加遮罩层。实现代码<style type="text/css"> .zhezhao{ widt...
2019-05-11 11:33:37 545
原创 axure动效设计
一、axure浏览器顶部固定知识点:1、准备一个动态面板放置在页面,进入动态面板。2、在动态面板中放置,一个矩形当顶部容器,将两个图片放置于容器中。3、退出动态面板,返回主页,右击动态面板,设置固定到浏览器,点击页面空白处,设置交互样式中窗口滚动时,添加条件,选择值,选择window.scrolly,大于选定值时,一个图像设置图像,导入,改变该图像。设置另一个,大小变小。4、返回主页,设置...
2018-12-25 19:43:35 1708
原创 axure原型图设计
一、axure确定网站原型,以便程序编码。二、axure制作按钮小知识点:1、axure自带按钮比较单一,采用矩形制作,注意圆角,保持美观。2、axure自己制作文本框,设置美观的样式,制作小知识点:①准备一个文本框,一个矩形。②矩形设置样式。③文本框设置提示文字,类似placeholder。④文本框、矩形组合,鼠标右击文本框置于顶层,并取消文本框的边框。三、axure之按钮经过变...
2018-12-21 22:55:26 1090
原创 Ps的应用
1、ps属于前端流程中的设计流程。2、ps可以采用切片工具,切出所有需要的图片,保存时,点击文件,存储为web所用格式,保存时选择,用户的切片,(切记:不能凭字面意义选择选中的切片,会丢失其余切片)。3、ps采用选框工具等抠图,进行自由组合图片。4、ps用Ctrl+R可调出参考线,进行网站的设计。...
2018-12-21 19:00:57 175
原创 前端功能及布局实现
第一天学习内容一、 类型分析二、 需求分析三、 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 172
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人