ICode9

精准搜索请尝试: 精确搜索
  • 10、jQuery2022-09-12 19:01:00

    $(selector).action() 点击查看代码 ![](https://img2022.cnblogs.com/blog/2763194/202209/2763194-20220912143203634-23161545.png) 文档工具站: https://jquery.cuishifeng.cn/ 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta c

  • 简单的Css动画--涟漪效果2022-08-30 23:00:24

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=d

  • 拖拽上传文件2022-07-30 10:04:45

    1. 使用 div 标签,然后通过 addEventListener 监听拖拽文件 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta

  • CSS float(浮动)塌陷与clearfix(清除float属性)案例2022-05-28 21:31:58

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .head{ width: 100%; border:1px solid red; } .head .

  • touch事件与click事件2022-05-20 10:00:53

    touchStart touchMove touchEnd   1. 如果点击屏幕,会触发touchStart,touchEnd,click事件2. 如果点击屏幕并且有划动,会触发touchStart,touchMove,touchEnd事件3. touchmove和click是相斥4. 在移动端点击两下屏幕, 会有缩放,点了第一下需要等待第二下, 所以click事件会有延迟300毫

  • 4:垂直水平居中2022-04-25 18:32:26

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="w

  • client系列2022-04-18 15:03:03

    client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。 通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。     <style> div { width: 500px; height: 500px; background-color: aquamarine;

  • 径向渐变(放射性)2022-03-26 17:33:24

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="w

  • 响应式布局2022-03-25 20:34:11

    ------------恢复内容开始------------ 响应式布局就是手机端,电脑端,不管尺寸的大小,页面都能正常显示   ------------恢复内容结束------------ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible&

  • Echarts 折线图自动选中并跳转2022-03-03 13:59:23

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible&qu

  • background-clip的一个应用小技巧2022-02-27 15:03:51

    在我的前端学习之路上,background-clip这个属性可谓是平平无奇,跟其他的背景属性之间感觉没有太多的区别。但实际上,这个属性只要在前面加上一点支持对应浏览器的内核兼容的前缀,就能发挥出让人眼前一亮的效果! 那么这个效果是什么呢?下面请先看效果展示: 这个效果的实现方式就是让back

  • CSS水平垂直居中的九种方式2022-01-26 15:04:14

    居中元素宽高已知 (一)absolute + margin <style> .father{ width: 500px; height: 500px; border: 1px solid black; position: relative; } .child{ width: 100px; heig

  • 嵌套块元素塌陷处理2022-01-08 22:02:47

    塌陷: explanation:父子块元素同时有上外边距,父元素应用较大的外边距值解决方法 父元素加上overflow:hidden;(常用)父元素加上透明border,即border: 1px solid transparent;父元素加上上内边距,即padding: 1px eg: /*塌陷时*/ <style> .fa { width: 500px;

  • div拖拽改变其宽度2021-09-17 14:00:40

    CSS: body { margin:0; padding:0; overflow-y:auto; } #leftDiv { width:300px; height:500px; border:1px red solid; border-right:none; float:left; } #splitDiv { float:left; width:1px; height:500px; border-left:1px blue solid; } #rightDiv { margi

  • 2.背景缩放background-size:①图片的宽度 图片的高度;②某条边的长度等比缩放③50%④cover;⑤contain;2021-07-26 13:29:58

      目录   一:背景缩放background-size: 二:背景图片二倍图 一:背景缩放background-size: <style> div { width: 500px; height: 500px; border: 2px solid red; background: url(images/dog.jpg) no-repeat;

  • 18.一透视perspective:500px值越小,离屏幕越近。二①3D旋转transform: rotateX/②Y(45deg)③transform: rotate3d(1,1,0,90deg)2021-07-25 18:33:57

    目录 一:透视 : perspective:500px;值越小,离屏幕越近 加透视和不加透视的区别: ​ 二:3D旋转要加透视的 ①X轴45度(deg): ②Y轴45度(deg): ③Z轴45deg 一:透视 : perspective:500px;值越小,离屏幕越近 加透视和不加透视的区别:   二:3D旋转要加透视的 ①X轴45度(deg): <style>

  • 放大镜2021-07-13 15:03:45

    放大镜大家都不陌生,这次我就用js写一个放大镜 css代码 { margin: 0; padding: 0; } .kk { display: flex; } .box { width: 500px; height: 400px; border: 1px solid red; user-select: none; } .box .img img { width: 500px; height: 400px; }

  • C1-任务04 JavaScript编程2021-07-01 16:02:41

    C1-04 LGZ小组 说明 ⼤多数⼩公司的⼯程师需要处理的数据量很少,只要完成业务功能就可以,学不学数据结构和算法没有任何差别。⼤⼚就完全不同 了——⼤⼚的⼯程师可能会⾯对⼏千万甚⾄⼏亿的注册⽤户,开发的是TB、PB级别的数据处理系统,需要利⽤各种中间件整合衔 接多个上下游系

  • 小盒子在大盒子里水平垂直居中的几种方式2021-06-26 10:02:43

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } /*方法一、纯margin + overflow:hidden;*/ /* .boss{ width: 5

  • tabs切换tab页中的echart图变形,宽高仅100px问题2021-05-19 19:02:48

          原因是在页面进行加载时,父容器最初是被隐藏的,宽高为0。隐藏的图表找不到对应的div大小,所以默认给了一个大小。 解决方案一: 把宽高固定写死, 比如style=”width:500px;height:500px”,这时候echarts有了明确的大小时候就可以正常显示出来了。 但是如果 想要 100%铺满且随

  • 3D旋转图片、视频2021-05-16 11:05:14

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d

  • 元素垂直居中的几种方法2021-03-16 20:59:58

    一、行内元素的垂直居中方法 核心:line-height = height 例: <div class="box"> <span class="span">content</span> </div> <style> .box{ height: 100px; border: 1px solid blueviolet; } .id{ line-height: 100px;

  • jsp2021-03-15 13:33:28

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'index.jsp'

  • elementUI 组件兼容移动端(媒体查询)2021-03-08 12:59:56

    @media screen and (max-width: 500px) { .el-message { min-width: 300px !important; } } @media screen and (max-width: 500px) { .el-message-box { width: 300px !important; } } @media screen and (max-width: 500px) { .el-dialog__wrapper .el

  • 如何让一个div垂直水平居中,分别用css和css3的多种方法实现2021-02-25 12:32:49

    咳咳,同学,你先讲一下如何让一个div垂直水平居中,至少讲三种方法? 这句话应该也都很熟吧,面试官的基操,当然这也是css中很有代表性的一道题了,作为前端领域的专业人员,你支支吾吾地就说不过去了吧,至少应该笑着说出四五个吧~~~ 话不多说,上方案,先看看css3之前的做法,分为知道盒子的宽

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有