分类：div

2021
06-19

不要在HTML中滥用div

概述做前端开发的同学都知道，一个网页的基本组成部分是HTML，JavaScript和CSS。开发人员通常更关注JavaScript和CSS，实践着各种语言规范和设计模式。对于HTML的关注度则明显偏少，只要能做出设计师画的界面就万事大吉了，不怎么去关心HTML是不是规范合理。于是下面的情况随处可见：按钮用的是可点击的<div>而不是<button>元素标题用的是<div>而不是标题元素(<h1>，<h2>等等)<input>相应的文本标签用的... 继续阅读 >

2020
10-10

vue实现div可拖动位置也可改变盒子大小的原理

以下是效果图：实现了div盒子在固定区域的拖动，也可改变盒子的高度和宽度，当超出边距后无法继续改变大小这里说一下大致原理：拖动和改变大小是分开来操作的，接下来分别说一下盒子拖动这里用到了js的三个鼠标事件，分别是onmousedown(鼠标按下)、onmousemove（鼠标移动）以及onmouseup(鼠标松开)，大致流程就是鼠标按下拖动图标进行拖动时，动态获取当前div的left和top再重新赋值给当前div的top、left值，当鼠标松开再清除事件，... 继续阅读 >

2020
10-08

vue实现给div绑定keyup的enter事件

摘要：发现给div绑定keyup.enter事件是没有效果的。那该如何实现呢？下面直接上代码吧1、在template中代码2、在created的生命周期中，写一个全局的enter事件这样按下键盘中的enter事件就是有效的了补充知识：vue给div绑定keyup的enter事件实现接电话（结合阿里云软电话SDK）摘要：之前我们的接入的阿里云软电话SDK的功能，现在有个新的需求就是我们自己的弹窗中添加一个按钮可以接听电话，同时可以按键盘的Enter键接电话。（这里... 继续阅读 >

2020
10-08

基于Echarts图表在div动态切换时不显示的解决方式

简单粗暴，先上图，大概长这样：在使用vue时有遇到像上图下拉框change事件切换div，change切完后大概会变成这个样子：上代码：<divclass="test"><pclass="title"><selectv-model="selected"v-on:change="change"><optionv-for="optioninoptions"v-bind:value="option.value">{{option.text}}</option></select></p><span>{{selected}}</span><divid="timesharechart"v-show="isvisibl... 继续阅读 >

2020
10-08

Vue切换div显示隐藏,多选，单选代码解析

切换div显示隐藏1）单个item下的部分dom结构，显示或隐藏切换，不会修改其它同级dom的显示/隐藏templatedom结构<divclass="list-item"v-for="(list,index)injobList"><pclass="job-name">{{list.jobName}}</p><pclass="job-info"><el-checkboxv-model="list.checked"@change="checkOne(index)"></el-checkbox><spanclass="info">{{list.locationDesc}}{{list.minDegreeDes... 继续阅读 >

2014
10-16

DIV+CSS兼容所有浏览器的技巧大全

DIV+CSS兼容所有浏览器的技巧大全CSS技巧1.div的垂直居中问题vertical-align:middle;将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。缺点是要控制内容不要换行? 2.margin加倍的问题?设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;?例如：?<#divid=”imfloat”>?相应的css为?#IamFloat{?float:left;?margin:5px;... 继续阅读 >