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

style

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

CSS篇-CSS三大特性

CSS篇-CSS三大特性 一 : 层叠性 浏览器处理冲突的一种能力,以CSS的书写顺序,以下面的样式为准. font-size: 25px; } * { 0 0 0 0 } /** 0000 div 0001 .feng { /* 0010*/ color: blue;nav a ------ 0,0,1,1 #nav p ----- 0,1,0,1 总结 : 数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0, 所以不会存在10个div能赶上一个类选择器的情况。 继承问题 继承的权重为0 优先执行自己的 Document p { color: red;

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

小程序自定义swiper组件样式

}, methods: { bannerChange: function(e){ let current = e.mp.detail.current; this.currentBannerIndex = current;bannerBox{ height: 208px; height: 168px; box-shadow: 0px 6px 10px 0px rgba(179,154,139,1);banner.active{ transform: scale(1,1);bannerDots{ width: 100%; bottom: 40px;dot.active{ width: 15px; background-color: #7090E8;说明 原生实现只是js按照原生的api来就可以了。 先记录代码,很简单的效果,应该无需说明,有疑问可以留言~

手风琴效果 transition使用

手风琴效果 transition使用 手风琴效果 *{ margin: 0; } ul{ list-style: none; width: 960px; height: 300px; border: 1px solid seagreen; margin: 90px auto; overflow: hidden; } ul li{ float: left; width: 160px; /*添加动画效果*/ transition: all 0.3s; } /*所有的li都变小*/ ul:hover li{ width: 60px; } /*当前的li变大*/ ul li:hover{ width: 600px;动画前.png 动画后.png

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

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

为什么需要一块免费的GPU?

为什么需要一块免费的GPU? 身在到处讲大数据、AI的时代,作为程序猿或者伪程序猿怎么会不知道“深度学习”这个名词呢? “深度学习”算法需要大量的运算,提高运算效率的选项有两个:软件或者硬件。软件就是算法优化突破 ,硬件就是CPU或者GPU。 在算法的底层基础理论无法突破优化的情况下,要提高运算效率,最佳选项就是GPU。 为什么GPU和深度学习这么配?GPU如此

react native 自定义Image实现预加载图片及错误之后图片显示

react native 自定义Image实现预加载图片及错误之后图片显示 使用自定义Image直接移步到文章结尾查看使用 需要添加的第三方库,prop-types,添加如下 npm install --save prop-types 我们知道react native 里面的Image组件,预加载图片只实现了ios,android没有。加载错误的图片也没有。不能满足我们的基本需求。那么要才能满足双平台呢。 图片. let source={uri}; if (this.state.type === 1) { source = errImage;

关于RN lineHeight的一些问题

关于RN lineHeight的一些问题 当使用Text组件时,难免会使用lineHeight这个样式,但是在ios端,当中文和英文数字混排的时候,字符不在同一个基线上,效果如下: 这是加行高的: 加行高 这是不加行高的: 不加行高 是不是觉得加了行高的丑的不行。 其实这是RN的一个bug,据说解决这个bug已经提上日程了。但是当前,至少在0.55.4版本还是需要我们手动解决的。 如何解决呢? 经过

试用 vue-admin-template 写一个自己的dashboard (二)

试用 vue-admin-template 写一个自己的dashboard (二) 初衷 接上一篇,完成将一个日常研究内容在dashboard中用echarts展示的工作。先上今天的效果图: image.png 直接上代码(特殊原因) 由于接到较紧急的任务,今天没有时间详细描述了,直接上代码:原计划是使用接口获取位置列表。 export default { data() { this.chartSettings = { key: 'xxx', //百度apikey bmap: { center: [119.65, 29.08], zoom: 14

webpack3之压缩js和css

webpack3之压缩js和css 目录结构 目录结构 将css直接打包进页面的style标签内 安装模块 npm install webpack style-loader precss postcss-loader css-loader autoprefixer file-loader url-loader --save 其中 file-loader url-loader两个模块是图片处理的必要模块 相关文件 //====app.js require('. console.log("你好我是app.js"); body{ color: @colorFF; //css文件提取器需要的模块 var ExtractTextPlugin=require('extract-text-webpack-plugin');

CSS基础(一)

CSS基础(一) 前言 作为一个前端开发者,html+css+js是必备技能。绝大多数都认为前端的关键是js,确实如此。不过如果css基础掌握的不够好,一些莫名其妙的样式会另前端开发者很头疼,也会浪费很多时间。这里我做一个总结,供自己查阅,也希望可以帮助到一些人。 1、css三大特性——层叠、优先级、继承 当页面上有多个规则作用于同一个元素的时候,这些规则可能会冲突

css动画骚操作:写饼图

css动画骚操作:写饼图 前言 基本思路 1. 创建一个A/B两色各占一半的圆形 2. 用一个底色为A,相同半径的半圆遮盖颜色为B的那一半 3. 让半圆随着圆的圆心旋转 demo 第一步:创建两色的圆形 css线性渐变liner-gradient可以创建多种颜色的元素,是一个非常好用的属性。 liner-gradient语法 = linear-gradient([ [ | to ] ,]? border-bottom-left-radius: 0px 50%; } @keyframes spin{ to {transform: rotate(.

vue2.0移动端自定义性别选择提示框

vue2.0移动端自定义性别选择提示框 这篇文章主要是简单的实现了vue2.0移动端自定义性别选择的功能,很简单但是经常用到,于是写了一个小小的demo,记录下来。 效果图: 图片.png 实现代码: 男 女 export default { data() { return { param: '1' //设置默认值为1,即设置第一个单选框为选中状态 } }, methods: { } }; background: fff; border-bottom: 1px solid #f1ebeb;boy input{ text-align: center;

4-VVI-材料设计之沉浸标题栏和TextInputLayout

4-VVI-材料设计之沉浸标题栏和TextInputLayout 零、前言 这是两个比较小的点,放在一起说一下: 沉浸标题栏:现在基本上都用沉浸标题栏了,不然最顶的一小块跟app风格不搭 TextInputLayout:包裹一个EditeText,多用于登陆验证的输入框 一、沉浸标题栏 沉浸标题栏.png 由于从5.

H5--canvas实现粒子时钟

H5--canvas实现粒子时钟 我们先看看粒子时钟的效果,如下: 粒子时钟.png 下面我们将通过canvas和js实现, 首先要创建一个html文件并添加一个canvas画布,如下: Document . this.cxt = canvas.getContext('2d'); 下面我在Clock的原型上加上draw方法 Clock.prototype.draw = function(num, index) { this.cxt.fillStyle="#000"; i digit[num]. this.cxt.arc(index*70+(this.r+1)+(this.r+1)*2*j, (this.r+1)+(this.r+1)*2*i, this.r, 0, Math.PI*2, false);

【CSS】带边框的三角形

【CSS】带边框的三角形 34840-106.jpg image.png 思路是将2个三角形叠加起来,外层的三角形稍微大一些。 思路和《【CSS】内圆角》这个笔记的 “方法一” 类似。http://www.jianshu.com/p/6e61856cf143 这个笔记最后会补充《【CSS】画三角形》这个笔记里记漏的一点。http://www.jianshu.com/p/2c04549a8aae HTML代码: CSS代码: . left: -90px; 对应:上下 左右 如果只设置三个值,如:border-width: 1px 2px 3px;

【jQuery】京东banner轮播图

【jQuery】京东banner轮播图 微信订阅号:Rabbit_svip 微信订阅号:Rabbit_svip 动态图在简书上看不到,把代码拷下来本地看吧~ HTML代码 lt; border-radius: 50%; if(index imgNum-1) { index = 0; }, function(){ timeId = setInterval(function() { $arrowRight.click(); JavaScript jQuery总目录:jQuery目录 上一篇:【jQuery】淘宝banner轮播 下一篇:【JavaScript】解决IE8下,用js不能选择class的情况

【CSS】百度百科状态栏

font-family:arial,tahoma,'Microsoft Yahei','\5b8b\4f53',sans-serif; background-color:#f3f3f3; background:#24619c; border-top:1px solid #5895d5; border-bottom:1px solid #3b92e9; background:#459df5; display: flex; height: calc(100% - 1px);nav-content-box li { width: 120px;nav-content-box li:hover{ background:#19508b; } ul.nav-content-box li ul li a { color: #a2c9f0; } HTML与CSS 目录:HTML与CSS 上一篇:【CSS】省略号 下一篇:【CSS】图片动画特效(相框)

Vue中使用websocket的正确使用方法

}, destroyed() { this.websock.close() //离开路由之后断开websocket连接 }, methods: { initWebSocket(){ //初始化weosocket const wsuri = "ws://127.0.0.1:8080"; this.websock.onopen = this.websocketonopen; this.websock.onclose = this.websocketclose; }, websocketonopen(){ //连接建立之后执行send方法发送数据 let actions = {"test":"12345"}; }, websocketonmessage(e){ //数据接收 const redata = JSON.parse(e.data); }, websocketsend(Data){//数据发送 this.websock.send(Data);

react native 处理iOS和安卓系统文字

componentDefaultProps, .this.props, style: [customProps.style, oldProps.style] } return componentRender.apply(this) } } 在你app的入口文件里加上如下内容 (注意 是入口文件 ,否则可能不起作用) import React, { Component } from 'react' import { Text, TextInput } from 'react-native' // 处理iOS系统文字 addCustomProps(Text, {allowFontScaling: false}); @Override public void onConfigurationChanged(Configuration newConfig) { if (newConfig.fontScale !fontScale !