分类: [frontend]

CSS中伪元素的使用技巧

主要使用到box-shadow:box-shadow: inset horizontal vertical blur spread colour; box-shadow 属性向框添加一个或多个阴影,在最后几个例子中用到。 HTML <div class="box effect1"> <h3>Effect 1</h3> </div> CSS .box h3 { text-align: center; position: relative; top: 80px; } .box { width: 70%; height: 200px; background: #FFF; margin: 40px auto; } ......

CSS中tansition与animation区别

tansition 产生一种过度效果,需要事件发生, transition 属性是一个简写属性(transiton: 过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间),用于设置四个过渡属性: transition-property 过度属性,可以是单个属性,也可以是多个属性(all)一起 transition-duration 过度总花时间 transition-timing-function  过度的效果 transition-delay  过度延迟事件 缺点: 需要事件触发 一次性不能重复,除非在此触发事件 只有开始和结束状态,不能定义中间状态。 由此产生了animation animation 通过控制关键帧来控 ......

vue父子通信

首先在组件创建中创建子组件Todos.vue <template> <div class="hello"> <h1>todos show</h1> <ul class="list-group"> <li class="list-group-item" v-bind:class="{'complete':todo.completed}" v-for="(todo,index) in todos"> {{todo.title}} <button class="btn btn-warning pull-right" v-on:click="deleteTodo(index)"> delete ......

Element UI使用

Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。由饿了么公司前端团队开源。跟boostrap差不多,有很多相似之处。 安装 它提供了通用的项目模板,你可以直接使用git clone到根目录下,再安装依赖包,最后直接运行即可。具体看这个连接,在此就不多说了。 Layout 布局 一响应式布局为例,在我们可以直接拉取官网代码,copy to App.vue组件中进行测试,如下: <template> <div id="app"> <el-row :gutter="10"> &l ......
百度统计