大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

css实现边框动画

css实现边框动画 1、css实现边框动画 效果如图: body,div{ margin: 0; padding: 0; box-sizing: border-box; } .box{ width: 300px; height: 200px; padding: 20px; margin: 50px auto; color: #fff; background-color: #f60; } .border-box{ position: relative; width: 100%; height: 100%; padding: 20px; } .border-box::before

撩课-Web大前端每天5道面试题-Day17

撩课-Web大前端每天5道面试题-Day17 1.vue生命周期的作用是什么? 它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。 2. Vue实现数据双向绑定的原理:Object.defineProperty()?value = newValue document.getElementById('show'). el.style.height = '200px'; el.style.background = '#000'; } } } }) 2.全局指令 Vue.directive('dir2', { inserted(el) { console.log(el);

撩课-Web大前端每天5道面试题-Day20

撩课-Web大前端每天5道面试题-Day20 1.vue生命周期的作用是什么? 它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。 2. Vue实现数据双向绑定的原理:Object.defineProperty()?value = newValue document.getElementById('show'). el.style.height = '200px'; el.style.background = '#000'; } } } }) 2.全局指令 Vue.directive('dir2', { inserted(el) { console.log(el);

2018-09-04画太极

2018-09-04画太极 第一种方法:笨方法 不停画圆即可实现。 HTML部分 JS Bin Css部分 body{ background-color: #444; } #YinYang{ width:200px; height: 200px; border: 1px solid black; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 51%, rgba(0,0,0

jQuery实现点击图标div循环放大缩小功能

jQuery实现点击图标div循环放大缩小功能 很基础的一个功能,点击左下角的图标按钮,地图的整个div会变大,变大预览之后,再次点击图标按钮,地图的整个div会变小,恢复原样,两个图标在地图界面的放大和缩小时间不断的切换图标状态(箭头向里面,或者箭头向外面) 图片.#scale { background: #FFFFFF url('. width: 26px; } #updmap { border: 1px solid #1E90FF;css({ "width": "400px", "height": "200px", });

nodeppt 使用笔记,补全作者没写的内容,让你爱上分享

** 语法的网页PPT 列表单条动画 写法 * 上下左右方向键翻页 {: .moveIn} * 支持多级列表 * 这个动画是moveIn 一级列表和二级列表是分开的,所以设置是分别设置 HTML 混编 ## 标题 这是html 这是css样式 具体看下项目中 ppts/demo.md 代码 function testScriptTag(){ } console.log(typeof testScriptTag);a { color: red } [slide] ## 加一个Id {:#a } #a { color: red } 使用:.class {:.green3 label .

css圣杯布局和双飞翼布局(2018-08-17)

right: -220px;middle{ width: 100%; word-break: break-all;main-inner{ margin-left: 200px;HHHHHHHHHHHHHHHHHHHHHH hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh HHHHHHHHHHHHHHHHHHHHHH hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh sub oooooooooooooo 00000000000000000 ooooooooooooooo ooooooooooooooo 000000000000000 extra BBBBBBBBBBBBBB BBBBBBBBBBBBBBBBBB 88888888888888888888 footer 双飞翼效果

HTML蒙版--带过渡效果

HTML蒙版--带过渡效果 HTML: How is it going? 2018 CSS: .container { width: 555px; height: 200px; position: relative;mask { /*使mask层级高于content*/ z-index: 2; background-color: #E8921F; -webkit-transition: opacity . width: 100%; top: 50%; font-size: 40px; text-align: center; /*使content文字部分层级低于mask*/ z-index: 1;mask span { color: white; font-size: 48px;

HTML 设置图片按照给出的宽高缩放图片

HTML 设置图片按照给出的宽高缩放图片 style="width: 200px;height: 200px; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;" 2018年08月14日22:47:29

var和let区别

var和let区别 关键词: let : 变量只能声明一次 var : 变量可以多次声明 大家都已经十分熟悉var 了,对于let可能还不太了解,let是ES6的新运算符,也是用来声明变量,下面我们写个小例子看区别 var a = 5;i++){ setTimeout(function(){ console.log("var:" + i);div3 /* css代码 */ div{ display: none; } /*js代码*/ var tabs = document.getElementsByTagName('button');className = 'show'; divs[this.index]. this.className = 'active';

VUE Cookbook 系列:实现可配置组合表单

/mixin' export default { index: 1, title: '基础', name: 'Form1', mixins: [ mixin({ username: '', usersex: 1 }) ] } 这样每个 Form 组件都节省下了十几行代码,关键是这些代码是重复冗余的。 最后页面组件是这个样子: 可配置问卷示例 {{form.title}} 从左侧选择要添加的表单块,右侧查看结果 import sortby from 'lodash.sortby' const req = context = context.keys().components, AsideLeft: () = import('.

CSS布局&媒体查询

CSS布局 媒体查询 1. 实现一个两栏布局,右侧固定宽度200px,左侧自适应宽度,附上预览链接。 浮动布局使用 flex 布局 2. 实现一个三栏布局,两侧固定宽度200px,中间宽度自适应撑满,附上链接。 浮动布局flex 布局 3. css reset 是什么?css 预编译器是什么? 后编译器(post css)是什么? CSS Reset就是之前的样式我不要,a{color: red;

css圣杯布局和双飞翼布局

css圣杯布局和双飞翼布局 双飞翼布局和圣杯布局其实是一样的,只不过在写法上有些不同,其布局都是左右固定宽度,中间宽度自适应。 圣杯布局 html结构 center left right css 先写出大概的样式 .article{ height: 300px;left{ width: 200px; height: 100px; background: blue; float: left; } 现在的布局是这样的 image.png 在.left中添加 margin-left: -100%; position: relative; overflow: hidden; margin-bottom: -9999px;

CSS的小技巧

CSS的小技巧 等宽不等高布局(利用flex布局和object-fit这个属性) section{ display:flex; } section::after{ // 为了解决最后一行因为flex-grow:1 拉伸的问题 content: ' '; flex-grow: 999999999; background-color: grey; } img{ object-fix: cover; // 等比例缩放 height: 200px; vertifical-align:bottom;png image.png // 正方形布局 section{ display: flex; flex-wrap: wrap; display: block; padding-bottom: 100%;

CSS布局与定位

CSS布局与定位 1.左右布局/左右中布局 准备了三个div,外层一个类名为wrap的div。内层三个div,类名分别为:left,middle,right. HTML代码如下: Document 这是第一个DIV水平居中 这是第二个DIV垂直居中 这是第三个DIV水平和垂直居中 CSS代码如下: *{ margin: 0; color: aliceblue; text-align: center; line-height: 200px; } 首先利用float属性让所有子元素div浮动起来。.left 和.middle 左浮动,.

30 Seconds of CSS代码块解读(互动篇与其他)

mouse-cursor-gradient-tracking:hover::before { --size: 200px;sibling-fade:hover选择器,那么就是默认全部span都淡出。 Counter(计数器) 实际上,计数器是由CSS维护的变量,其值可以通过CSS规则递增以跟踪它们被使用的次数。这个属性目前还没用过,也是头一次见。说明也是按照原本的英文说明进行照搬,如果还不懂,可以查看MDN的解释。具体的解释也可以参考张鑫旭大神的书《CSS世界》P.

盒模型

盒模型 timg.jpg 网页都是有盒模型组成,每个盒子都有自己的 width,height,padding,margin,border等组成 width:宽度,在CSS中是指内容的宽度,并不是盒子的宽度 height:高度,和宽度一样的原理 padding:内边距 border:变框 margin:外边距 注意:以后我们所说的宽度是指内容宽度 width.png 盒子模型 div{ width: 200px; padding: 100px; padding: 20px 30px 40px;div1{ width: 200px; margin-bottom: 50px;div2{ margin-top: 30px;

浮动和清除浮动

浮动和清除浮动 timg.jpg 浮动的作用就是解决一行之间显示多个盒子,并且盒子的位置可控的一种布局方式,在介绍浮动之前,先说明标准流 标准流 它是浏览器子在解析html的标签的默认的一种与稳定,也叫文档流 一般情况下,所有的标签都是标准流,浏览器在解析的时候不会按其他方式来解析,而 浮动就是一种脱离标准流的技术 浮动 1.浮动脱离标准流 浮动 .

使用box-sizing布局

使用box-sizing布局 盒模型 在css中比较重要的就是 盒模型,它是在web中比较重要的一个基础点,当然其中涉及到 高度和宽度计算。 width:宽度,在CSS中是指内容的宽度,并不是盒子的宽度 height:高度,和宽度一样的原理 padding:内边距 border:变框 margin:外边距 盒子的宽度 = padding + border +width 盒子的高度 = padding+border+height box-sizing box-sizing: content-box|border-box|inherit .demo { padding: 30px;

8. CSS 背景设置

8. CSS 背景设置 1、背景颜色 background-color: ;取值方式有两种 red rgb(0,250,0) 2、背景图片 background-image:url("") ;设置图片的位置 center``right``left``top``bottom (center top)中间的顶部(背景图片的定位) (100px 200px)设置像素确定位置 3、背景属性缩写的格式 只要写background:后面直接写 背景颜色 背景图片 平铺方式 关联方式 定位方式 中随便一个都可以 4、滚动方式 background-attachment: fixed;