前端
关注
分享
扫一扫
半开半落
这个作者很懒，什么都没留下…
展开
-
让网页自适应各种设备技巧集合总结
流式布局是一种相对单位的布局方式，它使用相对于视口宽度的百分比来定义元素的尺寸和位置，从而使得页面能够根据不同的屏幕尺寸进行调整。例如，将容器的宽度设置为百分比值，而不是固定的像素值，可以让页面在不同设备上自动调整布局。Flexbox是一种强大的布局模型，它可以简化网页布局，并且能够很好地适应不同的屏幕尺寸和设备方向。相对单位（如REM和EM）可以根据根元素或父元素的字体大小来调整元素的尺寸，从而实现相对于设备屏幕的自适应。通过设置根元素的字体大小为相对值，可以确保页面中的所有元素都根据屏幕尺寸进行缩放。原创 2024-04-23 16:34:18 · 910 阅读 · 0 评论 -
Vue循环时动态绑定一些值到组件中的属性中实现动态属性值
这里想要让进度条的status和percentage为item下的值,这时候加上冒号也就是v-bind直接在等号里面写下item下的值就行了.这时候不需要{{}}就可以动态绑定循环体里的值,同理动态style等也是一样的做法。这里用elementUI里卡片组件和进度条为例子展示。...原创 2022-08-02 15:06:18 · 1351 阅读 · 0 评论 -
微信小程序使用vant组件的输入框搭配弹层选择器注意事项
来禁用输入框,样式会变成禁用状态下的样式很难改动,只需要设置为只读即可,也不会触发手机键盘.这个只读属性,不然会导致用户手机触发默认键盘遮挡你的弹窗和选择器内容影响体验.也不要用。在做这个效果的时候,输入框。...原创 2022-07-29 16:02:30 · 3638 阅读 · 0 评论 -
过滤对象数组中有重复值的项
不多说了直接看实例吧。原创 2022-07-28 12:12:26 · 246 阅读 · 0 评论 -
使用第三方组件(ElementUI、Vant...)时,无法直接修改组件样式,需要使用深度选择器::v-deep或/deep/,亲测有效
例如elmentui中的卡片组件原创 2022-07-06 14:42:19 · 535 阅读 · 0 评论 -
vue -结合ElementUI和validate的表单验证
编写一个新增和修改共用的对话框,里面写表单<!-- 添加或修改客户配置对话框 --><el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <el-form ref="form" :model="form" :rules="rules" status-icon label-width="80px"> <el-form-item label="客户名称.原创 2022-04-21 15:56:16 · 1420 阅读 · 0 评论 -
vue中window.addEventListener(‘scroll‘, xx)失效解决办法
多次尝试都无法获取到滚动事件,后来加上true之后就可以了window.addEventListener('scroll', this.clintHeight, true)原创 2021-12-14 14:04:33 · 7730 阅读 · 3 评论 -
echart使用的基本步骤
一.到echarts官方下载echarts的js文件进行引用.二.准备一个DOM容器用来装载echarts内容三.初始化echarts实例对象var yearchcek = echarts.init(document.querySelector(".chart_year"));四.指定配置项和数据(option)五.将配置项设置给echarts实例对象yearchcek.setOption(option);...原创 2021-06-25 09:27:00 · 345 阅读 · 0 评论 -
易优CMS常见用法-持续更新
1.网站首页网站首页不需要另外创建栏目,循环网站头部导航的时候也不需要,只要判断一下就ok,就像这样:<li class="{eyou:eq name='$Request.param.m' value='Index'}on{/eyou:eq}"> <a href="{eyou:global name='web_basehost' /}"> 网站首页 <label></label> </a> </li原创 2021-04-30 16:03:37 · 738 阅读 · 0 评论 -
常用css属性整理-持续更新
1.设置透明背景:CSS:background: transparent;设置效果:设置前: input标签默认背景色设置后:input背景变透明2.设置不透明度:opacity: 0.5;设置效果:原创 2021-04-24 15:45:45 · 124 阅读 · 0 评论 -
删除Bootstrap默认的边距padding
加个no-gutters就搞定了 <div class="row no-gutters"> <div class="col"> <div class="zs_banner"> <img src="template/pc/static/img/join4_02.png" > </div> </div> </div>原创 2021-04-16 17:23:25 · 1696 阅读 · 0 评论 -
记录一下现已知的让html的高度随着宽度的变化而变化方法
一.通过设置css 的vw单位实现,例如下面这样:.aboutus_back { display: flex; flex-direction: column; background-image: url(../img/jianjie_back0.png); background-repeat: no-repeat; min-height: 175vw; background-size: 100vw 175vw; }二.通过jq和js计算屏幕宽高,具体代码随便百度很多.这哪是原创 2021-04-14 11:58:22 · 497 阅读 · 0 评论 -
@media媒体手机平板电脑备用代码
头部记得写:<head> <meta http-equiv="Cache-Control" content="no-transform" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no原创 2021-04-13 14:57:45 · 368 阅读 · 0 评论 -
利用CSS伪元素设计好看的下划线动画
这就不多说啦，我就 直接上代码记录一下用法就好了想要了解什么是伪元素可以跳到这个链接了解哦.header_dh a::after { height: 2px; background-color: #464646; content: ''; display: block; position: absolute; left: 0px; width: 0%; transition: all 0.5s; opacity: 0;}.header_dh a:hover::after { hei原创 2021-03-27 15:02:02 · 367 阅读 · 0 评论 -
易优判断第一条列表内容与其他列表内容不同
{eyou:list typeid='68'} {eyou:eq name='$i' value='1'} <div class="c-slider_background_item js-slider-item is-active"> <div class="c-slider_background_item_inner o-image_wrapper js-animate is-show"> <!...原创 2021-03-19 18:51:13 · 454 阅读 · 0 评论 -
CMS浏览量arcclick的使用区别
在文档列表里直接用：{eyou:arcclick /}在首页和列表页里面用：{$field.click}在内容标签里直接用：{$eyou.field.click}原创 2021-03-12 19:20:20 · 208 阅读 · 0 评论 -
a标签跳转到某个页面的具体某个位置
实现逻辑：其实就是通过给a标签赋予id或者name的方式实现的。第一步：直接找到你需要跳转的html，直接找到你想要的位置加一个id或name：<div id="here"></div>第二步：在你点击的那个a标签的href属性里加上对应id或name：<a href="#jm"></a>大功告成。...原创 2021-03-11 16:48:42 · 4344 阅读 · 0 评论 -
网站域名路径默认主页和其他页面路径的区别关系
首先你创建网站的时候会先设置一个域名，假如域名为：localhost，那么你创建的时候也会设置一个默认的主页，假如默认主页为：index.html。这样你创建好一个网站之后，当你发现你的主页内容css和js那些全部失效证明物理路径已经改变这时候就需要对index.html主页里面引用到的路径都进行重新填充，重点来了，当你需要从主页跳转到其他页面的时候，地址页面的路径都不需要补充完整就能跳到，假如现在跳转到index2那么src为：template/index2.htm，但是当你跳转到index2.html的原创 2021-02-23 15:44:26 · 1441 阅读 · 0 评论 -
Bootstrap下拉菜单简单使用
先上代码看看结构:<div class="contain header"> <div class="row"> <div class="col-6"> <img class="biaoti_img" src="../../img/homeimg/homeima%20(1).png"> </div> <div class="col-6" class="dropdown"> <img原创 2021-01-28 15:54:57 · 251 阅读 · 0 评论 -
swiper滑动失效的情况解决办法
只需要在初始化的时候添加两行代码就行。 var address_side = new Swiper('#address_side', { observer: true, //修改swiper自己或子元素时，自动初始化swiper默认为false observeParents: true //修改swiper的父元素时，自动初始化swiper });还有不懂的可以参照Swiper官方文档解析...原创 2021-01-25 09:42:46 · 2843 阅读 · 8 评论 -
MUI原生loading的快速使用[复制过去就能用]
先引用mui.css和mui.js,引用完之后直接复制下面代码到你的页面就能看到效果.HTML:<div class="mui-loading" > <div class="mui-spinner"> </div></div>很简单这样就能在你的页面显示出一个加载中的icon,如果需要对它进行相应的显示和隐藏只需要添加一个id获取进行操作:HTML:<div class="mui-loading" id="myloading">原创 2020-10-09 16:14:39 · 1089 阅读 · 0 评论 -
JS禁用某个事件的效果小记
有时候我们会遇到使用某些功能的时候它会默认自带一些效果,但你发现对你要做的功能并不那么友好,很多是你不需要的功能反而影响到你的成品.比如说:使用原生js写遮罩层的话会发现遮罩层下面的内容是能够滚动的,尤其是移动端,这对app并不友好.这时候就需要把它的默认的滑动效果去除就好了.具体代码如下: document.getElementById('MaskDemo').addEventListener('touchmove',function(event){ event.prev.原创 2020-09-02 18:45:58 · 600 阅读 · 0 评论 -
限制＜textarea＞文本框的字数长度以及设置右下角动态的字数显示
平时无论在移动端还是PC端都会经常用到文本框,最常碰到的就是要对文本框里面的字数进行限制还有相对应的把剩余可输入的字数显示在右下角.要实现它并不是很难,直接上代码套用一下就ok了.HTML:因为我这里只用到了一小块地方,所以就直接把文本框CSS代码写在里面了,如果你有多个地方用同样的效果建议你另外在上面写把样式封装成类什么的后面用起来方便些.其中在textarea里面限制长度的重点代码为下面的maxlength具体限制多少自己可以更改<textarea placeholder="填写额.原创 2020-08-21 16:41:51 · 8993 阅读 · 2 评论 -
有关定时器的使用
作者：张铭标撰写时间：2019年5 月 26日在JavaScript中,定时器要用到一个叫做setTimeout和setInterval的关键字.它的作用就是可以将代码延迟到指定的时间来执行操作(也就是可以调整时间的发生的顺序),这种功能在日常生活中的运用是非常常见的,所以定时器的学习也是至关重要的.那么在setTimeout和setInterval中分别都是怎么使用的呢?它们的区别又是什么?...原创 2019-05-27 22:20:26 · 233 阅读 · 0 评论 -
JavaScript中(Date)日期的使用
撰写时间：2019年 5月24 日要使用date功能需要引入:<script type="text/javascript"src=“date.js”>Date.js可以操作日期,只要在网页中引用它就可以使用了. 主要功能有三个部分:日期的信息,日期的变更和日期的解析.一,日期的信息:返回当天的日期:Date.today().显示今天是星期几:Date.today().g...原创 2019-05-27 22:12:42 · 575 阅读 · 0 评论 -
JavaScript里的生命周期现象
开发工具与关键技术：DW JS作者：张铭标撰写日期：2019年1月17日星期四一次在写js代码的时候发现了一个有趣又很难理解的现象，如下图所示：console.log();在while里面执行运行结果：console.log();在while外面执行运行结果：按平常来说在其它语言中这样运行console.log()是肯定会报错的，可是没想到在js中却返回了10.这个现象...原创 2019-01-17 09:26:56 · 786 阅读 · 0 评论 -
一个关于HTML 列表表格里面的排版问题的解决
开发工具与关键技术：DW HTML作者：张铭标撰写时间：2019年1月16日星期三我们在写html的时候经常会用到列表标签来撰写，写完之后往往需要用css样式来给它进行排版，但却发现在写完css样式之后并不能完全达到你想要的效果。如下图所示：img：在图中我发现一些没有在 a 标签里输入内容的地方在css里面不起效果，导致后边的内容前置的现象。html：我们发现在 a 标签里面...原创 2019-01-17 09:18:33 · 1373 阅读 · 0 评论 -
js的进度条
作者：张铭标撰写时间：2019年6月 17日js的进度条主要分为两种: setTimeout和setInterval.这两种的区别在于setTimeout()只执行一次,而setinterval()可以进行多次调用使用.首先介绍第一种setTimeout()的用法:第一步先引入jquery的插件:然后在body后面引用两个script的控件: 都引用好之后在body写出第一种...原创 2019-06-17 22:22:36 · 763 阅读 · 0 评论 -
JS中数组的运用
作者：张铭标撰写时间：2019年 7月6日首先第一步需要的是创建一个数组:varshuzu1 = new Array();如果需要指定它的长度就要在括号内加:[size]来指定数组的长度,如果要赋值的话就要在括号里不断地叠加中括号然后赋值:[shuzi0[shuzi1[,…[,shuziN]]]];第二是数组元素的访问:首先获取元素值var yuansuzhi = arrayObj[1]...原创 2019-07-07 21:59:47 · 1409 阅读 · 0 评论 -
数组对象中的属性运用
作者：张铭标撰写时间：2019年7月 6日一.length属性:length属性主要是表示数组的长度.其中一个数组的上下限分别是0和length-1.下面是对length的基本运用:vararr=[2,4,6,8,10,12,14,16];进行输出: alert (arr.length);最后显示数组的长度为8.length对象在JavaScript中可以使用一个没有被声明的变量,...原创 2019-07-07 22:03:03 · 427 阅读 · 0 评论 -
用js弹出对话框的一些实用方法
作者：张铭标撰写时间：2019年7月 17日第一种基本的窗口弹出方法:使用window.open("")括号里面就是你要弹出的页面的路径,用单引号或者双引号都可以.这段代码可以放到HTML的任意位置,但从用户体验的角度来说尽量把它放到越前面越好,不然代码宂长的情况下,弹出对话框的时间就会显得比较慢会对用户体验带来不良的体验.第二种使用函数来控制js的弹出对话框窗口: 首先在script...原创 2019-07-17 19:23:50 · 1331 阅读 · 0 评论 -
使用css制作radio,checkbox和switch
作者：张铭标撰写时间：2019年7月 26日有时候我们使用默认的checkbox,radio和switch的时候,会觉得这个样式不是自己想要的,会感觉很丑.我们有时候需要美化一下radio和checkbox,这个时候有没有一种办法可以做到这一点呢?答案当然是有的,而且我们还可以自己定义这些选框的样式,知道了原理之后就可以实现属于你自己有着自己独特风格的页面.具体代码:radio:...原创 2019-07-27 20:46:13 · 309 阅读 · 0 评论 -
可以在相同的元素上运行多条jQuery命令的方法
作者：张铭标撰写时间：2019年 8月16日一般来说,我们平时都是在一个元素上只能使用一条jQuery语句.这样的画浏览器就需要多次查找出相同的元素,那么,有没有一种方法可以使得在一个元素上同时运行多条jQuery命令呢? 答案当然是有的,在jQuery里有一种名叫Chaining的技术,是允许我们在相同的元素上运行多条jQuery命令的.使用这种方法您只要简单地把该动作追加到之前的动作上...原创 2019-08-17 21:45:51 · 250 阅读 · 0 评论 -
使用jQuery进行添加和删除元素的方法使用
作者：张铭标撰写时间：2019年8月 17日一.添加元素添加元素总共有4个方法:append()在被选元素内部的结尾插入指定内容prepend()在被选元素内部的开头插入指定内容after()在被选元素之后插入内容before()在被选元素之前插入内容1.append()方法:$(“p”).append(“在被选元素的末尾插入内容”);prepe...原创 2019-08-17 21:46:35 · 3015 阅读 · 0 评论 -
css3里的过渡功能展示
开发工具与关键技术：DW 前端作者：张铭标撰写时间：2019年1月19日我们想要添加效果从一种样式转换到另一种样式的时候，总会依赖JavaScript来实现。但其实很多效果用css3里的动画就能实现，就如其中的一个transition过渡功能，下面我来展示这种效果的具体功能。先看最后效果图：mV0L3dlaXhpbl80NDQxODEwMA==,size_16,color...原创 2019-01-20 16:56:46 · 228 阅读 · 0 评论