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

bottom

bottom是css定位属性中的一种属性。

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;

h5页面适配iPhone X的方法

h5页面适配iPhone X的方法 项目接近尾声,测试时突然想起还有iphoneX需要适配,虽然页面都是自适应,但是由于iPhone X的特殊性,还是需要特殊对待。因为这个h5项目嵌入在原生项目中,适配就会有有种方式:1. //为底下圆弧的高度 34px } 2.媒体查询 @media screen and (device-width:375px) and (device-height:812px){ //在这里做iPhone X的判断 // #app { //margin-top: 88px;

自定义分享蒙版效果

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

mint-ui 源码学习四 —— 列表相关组件学习

this.$el.addEventListener('touchend', this.handleTouchEnd); // bottomMethod function in props this.bottomMethod(); 这个方法主要就是计算列表滚动的距离,判断是否需要执行加载方法。如果条件符合并且 this.expression 方法存在,则执行 this.expression 方法。 这个 this.expression 方法哪里来的呢?其实就是定义命令的 bind 方法中的 el[ctx] 对象中的 expression。 el[ctx] = { el, vm: vnode.context, expression: binding.value };

mint-ui 源码学习三 —— datetime-picker 源码学习

this.$emit('cancel') } 就是关闭 datetime-picker 然后触发 confirm 和 cancel 事件。 限定时间范围并填充 slot 在选择器中还有个限制时间范围的功能,看下是如何实现的。 首先在 mounted 事件中如果没有定义 value 值会定义 picker 的默认选择 startHour 或者 startDate(看类型是不是 time)。 mounted() { this.currentValue = this.value;this.currentValue) return { year: [], month: [], date: [], hour: [], min: [] }; let result;

记录一下我的小程序公共样式

记录一下我的小程序公共样式 基于 mpvue 如果需要原生,px转为rpx,可以自己转换 App.vue 样式 /* 全局样式*/ page { background-color: #fff; height: 1px;button { position: relative;ml10 { margin-left: 10px;mb15 { margin-bottom: 15px;bk { word-wrap: break-word;vh { visibility: hidden; content: ""; white-space: nowrap;middle { display: inline-block; transition: all 250ms; cursor: default; pointer-events: none; flex-wrap: wrap; flex-direction: column;

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;

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

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

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;

【CSS】同时使用多个背景图

【CSS】同时使用多个背景图 0003.jpg image.png 上面这张图是由3个小图片组合而成的。 在使用多个背景图时,只需把 background-image 属性的值用逗号隔开,列出想用的图像,然后用 background-repeat 定义重复属性,最后用 background-position 定义每张小图的位置。 HTML代码: CSS代码: background-image: url(images/scroll_top.jpg), url(images/scroll_bottom.jpg), url(images/scroll_middle.jpg);

【CSS】画三角形

【CSS】画三角形 270924-106.jpg 用CSS画三角形,利用border属性,把一个边设置成看到的样式,其他两边或三边用transparent方法变成透明。 image.png HTML代码: CSS代码: div { width: 0; border-top: 70px solid red; border-top: 50px solid transparent; height: 100px; background: #15A892; border-top: 20px solid #1574A8; border-right: 20px solid #E94E65; border-bottom: 20px solid #E9D24E; border-left: 20px solid #A81574;

LeetCode #807. Max Increase to Keep City Skyline p

LeetCode #807. Max Increase to Keep City Skyline p Question In a 2 dimensional array grid, each value grid[i][j] represents the height of a building located there. We are allowed to increase the height of any number of buildings, by any amount (the amounts can be different for different buildings).= 50. All heights grid[i][j] are in the range [0, 100].

【vue随手笔记】MuseUI 自定义 select 适配 mobile

【vue随手笔记】MuseUI 自定义 select 适配 mobile 说明:由于最近接手项目使用MUSE-UI 进行移动端开发,发现select组件在移动端上面不兼容,故另辟蹊径,通过本身适配的控件,自定义一个简易的selecter。 1、新建控件组件: 在src 目录下 新建一个 MySelect.vue 新建的vue.png 2、构建思路: 2.1、选择弹窗组件 自带弹窗组件有此控件可兼容mobile.png 2.2、选择单选组件 单选组件.

CSS实现自适应的正方形

CSS实现自适应的正方形 总体思路:由于height是不固定的,所以不能直接使用height值。因此转换思路使用width值来实现正方形的height赋值。 所以理论上只要能够将宽度属性应用在高度属性的方法都可以。 方案一:CSS3 vw 单位 . height: 50vw; } 方案三:利用伪元素的 margin(padding)-top 撑开容器 这个其实和方案二思路一样,只不过使用伪元素副作用更小。 . display: block; padding-top: 100%;

基于better-scroll实现移动端vue上拉加载下拉刷新

this.$nextTick(() = { this.scroll = new BScroll(this.$refs.wrapper,{ //初始化better-scroll probeType:1, //1 滚动的时候会派发scroll事件,会截流。2滚动的时候实时派发scroll事件,不会截流。 3除了实时派发scroll事件,在swipe的情况下仍然能实时派发scroll事件 click: true //是否派发click事件 }) // 滑动过程中事件 this.scroll.on('scroll',(pos)= { if(pos.y 30){ this.pulldownMsg = '释放立即刷新' } }); height: 300px; bottom: -35px;

用css写一个对话框

用css写一个对话框 要实现的对话框效果 首先分析一下对话框的组成:大致可以分两部分,左边的矩形和右边的三角形。矩形实现起来简单,那么三角形呢? 三角形的实现首先要从div说起 1.首先画一个div,给它设置宽高和背景颜色。再加上四条边的边框 Document . border-top: 50px solid pink; border-left: 30px solid ghostwhite ; border-bottom: 20px solid transparent; background-color:#cdcdcd ;

iOS UIButton之UIEdgeInsets详解

iOS UIButton之UIEdgeInsets详解 我们先看一下苹果官方对UIEdgeInsets说明: typedef struct UIEdgeInsets { CGFloat top, left, bottom, right; 官方:specify amount to inset (positive) for each of the edges. values can be negative to 'outset' . //例如我们设置UICollectionView的edgeInset会使collectionView产生内偏移 UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init]; button.imageEdgeInsets = UIEdgeInsetsMake(.

那些年研究过的可视化图例Matplotlib(上)

那些年研究过的可视化图例Matplotlib(上) 当年官方文档set_color('none') ax.xaxis.set_ticks_position('bottom') ax.yaxis.set_ticks_position('left') ax.spines['bottom'].set_position(('data', -.