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

position(定位元素)

position 属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

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;

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%;

滚动时的渐显渐隐标题

} #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;

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;

原生Android 侧滑菜单实践(部分)

,MD可能不需要两行代码。 添加Framelayout 此处链接为开发者文档 //此处Toolbar修改为自己习惯的写法,为变量 private String[] mTitles; //创建标题变量 private DrawerLayout mDrawerLayout; args.putInt(Fragment.ARG_LIST_NUMBER, position); mTitle = mDrawerTitle = getTitle(); } @Override public boolean onPrepareOptionsMenu(Menu menu) { //每当我们调用invalidateOptionsMenu()时调用 boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerNavgation);

ReactNative开发笔记(持续更新...)

- ReactNative本地图片如何获取其base64编码?(一般指采用 这类相对路径地址的图片资源如何获取到绝对路径) 关键是要获取到本地图片的uri,用到了Image.resolveAssetSource方法,ImageEditor.cropImage方法和ImageStore.getBase64ForTag方法,具体可以查询官方文档 解决方案:看如下代码 import item from '. NSError *error;55版RN的一个bug 解决方案:使用下面的MyTextInput替换原TextInput import React from 'react';

CSS画心形、蛋形、菱形、八卦、三角、圆形、对话框、平行四边形

CSS画心形、蛋形、菱形、八卦、三角、圆形、对话框、平行四边形 各图形的html代码均为 ,替换class名称即可 圆形 .circle { width: 100px; height: 100px; border: 1px solid #ccc; border-radius: 50%; background: coral; } 蛋形 .egg { width: 126px; height: 180px; background-color: #eee; box-shadow: 0px 2px 5px #ccc; display: block; border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; } 心形 .heart { width: 100px; height: 90px; position: relative; } .heart:

【hackrank】eval巧用,以命令操作列表

【hackrank】eval巧用,以命令操作列表 今天在hackrank看到一个关于列表的问题,比较有意思。 Python列表主要有以下几种操作: insert i e: Insert integer at position .join(args) +")" eval("l."+cmd) else: print(l) 在R语言里也有一个eval函数可以完成类似的功能,不同的是,Python直接可以计算字符串,就是将字符串解析为函数运行!当输入命令为print时调用函数,不是print时直接调用列表的方法。

Vue 组件学习总结

target { transform: translate3d(0, 6px, 0); } 给元素的 position 设为 absolute 或 fixed,并不断更新定位属性 top right bottom 和 left 的值。 .

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;

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

2018-09-03CSS随笔

2018-09-03CSS随笔 1. 添加CSS的四种方式 内联style 属性 style 标签 外部文件css 例如: @import url(. } 6. 公有的属性可以写在父类上,以减少代码量,通过继承 使子类拥有父类相同属性; 7. 两个span标签之间若存在间隙,不管多大的间隙,系统都默认给出一个空格的距离; 8. margin 和 padding 的区别: margin : 外边距 padding : 内边距 margin : 10px 20px 10px 20px ; } div{ border: 100px solid transparent;

监听 scroll 使元素产生吸顶效果

监听 scroll 使元素产生吸顶效果 一、判断滚动像素值 1.1 window.scrollY(别名:pageYOffset) 返回文档 top: 50px; 目前这个属性兼容性不是很好,暂不建议在生产环境中使用(2018年09月12日16:54:54)。 参考 position - CSS:层叠样式表 | MDN CSS中position属性介绍(新增sticky)

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

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

主从复制

* TO 'backup'@'%' IDENTIFIED BY '123456'; mysql GRANT REPLICATION SLAVE, REPLICATION CLIENT ON *. 查看当前有哪些用户 mysql select user,host from mysql.user; 3.查询master状态 mysql show master status;

支付宝小程序地图层级和控件问题

支付宝小程序地图层级和控件问题 最近在写支付宝小程序的时候,想要在地图上面添加几个按钮,但是发现支付宝小程序不能像微信小程序那样有专用的控件标签,只能通过在 标签内添加 controls="{{controls}}"属性来实现这个功能。具体实现方法如下: 添加控件 官方文档 }, call() { my.makePhoneCall({ number: '400-6701818' }); case 2: this.call(); case 3: this.scanCode();

css 实现水平居中的方法总结

} 块级元素的特点:可设置元素的宽度,在不设置宽度时, 元素的宽度会自动填满其父元素宽度,并独占一行 1.1 margin: auto 居中元素设置宽度,并且设置 margin: auto 可实现水平居中 . /*兼容代码*/ } 问题: 需要解决 display: inline-block 在IE 下的兼容性问题 3. 利用定位实现水平居中(已知宽度) 相对定位: 相对定位就是将元素偏离元素的默认位置,但是并没有脱离文档 left: 50%;

一行代码搞定使用LinearLayoutManager一键返回顶部

int firstVisiableChildViewTop = firstVisiableChildView.getTop(); } } 当然这只是最简单的样式,要复杂的一点的话可以这样: 在滑动中改变效果,或者设置渐变效果 if (getScollYDistance() = 0) { float scale = (float) getScollYDistance() / 400;每次点击让其返回初始位置即可完成一键返回到顶部的操作。 backTop.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { recyclerView.scrollToPosition(0);