
HTML/CSS
HTML/CSS
@~~涛
这个作者很懒,什么都没留下…
展开
-
你真的了解回流和重绘吗
浏览器页面的回流和重绘原创 2022-10-17 22:03:48 · 134 阅读 · 0 评论 -
解决滚动穿透问题
1、在vue中,在标签中添加下面代码@touchmove.native.stop.prevent2、在原生h5中,可以通过弹窗的显示,来控制body的溢出是否隐藏//弹窗显示,body内容溢出隐藏overflow:hidden;//弹窗关闭,body隐藏显示滚动条overflow:auto;...原创 2021-11-25 22:36:33 · 356 阅读 · 0 评论 -
css实现禁止缩放,避免有些用户放大字号,导致页面布局错乱(maximum-scale=1.0, user-scalable=0)
在meta标签中添加“maximum-scale=1.0, user-scalable=0”两个属性即可禁止页面缩放。<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">原创 2021-11-25 20:28:07 · 4462 阅读 · 2 评论 -
密码输入框,获取焦点不弹出浏览器的填充账号密码弹窗的方法
<el-input class="password-input" v-model="form.password" placeholder="请输入密码"></el-input>.password-input{ -webkit-text-security: disc;}原创 2021-05-20 18:33:24 · 1212 阅读 · 0 评论 -
原生js实现拖拽效果案例
主要事件:1、onmousedown:鼠标按下事件2、onmousemove:鼠标移动事件3、onmouseup:鼠标按键被松开事件三个事件分别绑定的对象:(1)onmousedown:绑定到要被拖拽元素上(2)onmousemove:绑定到document上,主要是为了防止鼠标移动过快,移出要拖拽的元素(3)onmouseup:绑定到document上,主要是为了防止鼠标移动过快,移出要被拖拽的元素,导致无法触发鼠标按键被松开事件基本思路:拖拽状态 = false鼠标在原创 2020-11-27 17:35:36 · 535 阅读 · 0 评论 -
css3正反面内容翻转切换
<!doctype html> <html> <head> <meta charset="utf-8" /> <style> *{margin:0;padding:0;} .element{position:relative;color:#fff;text-align:center;line-height:...原创 2020-09-16 13:38:24 · 1413 阅读 · 0 评论 -
让原生table的tbody达到一定的高度显示滚动条,并修改滚动条的默认样式
效果图:HTML:<table class="coupon-table" cellspacing="0"> <thead class="coupon-thead"> <tr> <th>券种类</th> <th>优惠券链接</th> <th>券消费限额</th> <th&g原创 2020-08-27 16:53:57 · 1555 阅读 · 0 评论 -
鼠标移入商品列表项,商品图片动画过渡放大
鼠标移入完整代码:<template> <div class="container"> <div class="goods-box"> <div class="left"> <div class="bg-img"></div> </div> <div class="right"> 商品标题 </div>.原创 2020-07-24 16:55:06 · 221 阅读 · 0 评论 -
css禁止点击事件
pointer-events: none;原创 2020-05-11 11:39:21 · 619 阅读 · 0 评论 -
解决input输入框自动填充账号密码出现背景色的问题
https://blog.youkuaiyun.com/qq_35393869/article/details/81978037原创 2020-04-30 14:20:55 · 5262 阅读 · 0 评论 -
css让文字底对齐
vertical-align: bottom; /*底对齐*/原创 2020-04-23 14:34:58 · 3967 阅读 · 0 评论 -
WEB 页面 控制Tab键切换的顺序
控制Tab键切换的顺序可以在标签中加tabIndex,如果要跳过某个内容,可以在该内容标签加tabIndex,设置值为-1<input type="button" id="b1" tabIndex="1" value="Button1" /> <input type="button" id="b2" tabIndex="-1" value="Button2" /> &...原创 2020-04-21 23:25:12 · 1303 阅读 · 0 评论 -
CSS让文字溢出显示省略号
display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;注意:要固定高度原创 2020-04-08 17:54:12 · 197 阅读 · 0 评论 -
CSS user-select: none禁止鼠标移动选择文字
取值:none: 文本不能被选择text: 可以选择文本all:当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素。element: 可以选择文本,但选择范围受元素边界的约束当然,常用的是user-select: none详细请看☞ https://www.html.cn/book/css/properties...原创 2020-03-05 15:34:42 · 472 阅读 · 0 评论 -
html文件中纯数字或纯英文不会自动换行
在div中输入有中文的就会自动换行,输入全数字或者英文不会自动换行,此时,需要在css文件中添加样式:word-wrap:break-word; word-break:break-all;原创 2020-02-06 15:43:30 · 428 阅读 · 0 评论