随笔分类 -  html css h5 css3

contentEditable 富文本，中文输入法触发多次oninput事件解决办法
摘要：1. contentEditable富文本，没有onchange事件，有oninput事件，但是遇见中文输入法时，会触发多次，而我们只想输入结束时触发。那我们需要用到compositionstart和compositionend事件 <pre contentEditable onInput={onI 阅读全文
posted @ 2022-11-08 09:21 simple-love 阅读(1351) 评论(0) 推荐(0)
修改滚动条样式， 并使滚动条不贴边
摘要：// 修改滚动条样式 ::-webkit-scrollbar { width: 10px; height: 10px; background-color: rgba(255, 255, 255, 0); } ::-webkit-scrollbar-thumb { border-top-left-ra 阅读全文
posted @ 2022-06-22 20:50 simple-love 阅读(790) 评论(0) 推荐(0)
图片变形处理，设置属性object-fit: cover完美解决！
摘要：上传头像的时候遇到了头像变形的问题，最后通过object-fit: cover完美解决了。这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能。 object-fit理解 CSS3 background-size出现的比较早，大家应该知道其支持的一些值，除了数值之外，其还支持几个关键字，例如：c 阅读全文
posted @ 2022-03-02 17:55 simple-love 阅读(793) 评论(0) 推荐(0)
css盒模型（标准模式和怪异模式）
摘要：css盒模型一共有两种模式：标准模式和怪异模式 只要完整定义DOCTYPE都会触发标准模式，如果DOCTYPE缺失则在ie6/ie7/ie8下将会触发怪异模式 标准模式：盒子总宽度=width+padding+border+margin 怪异模式：盒子总宽度=width(包含padding+bord 阅读全文
posted @ 2020-11-23 16:29 simple-love 阅读(616) 评论(0) 推荐(0)
实现直播间消息评论滚动，顶部消失效果
摘要：点击查看效果 你只需要吧 代码复制过去，然后吧视频地址替换成你的就可以看见效果了！ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实现直播间消息评论滚动，顶部消失效果， 用浏览器的手机模式开打， 最好360 阅读全文
posted @ 2020-11-07 16:05 simple-love 阅读(1237) 评论(0) 推荐(0)
css3实现动画效果完整代码demo
摘要：过渡渐隐 适合两张图片调整其中一个透明度，完整代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome 阅读全文
posted @ 2020-03-28 09:25 simple-love 阅读(5448) 评论(0) 推荐(0)
pointer-events元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
摘要：https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events 阅读全文
posted @ 2020-03-14 18:03 simple-love 阅读(250) 评论(0) 推荐(0)
类似淘宝，京东sku选择，电商商品选择
摘要：<template> <div class="wrap-sku"> <div class="product-box"> <div class="product-content"> <div class="product-delcom" v-for="(productItem,indexs) in l 阅读全文
posted @ 2020-02-29 17:53 simple-love 阅读(742) 评论(0) 推荐(0)
flex布局水平垂直居中
摘要：flex布局教程：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html教程2： https://www.jianshu.com/p/c71b65a2b3e2flexDirection、justifyContent、alignItems的简单 阅读全文
posted @ 2020-02-23 22:46 simple-love 阅读(3186) 评论(0) 推荐(0)
document load 与document ready的区别
摘要：页面加载完成有两种事件 1.load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数 问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响 2.$(document).ready()是当DOM文 阅读全文
posted @ 2019-12-04 12:16 simple-love 阅读(470) 评论(0) 推荐(0)
Canvas制作天气预报走势图
摘要：要实现的效果如下图： HTML代码如下： CSS代码如下： 阅读全文
posted @ 2019-09-03 11:29 simple-love 阅读(1967) 评论(0) 推荐(0)
写移动端自适应屏幕的方法
摘要：版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/weixin_43606158/article/details/89300534 前端移动端开发的时候肯定是会面对不同型号的手机的页面展示问题 阅读全文
posted @ 2019-08-29 17:47 simple-love 阅读(786) 评论(0) 推荐(0)
解决html连续字符或数字换行的问题
摘要：word-break: break-all; word-wrap:break-word; 强制换行 阅读全文
posted @ 2019-08-29 10:23 simple-love 阅读(1562) 评论(0) 推荐(0)