微信小程序 div选中效果
._left{
position: relative;
margin-top: 40rpx;
width: 40%;
height: 350rpx;
border-radius: 12rpx;
text-align: center;
font-size: 26rpx;
background-color: #FCF2D7;
color: #9F7F43;
border: 2rpx solid #FFC11B;
}
._left:before{
content: '';
display: inline-block;
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border-top: 28px solid #FBCF6B;
border-left: 28px solid transparent;
}
._left:after{
content: '';
position: absolute;
right: 1px;
top: 5px;
width: 8px;
height: 4px;
display: inline-block;
border: 1px solid #fff;
border-width: 0 0 1px 1px;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
vertical-align: baseline;
}

微信小程序 div选中效果的更多相关文章
- 微信小程序的动画效果
前言 由于公司计划有变,所以从H5页面改成去小程序写.所以在着手开发小程序.本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣.请前端大神们勿喷. 一.什么是微信小程序? 小程序在我的理解中只是 ...
- 微信小程序CheckBox选中事件
1.微信小程CheckBox选中问题 <checkbox-group bindchange="checkboxChange" data-index="{{index ...
- 微信小程序button选中改样式-实现单选/多选
小程序实现多button单选/多选 红色为选中状态 单选 多选 ①wxss /* pages/button-select/button-select.wxss */ .button_container ...
- 微信小程序之楼层效果
今天做了一个小程序实现一个楼层效果 带大家分享下经验和api的使用吧 如图 将左边和右边各分了一个组件 目录如下 其中list页面是这个楼层效果的页面 components是组成这个页面的两个组件 ...
- 微信小程序跑马灯效果--基于CSS3 animation 及 基于JS
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 基于CSS3主要代码实现 效果图: 视图模板wxml中: <view class=&qu ...
- 微信小程序切换选中状态
实现的主要思路是根据每一项的index值,动态改变idx值,当index==idx值的时候,添加点击选中样式的类名. wxml: <scroll-view scroll-x="tru ...
- 微信小程序单个倒计时效果
var end_time = grouponList.expire_time.replace(/-/g, '/') grouponcountdown(that, end_time) //适用于商品列表 ...
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- 微信小程序源码推荐
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
随机推荐
- 利用PhotoShop CS6进行抠图
相信大家在前端开发中一定遇到过抠图,一个方形图有好多种方法可以扣出来你想要的图片,可是你知道怎么扣出一个圆形的图片吗?(另附ps破解办法 亲测可用) 一:我们需要安装ps软件并进行破解,这里进行下载破 ...
- element UI table 状态显示:禁用-启用 上架-下架
vue2.0+elementUI 解决表单上架下架状态的切换 https://blog.csdn.net/weixin_42507803/article/details/81910297 <el ...
- windows 10家庭版安装SQL Server 2014出现.net 3.5失败问题解决。
在安装SQL Server 2014的过程中,出现.net 3.5缺失,导致失败问题. 后来,研究了下,解决思路如下: 先将电脑更新到了windows 10专业版,(因为需要用到专业版才有的组策略管理 ...
- GitHub秘钥(SSH Key)
一.公钥的作用 公钥一般给服务器,别人权限中加入我给的公钥,当我们从远地仓库中下载项目(git clone xxx)的时 那个服务器通过他的绑定的公钥来匹配我的私钥,如果匹配,则就可以正常下载,如果不 ...
- Magento 2.2 SQL注入漏洞
影响版本 2.2.* poc地址 https://github.com/ambionics/magento-exploits python3 magento-sqli.py http://192.1 ...
- 关于表单重复提交之验证码 和谷歌Kaptcha图片验证码的使用
表单重复提交之-----验证码 表单重复提交有三种常见的情况: 一:提交完表单.服务器使用请求转来进行页面跳转.这个时候,用户按下功能键 F5,就会发起最后一次的请求. 造成表单重复提交问题.解决方法 ...
- 一键部署lnmp基本
#!/bin/bash systemctl stop firewalld systemctl disable firewalld setenforce 0 #--------nginx-------- ...
- 1002 A+B for Polynomials (25分) 格式错误
算法笔记上能踩的坑都踩了. #include<iostream> using namespace std; float a[1001];//至少1000个位置 int main(){ in ...
- CAS 5.3使用MySQL数据库验证
一.本例环境说明 JDK 1.8 CAS 5.3 apache-maven-3.6.0 mysql-5.6.32 二.CAS 5.3基础环境搭建与验证 需要按照<CAS 5.3服务器搭建> ...
- Abp vNext 基础篇丨领域构建
介绍 我们将通过例⼦介绍和解释⼀些显式规则.在实现领域驱动设计时,应该遵循这些规则并将其应⽤到解决⽅案中. 领域划分 首先我们先对比下Blog.Core和本次重构设计上的偏差,可以看到多了一个博客管理 ...