html
会飞的小蚂蚱
这个作者很懒,什么都没留下…
展开
-
小程序里使用vant-weap的picker发现的问题
一个比较常见的业务 我们如果选择使用vant 引入picker 还要引入他的pup 要配合使用有一个坑 这个picker他没有自己的宽高 要我们给的 然后用个变量来控制它就行了 true false原创 2020-07-28 15:59:42 · 935 阅读 · 2 评论 -
感觉CSS文字居中显示的几种方式
1、利用line-height和vertical-alignhtml<div class="box"> <span>测试文字</span></div>css.box{ width: 200px; height: 200px; overflow: hidden; background: #ccc; text-align: center;}.box span{ vertical...原创 2020-06-03 09:35:30 · 479 阅读 · 0 评论 -
js面向对象的写法实现Tab切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> input { .原创 2020-05-29 09:21:19 · 277 阅读 · 0 评论 -
在uni里面怎么修改checkbox的样式
很多小伙伴都很苦恼 修改不了checkbox的样式那我们该怎么做呢?哈哈哈哈想不到吧 你以为我是checkbox 其实我是 view哒!<!-- checkbox --><view class="iconfont checkicon" @click="checkedClick(item.id)" :class="item.checked ? 'icon-xuanzhong' :'icon-weixuan'"></view><vi..原创 2020-05-29 09:13:39 · 1312 阅读 · 1 评论 -
关于我们Javascript书写位置
1.行内式js(很少使用)以on开头,如onclickHTML中推荐双引号,JS推荐单引号2.内嵌式js(常用)<script> alert('hello world');<script>3.外部js文件<script src="my.js"></script>利于代码结构化 便于文件复用引用外部JS文件的script标签中间不可以写代码适合js代码量比较大的情况下代码举例:<!DOCT...原创 2020-05-28 09:31:49 · 121 阅读 · 0 评论 -
简单说一个CSS综合案例
<!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 ..原创 2020-05-27 11:08:42 · 667 阅读 · 0 评论 -
基础复习 CSS的引入方式
CSS的三种样式表按照CSS样式书写的位置(或者引入的方式),CSS的样式表可以分为三大类:1.行内样式表(行内式)<div style="color:red; font-size:12px">青春不常在,抓紧谈恋爱</div>2.内部样式表(嵌入式)<style>....</style>3.外部样式表(连接式)(可以控制多个页面)使用最多外部样式表的核心是:样式单独写道CSS文件中,之后把CSS文件引...原创 2020-05-27 11:07:36 · 119 阅读 · 0 评论 -
关于移动端适配的最佳实践怎么做
移动端适配我们需要做哪些事情? 一个最佳实践除了设置viewport和rem基准值,随着iPhone手机的不断升级,我们不得不正视以下2个问题:安全区域适配 识别刘海屏关于viewpoint-fit在切入正题之前,我们先展开介绍一下viewpoint-fit,它的作用是用于设置可视区域的尺寸,属性如下:PropName Description Name viewport-fit For @viewpoint Value auto | contaio...原创 2020-05-26 09:43:18 · 285 阅读 · 0 评论 -
JS 的 基础学习: reduce() 方法
找),这时就需要对这个大对象做再加工处理。比如:将小组件所需的字段属性拎出来单独再封装成一个小对象。一般情况下我的写法是:let retData = {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, g: 7, h: 8, j: 9, k: 10, m: 11, n: 12};let tempData = { a: retData.a, c: retData.c, d: retData.d, g: retData.g,};..原创 2020-05-26 09:41:16 · 315 阅读 · 0 评论 -
说一下c3的动画
-1.transition过渡transition-property:all;//监听属性transition-duration:1s;//过渡时间transition-timing-function:linear;//运动速率transition-delay:1s;//过渡延迟时间```html<style>div{width:100px;height:100px;...原创 2020-05-26 09:32:29 · 192 阅读 · 0 评论 -
到底什么是盒模型?
-box-sizing:content-box|border-box;默认content-box一个盒模型的功能强弱,直接决定了布局是否简洁,决定了编程的复杂度。正常盒子:boxWidth=width+border*2+padding*2;IE6混杂模式的盒子整体宽度boxWidth=width;contentWidth=width-border*2-padding*2;...原创 2020-05-26 09:31:22 · 147 阅读 · 0 评论 -
处理layui table 行点击事件与列点击事件冲突
问题描述:工具栏的点击事件,会冒泡到行点击事件中,原打算阻止事件冒泡 ,结果失败,阻止不了,索性不用layui官网的工具栏tool和行row监听事件。table:<table id="conManager" lay-filter="conManager" class="layui-table layui-form"></table>原本的监听事件,如下: //监听行单击事件 table.on('row(conManager).原创 2020-05-21 09:35:44 · 2355 阅读 · 0 评论 -
通过js+canvas实现svg标签另存为图片
我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持。研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代码信息,并发送到到服务器端,由后端程序转换成图片格式后,以流的形式反射给浏览器端下载。最近在项目中有需求将一个非HighChart的SVG地图转存为图片并下载的功能。本希望模拟HighChart的原理实现,可是研究发现,该地图的SVG代码信息多达两万字节,然而HighChart后端制图程序却有着字节数限原创 2020-05-21 09:30:51 · 587 阅读 · 2 评论 -
从零开始的HTML笔记之 初识HTML
HTML学习一个例子 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>第一个页面</title> 6 </head> 7 <body> 8 <h1>我的第一个标题</h1> 9 <p>我的第一个段落。</p> 10 </body.原创 2020-05-16 09:54:21 · 188 阅读 · 0 评论 -
2020之前端开发之CSS布局基础
(有个即刻偷师学艺的方法——在浏览器里,打开一个设计很棒的网页,鼠标点击右键,选择“检查”,即可查看网页的HTML+CSS代码和相对应的布局位置)一、布局相关的标签二、盒子模型1、什么是盒子模型# 就以快递盒为例快递盒与快递盒之间的距离(标签与标签之间的距离margin外边距)盒子的厚度(标签的边框border)盒子里面的物体到盒子的距离(内容到边框的距离padding内边距)...原创 2020-05-15 09:11:59 · 221 阅读 · 0 评论 -
CSS背景图片之6个有趣的技巧
背景图像可能是所有前端开发人员在我们的职业生涯中至少使用过几次的CSS属性之一。大多数人认为背景图片没有什么不寻常的,但是。。。。。。1.如何将背景图像完美地适合视口body { background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=cro.原创 2020-05-14 09:28:55 · 145 阅读 · 0 评论 -
如何关于fromdata的上传文件问题
1 <div class="imgDIv"> 2 <label>上传pdf</label> 3 <input id="fileId" type="file" accept="application/pdf" class="imgPic"/> 4 </div> var formData = new FormData(); 2 var file = $("#fileId")[0].files[0]; 3 formData..原创 2020-05-14 09:22:32 · 211 阅读 · 0 评论 -
如何通过判断链接方式设置当前样式
<style> #head{float: left;} #head ul li{float: left;list-style: none;padding-left: 15px;} .nav{font-size: 18px;font-weight: bold;} </style> <div id="head"> <ul> <li><a ...原创 2020-05-14 09:21:22 · 171 阅读 · 0 评论 -
关于20-50K 前端工程师的部分面试题集锦 - 附答案
腾讯:明源云:毫无疑问,这些公司都是招聘的大前端技术栈的职位,之前文章提到过 2020 年大前端最理想的技术栈,其实真的弄得很明白那些,出去面试基本上不会有什么问题。小提示:如果发现小公司面试套你的技术和架构,迅速结束,开出天价薪资走人。下面正式公布部分面试题,以及答案:出于对各个公司的尊重,不公布是哪家公司的面试题,以及面试技巧。只公布部分面试题和答案,以及分析问题的角度,学习方向,面试中考察的不仅仅技术深度,还有广度,每个人不可能技术面面俱到,前端学习的东西太多,忘掉一部分也原创 2020-05-14 09:18:50 · 498 阅读 · 0 评论 -
怎么使用HTML设计商城首页
网站首页需求分析根据产品文档,完成商城首页,显示效果如图技术分析表格标签tabletable标签常用的属性:bgcolor : 背景色 width : 宽度 height : 高度 align : 对齐方式tr 标签td 标签合并单元格:colspan : 跨列操作 rowspan : 跨行操作 注意: 跨行或者跨列操作之后,被占掉的格子需要删除掉表格的嵌套:在td中可以嵌套一个表格常用的属性:width="100%"填充步骤分析创建一个8行原创 2020-05-13 09:22:35 · 541 阅读 · 0 评论 -
ES6的快乐笔记
大纲(慕课的图先用着)scope-作用域作用域是指程序源代码中定义变量的区域,规定了如何查找变量,也就是确定当前执行代码对变量的访问权限。JavaScript作用域共有两种主要的工作模型——词法作用域(静态作用域)和动态作用域。JavaScript默认采用词法作用域(lexical scoping),也就是静态作用域。词法作用域是由开发者在写代码时将变量和块作用域写在哪里来决定的。由此出现全局作用域,函数作用域(局部作用域),块状作用域动态作用域一般由this产生注.原创 2020-05-13 09:15:27 · 159 阅读 · 0 评论 -
用 js 获取视频的总时长
js 获取视频的总时长:<!DOCTYPE html><html><head> <title></title></head><body><video id="videoPlayerNew" src="http://vfx.mtime.cn/Video/2019/03/18/mp4/190318231014076505.mp4" controls="controls">your brow原创 2020-05-13 09:14:20 · 1094 阅读 · 0 评论 -
商城类网站头部导航 贼靠谱 建议复制!!!
效果reset.css<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"&g.原创 2020-05-13 09:12:01 · 433 阅读 · 0 评论 -
在我们前端开发过程中,设置css引起的一些bug现象及解决方法
一、设置overflow:hiden行内元素会发生偏移的现象父级元素包含几个行内元素 1 2 3 4 5 6 7 <divid="box"> <p> <span>按钮</span> <span>测试文字文字文字测试文字文字文字</span> <span>看这里</sp...原创 2020-05-12 09:37:34 · 1430 阅读 · 0 评论 -
我个人感觉比较常见的移动web问题,终端触摸交互,各种bug坑如何解决
移动web最佳viewport设置<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">单行文本溢出.inaline{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}多行文本溢出.intwoline{ display:-webkit...原创 2020-05-12 09:30:55 · 128 阅读 · 0 评论 -
html之 post请求的 a标签的两种用法举例说明
html post请求之a标签的两种用法举例1、使用ajax来发起POST请求HTML代码如下:<a href="https://www.cnblogs.com/" class="a_post">发起POST请求</a>JQuery代码如下:$(".a_post").on("click",function(event){ event.preventDefault();//使a自带的方法失效,即无法调整到href中的URL(https://www.c.原创 2020-05-12 09:29:18 · 472 阅读 · 0 评论 -
uni里面怎么把轮播图的图片替换?
说起图片 那就整个循环啊 for循环来一个<view class="uni-padding-wrap"> <view class="page-section swiper"> <view class="page-section-spacing"> <swiper class="swiper" :indicator-dots="xxx" :autoplay="autoplay" :interval="interval" :circula.原创 2020-05-12 09:20:40 · 401 阅读 · 0 评论 -
自定义样式的一个小技巧 萌新不看就是亏啦
众所周知 这是一个截了一半啊 就是一个 menu里面有三个item 用的vant我们可以给item一个名字 比如 x1我们再去sass里面去深度选中他的样式为什么这样选的中呢? 因为组件是很多很多层的 我们在最外层给他一个名字 所以就能直接选中...原创 2020-05-12 09:08:20 · 118 阅读 · 0 评论 -
写个滚动加载,可视区域判断
演示图考虑2个情况一种情况初始状态下 滚动到在中间区域的时候,这时上半部分看不见的元素就不给字体添加红色一种情况是,从头向下看的..ss li { margin: 40px;}<div class="ss"> <ul> <li>sss</li> <li>sss</li> <li.原创 2020-05-09 10:28:51 · 202 阅读 · 0 评论 -
关于Layer UI表格列日期格式化及取消自动填充日期
Layer UI表格列日期格式化方法较为强大 也比较简单针对需要格式化的表格列 添加以下代码即可 ,templet : "<div>{{layui.util.toDateString(d.DEMURRAGE_FREE_DAYS_STOP_DATE, 'yyyy/MM/dd')}}</div>"样例当替换了大批字段之后 运行之后 发现踩了一个大坑 那就是Layer ui框架会自动填充日期若当前字段返回值为NULL 他会自动填充日期为当前时间...原创 2020-05-09 10:01:32 · 594 阅读 · 0 评论 -
关于css z-index的层级关系
什么是“层叠上下文”层叠上下文(stacking context),是HTML中一个三维的概念。在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的X轴,Y轴以及表示层叠的Z轴。一般情况下,元素在页面上沿X轴Y轴平铺,我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠,这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。比如这种解释这种解释非常的官方,也很书面化 我第一次理解的时候也是很麻烦,我说下我理解的看法吧z-index属性值并不是在任何元素上都有效果。.原创 2020-05-09 09:44:31 · 484 阅读 · 0 评论 -
写个简单的显示隐藏
使用if条件判断,来实现div标签的显示和隐藏效果的切换。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&...原创 2020-05-08 09:36:15 · 153 阅读 · 0 评论 -
关于对 flex:1; 的详解
首先明确一点是, flex 是 flex-grow、flex-shrink、flex-basis的缩写。故其取值可以考虑以下情况:flex 的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值,则 flex 的默认值是 0 1 auto。同理,如下是等同的:.item {flex: 2333 3222 234px;}.item {flex-grow: 2333;flex-s...原创 2020-05-08 09:31:32 · 164 阅读 · 0 评论 -
谈谈BFC和高度塌陷的问题
当面试官问道你高度塌陷时,人们第一想到的方法一定是 1 2 3 4 5 6 7 .clearfix::after { content:''; display: block; clear: both; visibility: hidden; ...原创 2020-05-07 09:17:08 · 372 阅读 · 0 评论 -
CSS的 行内元素 和 块类元素 的普及
块级元素 1.总是从新行开始 2.高度、行高、外边距以及内边距都可以控制 3.宽度默认是浏览器的100% 4.可以容纳内联元素以及其他块元素行内元素 1.和相邻元素在一行上 2.高、宽无效,但是水平方向的padding和margin可以设置,垂直方向无效 3.默认宽度就是它本身内容的宽度 4.行内元素只能容纳文本或其他行内元素(a除外) 注...原创 2020-05-07 09:14:33 · 125 阅读 · 0 评论 -
如果你是新手 却不知道这几个框架 你就out了!!!
近年来,Web技术的发展速度快得让人窒息,特别是最近几年一代又一代的变革一次又一次的创造。各大巨头又纷纷把技术转向HTML5和CSS3,各种企业级框架如雨后春笋般涌现。那么今天就给大家介绍几个在web界比较优秀的前端框架。1、BootstrapTwitter出品的Bootstrap在业界是非常受欢迎的,以致于有很多前端框架都在其基础上开发,如我们熟悉的WeX5就是在Bootstrap源...原创 2020-04-29 09:22:31 · 140 阅读 · 0 评论