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

style

style /stail, staɪl/ n. & v.(第三人称单数:styles;过去分词:styled;复数:styles;现在进行时:styling;过去式:styled)

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;

如何用VUE写一个多用模态框组件模版

display: flex; z-index: 12; letter-spacing: 0.4rem;blueBackground{ background: #21A6DF;redBackground{ background: #FF4046;modal-fade-leave-active{ opacity: 0;新建一个index.js文件,在其中全局引入组件,全局引入之后,就不用在每个调用的组件里面单独引入了,可以直接使用 import Modalfrom "./Modal.vue"; this.blue = this.$refs.Model.blue this.red = this.$refs.Model.red }, closeModal(){ this.isModalVisible = false }, confirm(){ console.log(11111111111);

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

Webpack操作指南

bundle.js', path: path.resolve(__dirname, 'release') } 执行打包命令 npm run dev webpack打包输出几个bundle文件并不是由模块依赖树决定,而是根据打包配置文件中的output决定。即使src/index.js文件引入了src/print.js文件,仍会将后者打包输出为单独的bundle。 清理打包文件 安装依赖 npm install clean-webpack-plugin --save-dev 编辑打包配置文件 webpack.dev.config.js const CleanWebpackPlugin = require('clean-webpack-plugin');

vue antd 基于json schema 的动态表单实现 三: 实现

: any[]; /** * 从 组件工厂中获取组件并显示 */ private createWidgets(foritem: any): any { const key = `df-${foritem.type}`; const comp = registry.getType(key); return comp; } } dyformitemMixin 动态表单项和表单组件的混入,提炼每个组件需要的公共方法和属性 import { Observable, Subscription, BehaviorSubject } from 'rxjs'; import { Component, Prop, Vue, Emit, Model, Watch, } from 'vue-property-decorator'; import { DFSchema } from '.

【译】无头 Chrome:服务端渲染 JS 页面的一个解决方案

/ssr.mjs'; 要运行这个例子,需安装依赖 (npm i --save puppeteer express),然后使用 Node 8.5.0+ 并带有 --experimental-modules 标志来运行服务器。 这是一个该服务器返回的响应示例: Title 1 Summary 1 post content 1 Title 2 Summary 2 post content 2 . // 1. Stash the responses of local stylesheets. page.on('response', async resp = { const responseUrl = resp.url(); const {html} = await ssr(url, browserWSEndpoint); const server = prerender();

HTTP 响应头:X-Content-Type-Options

HTTP 响应头:X-Content-Type-Options X-Content-Type-Options 是用来禁用浏览器内容嗅探行为。 1 描述 响应首部相当于一个提示标志,被服务器用来提示客户端一定要遵循在 Content-Type 首部中对 MIME 类型 的设定,而不能对其进行修改。这就禁用了客户端的 MIME 类型嗅探行为,换句话说,也就是意味着网站管理员确定自己的设置没有问题。 这个消息首部最初是由微软在 IE 8 浏览器中引入的

从零开始react项目构建

从零开始react项目构建 react项目构建使用脚手架:create-react-app 配置:antd UI框架配置和less配置 一、命令行依次输入如下的命令 npm install -g create-react-app create-react-app my-app cd my-app npm start 创建完成后文件的结构如下: 二、public文件 public/favicon.ico html的ico 图标,在index.html中会有引入; 可以使用图片,通过线上ico图标制作出,. 5.组件内引用 -import Button from 'antd-mobile/lib/button';

[VSCode插件推荐] Bracket Pair Colorizer: 为代码中的括号们添上一抹亮

[VSCode插件推荐] Bracket Pair Colorizer: 为代码中的括号们添上一抹亮 在代码编写过程中,各种括号 {[()]} 必不可少。然而,随着代码量的增加,你有没有因为括号的嵌套太多,而导致代码难以阅读? 我们来看看下面的代码,在第三行代码的最后部分,连续出现了5个右括号! 这还让我们怎么愉快地Code Review或是改代码? 不用怕!我们有Bracket Pair Colorizer 2!它为代码中的各种结对的

企业版app ipa包部署到自己服务器

if (isWeixin()) { console.log("wx");@import ". background-image: url(/static/apps/img/bg.jpg); left: 50%; margin-top: 10px;no-believe { display: block; height: 100%;wx-show-tip { width: 100%; } } 4.test.mobileprovision(描述文件),这个文件需要有开发者账号才能获取,怎么获取可自己查询比较简单,不会可以留言。这个文件主要作用是index.html证书信任使用,有了这个可以自动跳转到手机信任页面,不需要用户查询怎么去信任

Vue webpack打包后,css样式发生改变或不起作用

webpack2要求必须写-loader; 没写style-loader则build文件会生成,但你会发现页面中js不起作用; 没写css-loader则会直接报错:’You may need an appropriate loader to handle this file type.’ style-loader只是没起作用而不报错就意味着它的作用是将样式插入到DOM元素中;结合网上的答案以及观察预览页面发现:style-loader会在页面的header标签里生成内部的 ;

CSS动画相关(打字动画、逐帧动画、环形路径平移)

animation: typing 4s steps(15), caret 1s steps(1) infinite;这里用h1标签包裹文字,设置一个默认宽度15ch,ch表示数字“0”的宽度,对于等宽字体来说,我们用ch单位来表达这个标题的长度,实际上就是字符的个数。这样写死宽度是不合理的,万一字符变多了还得改,于是设置标题宽度这我们得用到一点JS。 let text = document.getElementById('text'); } @keyframes spin { to { transform: rotate(1turn);

说说在 Vue.js 中,如何实现时间转换指令

} }, /** * 转换为相对时间 * * 1 分钟之前,返回“刚刚” * 1 分钟到 1 小时之间,返回“xx 分钟前” * 1 小时到 1 天之间,返回“xx 小时前” * 1 天到 1 个月(假设固定为 31 天)之间,返回“xx 天前” * 大于 1 个月,返回“xx 年 xx 月 xx 日” * @param val unix 时间戳 */ transform: function (val) { //计算时间间隔(单位:s) console.log("getCurrentUnix:" + this.getCurrentUnix());

菜鸟笔记(三) - Java Excel报表导入导出

菜鸟笔记(三) - Java Excel报表导入导出 本文将介绍Java Poi包的使用,并实现Excel报表的导入导出。 前提摘要:在系统的管理后台当中中,Excel报表的导入导出已经是不不可避免的场景。值得一提的是支付宝和微信支付的批量转账也需要相应格式的Excel文档 //类别 private String comment = "现金提现"; public interface IExcelExport { /** * 获取Excel的Header * * @return */ String[] getHeader(); } if (recordPois !

自定义分享蒙版效果

自定义分享蒙版效果 先上个效果: 分享. } // 显示蒙版 showMaskView = ()= { this.setState({isShow: true}, ()= { // Animated.parallel: 平行的; 按钮同时执行动画; const ChannelContainer = ({positionBottom, maskOpacity, coverPositionLeft, onCloseMask, shareItemOnPress})= { return ( // 蒙版动画视图 {/*添加点击蒙版事件*/} {/*分享视图的动画视图*/} {kShareTypes.map((title, index)= { return( shareItemOnPress(title)} {title} );

初探dhtmlxScheduler日程管理框架

初探dhtmlxScheduler日程管理框架 dhtmlxScheduler是一个JavaScript日程安排控件,类似于Google日历,日历事件通过Ajax动态加载,支持通过拖放功能调整事件日期和时间,事件可以按天,周,月三个种视图显示。 官方网站:http://www.dhtmlx.com/ 官方在线帮助文档ajax({ url:"${ctx}/addCalendar", dataType:'json', type:"post", data:{"calendarInfo":JSON.stringify(parms)}, success:function(data){ }, error:function(){ } });

IE浏览器下透明背景元素hover无效

IE浏览器下透明背景元素hover无效 本文来源于 捷搜索 问题: IE下透明背景元素,鼠标移到文字上才会触发hover,当移到文字旁边的背景上不会触发hover,如下案例(代码+效果图): 1536128629714760.png ul{ position: absolute; z-index: 999999; } ul li a{ display: block; line-height: 60px; width: 100px; color: white; border-bottom: 3px solid #ffda00;