css
KLW75
笔记存放处,仅供参考。
展开
-
背景图 图片铺满页面关键词 css h5
让背景图片铺满页面的写法。css样式background:url(.png) no-repeat center center fixed ;background-size: cover;原创 2021-12-20 10:17:00 · 114 阅读 · 0 评论 -
css 动画旋转与平移不能同步进行的问题与正确写法
css 动画 平移 旋转 同时原创 2021-12-18 19:18:29 · 577 阅读 · 0 评论 -
scss 使用$ 定义变量的时候报错
使用scss可以定义变量。如果在定义变量的时候报错请检查style标签是不是没有声明lang<style lang="scss"> </style>添加上lang以后就不会报错了。原创 2021-09-07 14:50:07 · 1415 阅读 · 0 评论 -
银行卡号格式化内容
代码内容:this.num是获取的银行卡号。方法名: { get() { return this.num.replace(/\s/g, '').replace(/\D/g, '').replace( /(\d{4})(?=\d)/g, '$1 ') }, set(val) { this.num = val; } },原创 2021-08-04 16:10:19 · 243 阅读 · 0 评论 -
uni-simple-router 页面跳转 (跳转到新的页面)uni-app路由管理器
点击跳转官网专为uni-app打造的路由管理器简介路由跳转功能使用uni-simple-router 跳转到新的页面。push 跳转到普通页面,新开保留历史记录。replace 动态的导航到一个新的url,并且关闭当前页面,跳转到...原创 2021-08-02 15:47:09 · 3953 阅读 · 0 评论 -
css 解决因为书名号不满一行就换行情况
有时候,会因为《》里面动态添加数据,因为外层的书名号导致不满一行就换行。例如这样的写法。<span>《{{text}}》</span>修正这个情况,使用::before 与 ::after<span>{{text}}</span>样式cssspan::before{ display: inline; content: "《" } span::after{ display: in原创 2021-07-08 19:08:54 · 2002 阅读 · 0 评论 -
css 写一条虚线
<hr style="color: #ddd ;border:1rpx dashed;width: 610rpx;">color 是虚线的颜色border:虚线的高度 dashed(这里只有是dashed是固定的,这个属性表示虚线)width 表示宽度原创 2021-07-08 15:57:21 · 910 阅读 · 0 评论 -
vue 中动态绑定 placeholder的值
在页面中使用:placeholder 绑定一个名称 <input type="text" :placeholder="绑定的值的名称" />在数据部分data(){ return{ 名称: '具体的值',//将input的placeholder绑定上这个属性 ,绑定这个值 }}这个值具体为什么,视情况而定,还可以监听一个值的变化,然后根据那个值的变化,变化绑定的值的具体内容例如watch: { 监听的值: function(.原创 2021-07-02 23:29:21 · 6645 阅读 · 5 评论 -
伪类before、after的使用(实现下划线与图标)
很多图标或者下划线可以使用伪类来实现。以before为例。after同理.line:before { content: " "; //content 这个是必填项,没有就不会有效果 //display: inline-block; 这些都按照样式来写 //position: relative; 不是必填项 right: 5px; top: 4px; width: 8px; height: 3px; border-radius: 4px; back原创 2021-07-02 23:15:57 · 1669 阅读 · 0 评论 -
vue 三元表达式 动态添加类(动态绑定样式)
可以使用三元表达式 ,根据条件,来给div 添加类名。例如满足条件的时候,添加类名1,不满足条件的时候,添加类名2。<div :class="[条件表达式? '类名1' : '类名2']">测试1</div>还可以在这个基础上使用,三元表达式的嵌套。除了动态添加的类名,再加上一个固定的类名的写法,满足条件动态添加类1,不满足条件,不动态添加类。(因为第二个位置为空)<div :class="[条件 ? '类1' : '','确定一定会使用的类名'].原创 2021-07-02 23:06:54 · 5039 阅读 · 0 评论 -
html 中脱离文档流的方式 (div 脱离文档流)
元素脱离文档流之后,不在文档流中占据空间。浮动脱离文档流 绝对定位脱离文档流 fixed 脱离文档流(与绝对定位相似)原创 2021-07-02 22:51:40 · 1163 阅读 · 0 评论 -
移动端css初始化文件
移动端css初始化文件出来自己写之外,可以使用normalize .css链接地址:https://necolas.github.io/normalize.css/有详细文档,模块化的样式。原创 2021-04-26 20:14:19 · 624 阅读 · 1 评论 -
link标签实现网页标题小图标
1、在这个网站把你的图片转换成ico图标转换网站点击这里2、把你生成的ico图标下载到本地,放到你的文件夹中。3、使用link标签 <link rel="icon "href="图片的位置">这里的href中放对应图片的位置。问题,为什么要转换答:favicon必须是16*16或者32*32的,必须是8位色或者24位色的,转换一下就符合标准了。问题:图片的格式都可以是什么?答:png ico gif 这三种都可以。...原创 2021-04-13 11:05:18 · 1323 阅读 · 0 评论 -
使用scrollTop失效并一直为0(移动端 手机 真机)
移动端使用scrollTop失效并一直为0问题在浏览器的仿真界面中,scrollTop 数值正常,可以正常显示。但是在真机上面 scrollTop的值一直为 0 不发生变化。解决html与 body 的 height 不要设置为 100%。设置为 min-height如果不是必须的可以删除。body { width: 100%; min-height: 100vh; }把原来的 定义的 document.documentElement.scrollTop 修改为 window原创 2020-10-13 14:49:13 · 2539 阅读 · 1 评论 -
页面滚动到最下方时候触发事件的实现(scrollHeight、clientHeight、scrollTop 的使用)
先直接上代码,解释在内容下方。window.onscroll = function() { var a =document.documentElement.clientHeight; var b =document.documentElement.scrollTop; var c = docume...原创 2019-08-13 14:41:21 · 715 阅读 · 0 评论 -
Hbuilder X 无法预览静态html 显示404
1、检查你的项目名称,如果是中文名称,修改成英文的项目名。基本上这样操作就可以了。如果无效可以尝试修改 server.js2、修改server.js方法 见博客https://blog.csdn.net/qq_36667170/article/details/105033586...原创 2020-10-12 09:58:26 · 3908 阅读 · 2 评论 -
CSS calc() 函数 失效
CSS calc() 函数 失效的可能原因请检查运算符前后是否有空格。运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);没有空格会失效,width: calc(100%-10px);这样的写法是错误的。原创 2020-09-18 14:03:12 · 591 阅读 · 0 评论 -
canvas 设置 不同手机宽度不同宽度不同(伪自适应)
重点是绘制的时候,宽和高根据 页面可视宽度来设置。不同手机的宽度不同,这个值是不同的,所以canvas的宽度也变化了。w = window.innerWidth使用window.innerWidth 获取页面的宽度,来计算处理这个宽度来设置canvas的宽与高。 w = canvas.width = window.innerWidth;希望有帮助你。...原创 2020-09-11 16:04:56 · 515 阅读 · 0 评论 -
css 适配iphonex 与 iphone11 的写法
11 的@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) x 的@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)原创 2020-09-07 13:58:00 · 324 阅读 · 0 评论 -
android 端 css 透明度 opacity 失效的问题
在安卓端,如果出现设置opacity 透明度失效的时候请检查{ opacity: 24%;}opacity的值是不是百分比,如果是百分比请换成小数。{opacity: 0.24;}有一定几率就会恢复正常。希望对你有帮助。...原创 2020-09-07 13:24:00 · 1564 阅读 · 0 评论 -
css 实现半圆与四分之一圆
半圆的css控制 border-radius 与宽 高,来设置圆的方向。div { width:10px; height: 20px; background-color: pink; border-radius: 0 10px 10px 0; /*四个值分别为 左上、右上、右下、左下 */}1/4圆这里是左上的四分之一圆。根据需要变化border-radius 的值。div { width: 10px; height: 10px; background-colo..原创 2020-09-02 20:21:28 · 1193 阅读 · 0 评论 -
css 页面内容不允许复制
页面中的文本不允许复制。不允许在手机上展示的时候,选中文本。body { -moz-user-select: none; /* Firefox */ -webkit-user-select: none; /* WebKit */ -ms-user-select: none; /* IE */ -khtml-user-select: none; /* KHTML */ -o-user-select: none; /* Opera */ user-select: none; /原创 2020-08-26 13:25:17 · 1377 阅读 · 0 评论 -
css 设置背景上面是图片,下面用纯颜色填充
页面上面用一张背景图片,下面空白的地方 用其他纯颜色铺垫。css样式div{ background: url(图片.png) no-repeat scroll top center #111111; background-size:100%; }原创 2020-08-19 11:13:23 · 2745 阅读 · 0 评论