![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML/CSS
Muchen灬
这个作者很懒,什么都没留下…
展开
-
JS代码优化(上篇)
1、按强类型风格写代码(1)定义变量时指明数据类型定义变量时给默认值,方便JS解析器,也方便阅读人原创 2020-12-30 15:14:40 · 1205 阅读 · 2 评论 -
CSS编码习惯与规范
CSS编码习惯与规范(1)文件命名以字母开头,避免数字开头 全部用小写,这样的话不容易在引用的时候因为大小写而出错 用-来分隔单词,而不是下划线 对于压缩过的文件,比如 css 或者 js 文件,使用 .min 代替 -min(2)CSS文件顶部设置编码在 css 文件的最顶部设置编码格式为 utf-8 ,否则有可能使得 css 文件出现乱码1) ID和Class的命名规范: - 全部字母用小写,避免使用驼峰命名法。 - 使用短横线-来作为连接单词之间的字符,避免.原创 2020-12-30 11:55:34 · 209 阅读 · 0 评论 -
JS单选、多选、限制选择以及选中交换位置功能的实现与原理
1、单选功能的实现首先再onshow里面将所有列表添加一个 checked = false 属性<!-- 单选功能 --><view style="margin-top: 20rpx;"> <view class="section-title">单选功能</view> <view class="shape-list-box"> <view class="shape-list" v-for="(list,index)原创 2020-09-02 11:35:20 · 1426 阅读 · 0 评论 -
JS实现上移、下移、置顶、置底、删除功能的实现
1、使用数组splice方法交换位置实现上移、下移、删除功能2、使用splice、unshift、push方法实现置顶功能效果展示:功能解析:(1)上移、下移功能上移操作的原理:将 当前的index 元素往上移动一位,到 index -1 位置,所以通过splice () 方法,将 当前位置的元素添加到index-1 位置中,添加过后数组的长度+1 ,原来index位置往后添加一位,变成 index + 1 , 所以我们需要将 index + 1 位置元素删掉 ...原创 2020-08-25 11:06:39 · 6511 阅读 · 0 评论 -
Animate.css动画库下载、安装、使用与解析
(一)uni-app中引入Animate动画库(1)下载animate动画文件官方文档:animate动画库的cdn地址:<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">简单粗暴的下载方法:复制cdn地址,对源码直接复制,保存到记事本,并更改文件名称为animate.css(2)将下载好的animate动画文件添加到自己的项目中,并全局配置原创 2020-07-17 15:55:53 · 18842 阅读 · 8 评论 -
小程序中的复制功能、H5页面中的复制功能(uni-app框架实现)
(1)小程序中的复制功能(h5页面中不支持,微信开发者工具中支持)官方文档地址:https://uniapp.dcloud.io/api/system/clipboard?id=setclipboarddata//复制文本内容copyCenter(){ console.log('复制内容~~'); let address = '11111fdshf返回的是科技孵化的思考和反抗集散地和' //设置系统剪贴板的内容 提示:API `setClipboardData` is not yet i原创 2020-07-01 00:07:21 · 5537 阅读 · 0 评论 -
微信小程序表格的实现(纯css 表格的实现)
display:table的用法大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css为什么不用table系表格元素呢?1、用DIV+CSS编写出来的文件k数比用table写出来的要小,不信你在页面中放1000个table和1000个div比比看哪个文件大2、table必须在页面完全加载后才显示,没有加载完毕前,table为一片空白,也就是说,需要页面完毕才显示,而div是逐行显示,不需要页面完全加载完毕,就可以一边加载一边显示3、非表格内容用table来装,原创 2020-06-30 23:24:32 · 8240 阅读 · 5 评论 -
如何将阿里图标库的引入项目中?
阿里图标库官网:https://www.iconfont.cn/(1)方法一:通过下载png类型的图片,使用image标签来使用图标(2)方法二:使用字体图标方式1)选中icon,并添加到购物车2)点击右侧购物车,将icon添加到新建项目中即可3)将字体图标下载到本地4)将下载下来的iconfont.css文件添加到项目中(只保留iconfont.css文件时,其他的url都得删除,只留下一个base64得url ,否则项目报错,找不到...原创 2020-05-09 17:21:51 · 6471 阅读 · 2 评论 -
9种水平垂直居中的方法(最详细)
9种水平垂直居中的方法:可以直接复制代码去体验一下。已引入了vue组件和elementUI组件<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <!-- 引入ElementUI CDN --> <link rel="stylesheet" href=...原创 2020-04-23 16:10:12 · 5996 阅读 · 2 评论 -
鼠标滑过图片文字遮罩效果
常见的鼠标滑过图片文字遮罩效果一、从底部上升的遮罩效果:解析:完整实例代码:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!-- 引入ElementUI CDN --> <link rel="stylesheet...原创 2020-02-27 00:01:08 · 3115 阅读 · 0 评论 -
element-ui走马灯实现图片自适应
elementUI走马灯实现图片自适应(等比缩放,使得图片缩小不挤压,放大不拉伸变形)解决方法的原理:监听屏幕视口大小如果'resize',发生改变了,就获取图片的高度height,然后渲染到页面代码:<el-carousel :interval="5000" arrow="always" :height="bannerHeight+'px'" style="border:...原创 2020-02-26 16:20:35 · 7817 阅读 · 5 评论 -
object-fit : CSS 图片自适应
object-fit : CSS 图片自适应.fill { object-fit: fill; }.contain { object-fit: contain; }.cover { object-fit: cover; }.none { object-fit: none; }.scale-down { object-fit: scale-down; }fill: 中文释义“...原创 2020-02-25 10:35:14 · 892 阅读 · 0 评论