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

DIV(层叠样式表单元的位置和层次)

DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。DIV在编程中又叫做整除,即只得商的整数。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。

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

自适应缩放图文列表

margin: 0;imgWrp { width: 0; background-repeat: no-repeat; flex-flow: row nowrap; } li p { width: 70% } li以display:flex来展现,这样的话,里面的div和p这类子元素可以很好的控制,比float好用多了。 flex-flow控制子元素的方向和是否换行, justify-content: space-around;设定子元素的主轴排列方式,align-items: center;

又一个css3 loading 打转的圆

又一个css3 loading 打转的圆 前端入坑纪 52 上回写过一篇《一直打转的圆圈》的css3 loading 效果,用的是障眼法. 今天来分享真正的环形圆圈来做, 其实是border啦,哈哈 好,详解如下! OK,first things first! github项目地址 你就是个圆 HTML 结构 就是只用一个div, 任性不, O(∩_∩)O哈哈~ CSS 结构 body{ background-color: aliceblue;circle{ border: 8px solid rgba(218, 141, 218, 0.5); width: 100%; left: -8px;

让渐变成为滚动的进度条吧

bar{ height: 30px; infinite 可以让动画一直循环不停。 这里的 widtheft 2s linear infinite,仅仅是展示效果,请略过 3.@keyframes backgroundPosition 这个是条纹动起来的原理,简单说,便是背景的x轴上的位置,从0px走到60px。 好了,到此,本文告一段落!感谢您的阅读!祝你身体健康,阖家幸福! 打开支付宝首页搜 625097528 领红包,领到大红包的小伙伴赶紧使用哦! 支持你我,扫一扫红包

css3 飘雪的日子

css3 飘雪的日子 前端入坑纪 54 用bing搜索的时候,看到它的雪花效果,那就地仿照一个咯~ 好,详解如下! OK,first things first! github项目地址 圣诞临近啦 HTML 结构 这么多class为snow的div,都是为了设置雪花背景和动画用的 CSS 结构 body{ background-color:black;snowWrp{ position: fixed; height: 100%;snow1 { animation-delay:10s;snow2 { animation-delay:20s; } @keyframes falling{ 0%{ top:-100%;

可以缩放的侧边栏

mainWrp { padding: 10px; background-color: lightcyan; z-index: 2; transition: transform 1s cubic-bezier(0.215, 0.610, 0.355, 1) } .shrik { transform: scale3d(.8) translateX(70%) } nav { position: fixed;

滚动时的渐显渐隐标题

} #titWrp { background-color: rgba(255, 255, 255, 0); } 对标题设置背景,后续都是操作这个背景的透明度 JavaScript 结构 var tit = document.querySelector('#titWrp') var doc = document.body || document.documentElement // 当滚动时,用节流函数来间隔时间段触发绑定的函数操作 window.addEventListener("scroll", _.throttle(function () { // 仅在小于100时,也就是滚动值100以内才执行对应的操作 if(doc.scrollTop 100){ var num = doc.scrollTop;

tab滑动切换内容效果

tab滑动切换内容效果 前端入坑纪 57 今天来分享个曾见到过的tab效果! 好,详解如下! OK,first things first! 点我查看实际效果 简约界面 HTML 结构 a1 a2 a3 a4 a5 a6 a7 a1_Content a2_Content a3_Content a4_Content a5_Content a6_Content a7_Content 所有滚动效果的div都外部嵌套两层div,最外层为屏幕的宽度,次外层为包裹所有内部div一起平铺开来的宽度 CSS 结构 html

环绕按钮动画———原生javascript手作

环绕按钮动画———原生javascript手作 前端入坑纪 58 今天来分享昨天和小伙伴聊到的一个效果 好,详解如下! OK,first things first! 点我查看实际效果 集齐7颗召唤神龙吧,骚年 HTML 结构 B1 B2 B3 B4 B5 B6 B7 ROT 所有的按钮都是包裹在div.roller 里,div.roller 的底色与底部条颜色相同,以制造凸的效果 CSS 结构 html, body { margin: 0; z-index: 99; transform: translateX(-50%) } .

2018年网络开发者应该关注什么

以使CSS变量成为全局范围。然后,在按钮样式的上下文中使用该变量。 :root { --button-bg-color: #FF00FF; display: inline-block; height: 24px; } 可以选择Element然后getComputedStyle使用元素调用获取用于使用JavaScript 设置样式的变量的值- 将变量名称作为String传递给getPropertyValue方法。 let element = document.querySelector('.getPropertyValue("--button-bg-color") // returns #FF00FF

学会在组件中使用v-mode

学会在组件中使用v-mode 往往组件拆分需要负责数据的传递,通常会通过自定义事件来数据交互,但是如果使用v-module来做数据的交互,这样也许会简单很多。 子组件UserInfo.vue export default { props: { value: { type: String

VUE-CLI 3 踩坑

tap(args = { args[0]['process.env'] = merge(args[0]['process.env'], test[process.env.NODE_ENV]) return args }) } } 链式操作 配置markdown npm install vue-markdown-loader markdown-it markdown-it-container --save 文件 vue.config.js const markdownRender = require('markdown-it')() module.exports = { chainWebpack: config = { config.module .rule('md') .nesting === 1) { // 1.获取第一行的内容使用markdown渲染html作为组件的描述 let demoInfo = tokens[idx].info.trim().

CSS calc计算属性

CSS calc计算属性 calc()是css3的一个新增的功能,用来指定元素的长度,你可以使用calc()给元素的border、margin、pading、font-size和width等属性动态的设置值。 calc()语法 . margin: auto; } #main { border: 8px solid #B8C172; width: 75%; width: -webkit-calc(25% - 10px * 2 - 8px * 2 - 20px);CSS3 calc() test…… test…… test1…… test2…… test3…… footer

浏览器下Xpath实用技巧

浏览器下Xpath实用技巧 在浏览器环境下,一些强大的xpath标准方法没有被支持(如正则匹配方法matches()),只能利用有限的方法做抽取,下面是列出我常用的一些查找技巧、经验;不定时更新。 常用 以下面的分页组件节点结构为例: . var result = []; var nodesSnapshot = document.evaluate(xpathToExecute, element, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); i++) { result.push(nodesSnapshot.snapshotItem(i));

Kotlin 全栈开发之 前端 JavaScript: Getting Started with

var trimIndent = Kotlin.kotlin.text.trimIndent_pdl1vz$; return new Date(ntime); } function renderTable() { var e = document.getElementById('title');: 1.《Kotlin 极简教程》(陈光剑)第39页。 Getting Started with Kotlin and JavaScript with Gradle 新书上架:《Spring Boot 开发实战》 — 基于 Kotlin + Gradle + Spring Boot 2.0 的企业级服务端开发实战 京东下单链接 https://item.jd.com/31178320122.html 天猫下单链接 https://detail.tmall.com/item.htm?

网页制作加法运算

height: 20px; } #center{ text-align: center; padding: 100px; } #text2{ width: 70px; } #text3{ width: 70px; } 5、具体框架搭好之后,我们开始给三个文本框赋值变量 x,y,z。记住给文本框赋值是要用value哦。 代码如下: var x = document.getElementById('text1'). 7、最后我把所有的代码梳理一遍供大家参考使用,谢谢。 代码如下: function mybutton2() { var x = document.getElementById('text1'). var z=Number(x)+Number(y);

vue使用pdfjs显示PDF可复制

then((textContent) = { // 创建文本图层div const textLayerDiv = document.createElement('div') textLayerDiv.setAttribute('class', 'textLayer') // 将文本图层div添加至每页pdf的div中 pageDiv.appendChild(textLayerDiv) // 创建新的TextLayerBuilder实例 let textLayer = new TextLayerBuilder({ textLayerDiv: textLayerDiv, pageIndex: page.pageIndex, viewport: viewport }) textLayer.setTextContent(textContent) textLayer.render() }) }) } }) }, createCanvas (totalPages) { for (let i = 1;

原型链图解

原型链图解 原型链.png 注解 红虚线即原型链,各类实例都是通过原型链继承到各数据类型本身的方法和属性。比如Object原型对象包含着对象的原生方法。 函数实例通过原型链指向了Object的原型,所以函数实例也可作为对象使用。比如Jquery,Jquery.ajax()就是当对象使用,Jquery("div")就是当函数使用。 instanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何

React 中合并单元格的正确写法

React 中合并单元格的正确写法 用表格进行页面布局,页面布局在各种浏览器的的兼容性, 都非常好, 而在react中使用表格布局, 合并单元格的写法比较特殊, 博主查了很久才找到正确的写法, 在这里分享一下 效果图 源码 react组件文件 import React, { Component } from 'react';/App.css';App { text-align: center; } td { border: 1px solid #AB3319; width: 30px;title { color: #444444; font-size: 20px; border-collapse: collapse;

Sass: @mixin vs placeholder vs @function

Sass: @mixin vs placeholder vs @function 学习 Sass 的时候总会发现这三个东西很像,因为他们都是用来统一代码来达到复用的目的的。这篇文章将用一个小例子来对比他们的不同之处。 例子 我们要做的就是两个一大一小的两个 div,一个宽高100px,另一个宽高 300px。 CSS 代码可以写成这样: .smallBox { width: 100px; margin: 10px;bigBox { @include box(300px, 300px);bigBox { @extend