![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
xqiitan
前端菜鸟,多多指教
展开
-
transform-origin,多个动画放一起执行
/* 旋转 */div:nth-of-type(3):active { /* 设置旋转轴心origin: 1.x,y 2.关键字:left,top,right,bottom,center*/ /* transform-origin: right top; transform:rotate(150deg); */}div:nth-of-type(3):active { /* ...原创 2019-03-08 16:03:45 · 1095 阅读 · 0 评论 -
布局:伸缩盒子flex(display: flex justify-content flex-flow flex-direction)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>布局:伸缩盒子flex</title> <style> * { margin: 0; padding: 0; } .box {原创 2019-03-12 18:03:18 · 1312 阅读 · 0 评论 -
flex 伸缩布局:
伸缩布局传统的布局方案,基于盒状模型,依赖display+position+float属性。它对于那些特殊布局非常不方便,重要属性:display:flex 如果一个容器设置了这个属性,那么这个盒子里面的所有直接元素都会自动变成伸缩项flexjustify-content:设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。语法:justify-content:flex-start|...原创 2019-03-13 13:26:45 · 334 阅读 · 0 评论 -
flex 伸缩盒子,使用范例(子元素在侧轴对齐方式align-items;单个元素,在侧轴对齐方式align-self)
根据服务器返回条目,N个菜单平分标题栏宽度。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>flex:伸缩菜单</title> <style> * { margin: 0; padd原创 2019-03-13 13:46:11 · 1470 阅读 · 0 评论 -
伸缩盒子案例:宽高自动适应
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>伸缩盒子案例:宽高自动适应</title> <style> * { padding: 0; margin: 0; } .layo原创 2019-03-13 14:56:30 · 1327 阅读 · 0 评论 -
垂直菜单的实现(使用hovor+无序列表)
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>导航菜单</title>...原创 2019-03-25 17:32:43 · 793 阅读 · 0 评论 -
前端开发,细节小点。
*多列布局的实现1列:直接流的形式(上、中、下)2列:使用浮动float:left/right 的形式3列:使用定位:中间div使用margin值设置。.left{width:200px;height:500px;background:#ccc;position:absolute; top:0;left:0;}.middle{width:200px;height:500px;backgro...原创 2019-03-26 13:59:09 · 182 阅读 · 1 评论 -
给页面列表,动态添加元素的例子
实现网页留言功能,点击确定按钮,把输入框的内容添加到留言列表中。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ ...原创 2019-05-09 18:26:15 · 652 阅读 · 0 评论 -
计算属性computed(数据联动),监听属性watch(异步场景)
计算属性computed(数据联动),监听属性watch(异步场景)data: { msg: 'Hello Vue!', another: 'another Hello Vue!!', styleMsg: { color: 'red', 'text-shadow': '0 0 5px #ff8000' // 或驼峰写法...原创 2019-07-15 14:27:20 · 1701 阅读 · 0 评论 -
Vuex介绍(状态管理模式)
常用调试:console.log, alert()阻塞的行为, debugger断点调试-多个视图依赖同一个状态(eg:菜单导航)-来自不同视图的行为需要变更同一状态store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ sta...翻译 2019-07-15 15:51:11 · 131 阅读 · 0 评论 -
字体图标的使用
字体图标生成:1、iconfont网站下载svg图片,2、登录iconMoon,选择IcoMoon App,新建一个新的图标集合(修改集合名字); Import Icons,选择要导入的svg文件。选中导入的所有图标。 点击[Generate Font], 点击[Download]下载字体图标,下载后是zip包的形式。3、解压压缩包,4、集成图标: 拷贝fonts...原创 2019-07-16 10:48:54 · 166 阅读 · 0 评论 -
Vue使用小细节点
动态class绑定:<div class="setting-theme-item" v-for="(item, index) in themeList" :key="index" @click="setTheme(index)"> <div class="preview" :style="{background: item.style.body.backgro...原创 2019-07-16 16:04:24 · 139 阅读 · 0 评论 -
column 实现多列布局
多列布局,常用属性:column-count:设置列的具体个数column-width:控制列的宽度column-gap:两列之间的缝隙间隙column-rule:规定列之间的宽度,样式和颜色column-span:规定元素应横跨多少列(n指定跨n列,all跨所有列)<!DOCTYPE html><html> <head> <m...原创 2019-03-12 16:53:31 · 956 阅读 · 0 评论 -
字体图标的使用,伪元素的使用
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>字体图标的使用、伪元素content的使用</title> <style> .myFont{ font-family: iconfont; }原创 2019-03-12 16:34:16 · 1939 阅读 · 0 评论 -
动画实现始终效果案例(动画的使用,居中的使用)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>时钟案例</title> <style type="text/css"> * { padding: 0; margin:原创 2019-03-11 16:37:04 · 542 阅读 · 0 评论 -
使用transfrom实现元素居中显示,行级元素,块级元素居中显示。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>transform: 实现任意元素居中</title> <!-- 行级元素:text-align:center 块级元素:margin:0 auto; -->原创 2019-03-08 16:32:34 · 806 阅读 · 0 评论 -
三维3d移动,旋转,缩放
3D动画实现。1、3D移动translate3d(x,y,z),使元素在这三个维度中移动,也可以分开写。translateX(x), translateY(y), translateZ(z). transform:translateX(100px); // X轴移动2、3D缩放scale3d(number, number, number), 也可以分开写:scaleX(), ...原创 2019-03-08 17:04:19 · 612 阅读 · 0 评论 -
切割轮播图案例,学习页面布局,结合jquery使用
====================<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>切割轮播图</title> <style> * { margin: 0; padding: 0原创 2019-03-14 11:42:21 · 334 阅读 · 0 评论 -
CSS3,渐变效果(线性渐变,径向渐变,重复渐变),实现各种背景效果。
CSS3中的渐变实现(线性渐变、径向渐变)CSS3中的background新增属性实现,常见页面效果。CSS3中的图片边框的基本用法CSS3中的transition属性,实现过渡效果。CSS3中的transfrom属性,实现 2d变换效果。渐变:是css3中比较丰富多彩的一个特性,通过渐变可以实现许多绚丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可拓展性。可分为线性渐变、...原创 2019-03-07 11:06:30 · 9586 阅读 · 0 评论 -
CSS3:background 各个属性的使用(size,position,clip,origin,attachment)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>背景</title> <style> div { width: 500px; height: 500px; border: 1px原创 2019-03-07 11:36:35 · 720 阅读 · 0 评论 -
HTML5,图片边框,.9效果处理
图片边框背景,九宫格效果裁剪。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>边框图片的本质是背景,并不会影响元素内容的放置,类似九宫格效果,9个位置 一一对应</title> <style type="te原创 2019-03-07 14:10:44 · 6273 阅读 · 2 评论 -
JavaScript 函数的使用
一、函数:1.函数的定义:function 函数名(var1, var2, ....,varX) { // 函数体}2.函数的调用:函数名(1, 2, 3);二、return的几种形式:1. 当函数没有写return时,也会默认返回undefined2. 如果return后面跟内容了,返回return后面的内容3. 直接return返...原创 2019-03-19 16:20:55 · 207 阅读 · 0 评论 -
transition 过渡效果
过渡效果 只针对特定的数值有效,针对某些属性值(block),是无效的。过渡:可以在不适用flash动画或JavaScript的情况下,当元素从1中样式变化成另一种样式时,为元素添加效果。要实现这一点,必须规定两项内容:1.规定希望把效果添加到那个css属性上,2.规定效果的时长。语法:transition:property |duration |timing-function |de...原创 2019-03-07 17:03:08 · 1235 阅读 · 0 评论 -
transfrom:移动、缩放、旋转、斜切
CSS3中的transfrom属性,能够对元素进行移动、缩放、旋转、斜切等操作。translate移动:translate(tx) | translate(tx, ty) translateX(tx), translateY(ty)如果只有个参数,就代表x方向;如果有2个参数,就代表x和y方向。scale缩放:让元素根据中心原点对对象 进行缩放。默认值1如果值在0.01-0.9...原创 2019-03-07 17:46:09 · 2565 阅读 · 0 评论 -
立方体,生成6个面,修改透视、俯视角度
透视/景深效果a) perspective(length)为一个元素设置三位透视的距离。仅作用于元素的后代,而不是元素本身。当perspective:none/0时,相当于没有设置perspective。比如你要建立一个立方体,长宽高都是200px,如果你的perspective<200px,那就相当于站在盒子里面看的结果,如果perspective非常大,那就相当于站在非常远的地方看,...原创 2019-03-11 13:33:51 · 2101 阅读 · 0 评论 -
动画的创建、常见属性
过渡:从一个状态到另外一个状态。动画:可以添加多个关键帧。<html> <head> <meta charset="utf-8"> <title>动画的实现:keyframes</title> <style> * { padding: 0; margin: 0; }原创 2019-03-11 16:12:14 · 221 阅读 · 0 评论 -
Vue 组件通信
父组件,调用子组件的方法MenuBar.vue 子组件export default { data() { return { ifSettingShow: false } }, methods: { showSetting() { ifSettingShow = true }, hideSetting() { ifSettingShow = fa...原创 2019-07-16 16:07:16 · 86 阅读 · 0 评论