搜索内容

包含标签:css 的文章
  • getBoundingClientRect 与 滚动加载
    其他

    getBoundingClientRect 与 滚动加载

     getBoundingClientRect 用bottom举例, 获取到的数据是元素底部相对于屏幕上边的距离 const client = $dom.getBoundingClientRect(); 1、如果元素位于屏幕上面的不可见区域,client.bottom 会是负数 2、如果元素位于屏幕下面不可见区域,client.bottom > window.innerHeight 假如有个滚动加载的需求: 1、元素需要滚动加载,那么首先已经加载的部分的client.bottom 肯定是 大于 window.innerHeight 2、当逐渐向下滚动,client.bottom 会越来越小,当client.bottom < window.innerHeight 时, 它就出现在可视区域了。 demo代码 let subscription = fromEvent(window, "scroll") .pipe(debounceTime(50), takeUntil(this.des
    admin 今天
  • [JavaScript] js计算出对称年月日20211202
    其他

    [JavaScript] js计算出对称年月日20211202

    对象发来消息说今天正好是20211202日, 从左往右读还是从右往左读都是一样的数字的年月日,就来了兴趣, 代码如下:  const arr = []; for (let i = 1000; i < 3000; i++) { for (let j = 1000; j < 3000; j++) { if ( String(i)[0] === String(j)[3] && String(i)[1] === String(j)[2] && String(i)[2] === String(j)[1] && String(i)[3] === String(j)[0] ) { if (Number(String(j)[0] + String(j)[1]) <= 12) { if (Number(String(j)[2] +
    admin 今天
  • 简易计算器(jquery)
    其他

    简易计算器(jquery)

    首先对于依赖于jquery的网页来说首先创建html后一定要先引入jquery插件 body { margin: 0px auto; padding: 0px; border: 1px solid #000; width: 500px; height: 600px; } #show { height: 175px; background: #d3d3d3; } #control { height: 425px; background: #bebebe; } #control div { height: 83px; width: 500px; } #control div div { margin: 2px 2px; float: left; height: 81px; width: 121px; background: #d3d3d3; } #control
    admin 今天
  • css样式穿透的三中写法
    其他

    css样式穿透的三中写法

    当我们使用第三方组件的时候,普通的方法没有办法修改第三方组件的样式,可以使用样式穿透的方法来做,样式穿透的三种写法及应用场景: 1、stylus的样式穿透 使用 >>> 外层 >>> 第三方组件{ 样式 } .ql-containe >>> .ql-editor.ql-blank:before{ background: #fff } 2、sass 和 less 的样式穿透 使用 /deep/ 外层 /deep/ 第三方组件 { 样式 } .ql-container /deep/ .ql-editor.ql-blank:before{ background: #fff; } 3、普通的css样式 (亲测有效) 使用 ::v-deep ::v-deep .ql-editor.ql-blank:before{ font-style: normal; }
    admin 今天
  • 【无标题】
    其他

    【无标题】

    图片测试
    admin 今天
  • uni rich-text内置组件的样式修改
    其他

    uni rich-text内置组件的样式修改

    小程序视频rich-text组件的图片自适应 插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 其实也很简单的啦,一切 css搞不定的就用 js 所谓 All In js ,在小程序中,经过重新解析变异的组件多少都会有不一样的,你用css写的代码未必能控制得到,所以很多时候我们都是借助 js进行修改的。话不多,放码过来: 结构部分:html
    admin 今天
  • 父元素flex:1,子元素宽度100%失效的问题
    其他

    父元素flex:1,子元素宽度100%失效的问题

    今天做项目时遇见一个问题,父元素在设置flex:1来固定宽度撑满时,子元素设置width100%无效。经过尝试发现给父元素及设置flex:1的元素加上width:0可解决。即这样写: .parent{ flex:1; width: 0; .children{ width: 100%; overflow-x:scroll ; } } 但同时遇到了另一个问题,我发现这样设置后,即使width超过之后,横向滚动条依然不出现,经过尝试加上一句代码即可: .parent{ flex:1; width: 0; .children{ width: 100%; overflow-x:scroll ; display: -webkit-box; } }
    admin 今天
  • CSS 与 javaScript
    其他

    CSS 与 javaScript

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术:Adobe Dreamweaver 作者:LYQlife113 撰写时间:2021年10月8日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 上次我们介绍完了HTML的基本简介,这期我们就来说一说与HTML息息相关的两种语言,下面跟我来了解一下吧! 一、CSS层叠样式表: 层叠样式表,英文名:( Cascading Style Sheets )是一种用来表现HTML或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言 动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级别精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。 工作原理:CSS是一种定义
    admin 今天
  • css使用JS变量
    其他

    css使用JS变量

    使用场景: css使用js中的变量来定义 解决方案: css变量 实例 : 直接上代码:
    data() { return { width: "200px", color: "#f00", margin: "10px 20px 10px 20px", border: "2px solid red" }; }, .test { width: var(--width); color: var
    admin 今天
  • 为何会产生1px像素问题。你了解过其原理吗?
    其他

    为何会产生1px像素问题。你了解过其原理吗?

    问题描述:1px像素问题指的是在代码中写了1px,但是在某些手机的屏幕上就会看到的很粗。 在探究该问题之前,我们需要了解几个概念: 1、平时说的屏幕分辨率 xxx * xxxx,指的是屏幕的物理分辨率,简单来说就是屏幕上有多少个像素点。同样尺寸的屏幕,分辨率越高,图像展示的也就越清晰。 2、设备独立像素:我们日常代码写的px,在设备缩放比例为100%的情况下,1px等于1个设备独立像素。在我们打开谷歌浏览器的手机模拟器的时候,看到的那些尺寸就是设备的独立像素。 3、设备像素比:设备的物理像素/设备的独立像素的比值。在web中,浏览器为我们提供了window.devicePixelRatio来帮助我们获取dpr。 在了解了这些概念之后,苹果在4之后提出了视网膜概念的屏幕,例如iphone 6 7 8 的设备像素比是为2。这种屏幕称之为Retina屏幕。当我们在代码写1px1px的一个div时,在iphone6的
    admin 今天
  • ceshifabu
    其他

    ceshifabu

    13esddzs 加粗样式 斜体样式 标题 标题 List item
    admin 今天
  • 你还不知道这个CSS技巧?89%的浏览器都已经完美支持它啦
    其他

    你还不知道这个CSS技巧?89%的浏览器都已经完美支持它啦

    前言 我们都知道在前端开发中经常遇到需要保持一个元素的长宽比,最常见的就是我们的Img元素,但是除了img、vidoe这种可替换元素元素具有长宽比的特性,那么其它元素如果保持长宽比呢,这给我们的开发带来了许多不便利,今天就教大家使用aspect-ratio属性解决实际问题 正文  臭名昭著的Padding-Top Hack💚 不知道你有没有遇到过这么一道经典面试题(请你写一个保持长宽纵横比的DIV元素)就得用Padding-Top Hack解法。 什么是Padding-Top Hack,不知道你是否遇到过这种需求,需要一个非可替代元素始终保持它的长宽比?,如何做的?Padding-Top Hack就是最常见的解决方案。 利用padding来保持元素的长宽比 *{ padding: 0; margin: 0; } .aspect-ratio-hack { position: relative; height: 0
    admin 今天
  • Mybatis——动态SQL环境搭建、if、Choose、set、foreach语句的使用
    其他

    Mybatis——动态SQL环境搭建、if、Choose、set、foreach语句的使用

    一.动态SQL环境搭建 1. @SuppressWarnings("all") //抑制警告,全部都不报错 2.随机生成ID package com.Utils; import java.util.UUID; @SuppressWarnings("all") //抑制警告,全部都不报错 public class IDUtils { public static String getId() { return UUID.randomUUID().toString().replaceAll("-",""); } } 3.mybatis-config.xml 日志工厂 使Bean类中的属性与数据库名对应
    admin 今天
  • 学成在线网页设计
    其他

    学成在线网页设计

    学成在线-不是所有的网站都叫学成在线
    admin 今天
  • 任意两个数之间的随机数
    其他

    任意两个数之间的随机数

    //得到任意两个数之间的随机数 function getRandom(x,y) { var m=Math.max(x,y) var n=Math.min(x,y) var getRandom=Math.round(Math.random()*(m-n)+n) console.log(getRandom); } getRandom(4,6)
    admin 今天
  • webwork
    其他

    webwork

    ![1 这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客: 全新的界面设计
    admin 今天
  • vue3项目引入animate.css教程
    其他

    vue3项目引入animate.css教程

    0、项目背景:vue3 + vite + typescript 以下是项目使用的版本 "vue": "^3.0.4", "typescript": "^4.4.4", "vite": "^2.6.14" 1、安装animate.css npm i animate.css 安装完毕之后可以在package.json查看安装的版本,下图是本次安装的版本: "dependencies": { "animate.css": "^4.1.1" } 2、引入animate.css 在vue项目的main.ts中将动画库引入 // 引入动画库 import "animate.css" 3、使用 非常简单,直接给需要加动画的html加上对应的类名即可,例如:
    更多的动画,
    admin 今天
  • Taro Image组件设置宽高为100%时出现纵滚动条
    其他

    Taro Image组件设置宽高为100%时出现纵滚动条

    最近在使用taro开发小程序时发现一个怪异的现象,其实也不算是怪异,只是自己平时没太注意的现象。 有一个显示图片的组件,类似下面: .imageContent { width: 160px; padding: 16px; .image { width: 100%; height: 100%; } } 但是显示图片的时候,出现了纵向滚动条: 就像上面图片右侧的滚动条,不明白这是什么原因了。 然后就百度了一大堆,感觉都不太符合这种情况,首先是子元素的高度是100%于父元素的,那么就是说图片的高度是等于父元素的高度的,那么既然是相同的高度,又为什么会出现纵滚动条呢?现在出现了纵向滚动条,那么说明子元素的实际高度是大于父元素的实际高度的 ,但是父子元素在F12
    admin 今天
  • " alt="poss八十七氟癸基/白色粉末状/溶于氟类树脂/自修复超疏水材料">
    其他

    poss八十七氟癸基/白色粉末状/溶于氟类树脂/自修复超疏水材料

    OSS具有稳定的纳米笼形结构,可用作.光致抗蚀剂的增强材料。含有POSS结构的光刻胶具有良好的热稳定性、空间和结构稳定性及突出的抗等离子蚀刻性能等优点,因此,POSS改性的聚合物材料在光刻胶领域中具有很好的应用前景。 具体表现为: (1)提高聚合物的使用温度 poss中有机基团连接着耐热性很的无机分子, 使得加入poss的聚合物 在一般聚合物的降解温度下仍能保持原有状态不变, 因而poss在高温条件下十 分稳定, 当温度达到400℃时仍然具有热稳定性; 同时由于poss具有特殊的 笼状结构, 其分子量与分子尺寸均较一般的无机填料大, 使之具有控制主链运动 的能力, 它的引入将大大阻碍聚合物链段的运动, 因此它可使几乎所有热塑性和 热固性聚合物的使用温度有所提高。 (2)提高改性体系的力学性能 poss的加入可以大幅提高聚合物材料的度, 并增加聚合物材料的弹性模量和硬度, 同时基本不改变聚合物材料的应力. 应变特性。 一般情况下, 聚合物力学性能的提高会伴随着加工难度的增加, 但由于poss的纳米尺寸结构, 加入后可在提高力学
    admin 今天
  • CSS实现中英文混合打字效果实现
    其他

    CSS实现中英文混合打字效果实现

    效果图如下:

    {{msg}}

    {{msg}}

    admin 今天
  • html的p标签,遇到数字和字母过长不会换行的问题
    其他

    html的p标签,遇到数字和字母过长不会换行的问题

    描述:html的p标签,遇到长数字和字母不会换行并且撑开外层容器的问题   解决办法 设置css,代码如下: style="word-wrap:break-word;word-break:break-all;"
    admin 今天
  • vue组件化和传值
    其他

    vue组件化和传值

    vue组件化 1.组件化简介 组件化是vue中非常重要的一个东西,最重要的就是使用的组件可以实现复用,这样就可以减少代码量 2.组件化使用 组件分为两种:一种是全局组件,一种是局部组件(局部组件使用的最多) 全剧组件的使用: