过往一些不足的地方,通过博客,好好总结一下。
1.css禁用鼠标事件
.disabled {
pointer-events: none;
cursor: default;
opacity: 0.6;
}
复制代码
2024年10月26日
过往一些不足的地方,通过博客,好好总结一下。
.disabled {
pointer-events: none;
cursor: default;
opacity: 0.6;
}
复制代码
2024年10月26日
CSS表达式 attr() 用来获取选择到的元素的某一HTML属性值,并用于其样式。它也可以用于伪元素,属性值采用伪元素所依附的元素。
例子:
运行结果:
浏览器支持情况:
IE只有IE11才支持,其他浏览器可以安全使用
currentColor
currentColor不是一个css属性,而是color的属性值。它返回当前的标签所继承的文字颜色。
2024年10月26日
HTML 的 select 标签是网页开发人员构建交互式下拉列表的强大工具。它允许用户从预定义的选项列表中进行选择,使表单输入更加高效且用户友好。在本文中,我们将全面探索 select 标签的各种可能性,揭秘一些提高表单功能和用户体验的技巧。
select 标签的基本语法
2024年10月26日
在Vue中,可以通过设置`v-model`的值来控制`select`的选中状态。如果你想让`select`不选中任何选项,可以将`v-model`的值设置为一个空字符串或者`null`。
例如,假设有一个`select`的选项列表如下:
```html
<select v-model="selectedOption">
2024年10月26日
作者 | 浪里行舟
责编 | 胡巍巍
在互联网时代,数据安全与个人隐私受到了前所未有的挑战,各种新奇的攻击技术层出不穷。如何才能更好地保护我们的数据?本文主要侧重于分析几种常见的攻击的类型以及防御的方法。
2024年10月26日
Javaweb技术分享
在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了。
每天应对各种需求,每天活在疑问中就是我们程序员的真是写照。但我们还是一样热爱生活,热爱Java,HTML ,JSP。
在昨天的文章中,我写了关于Javascript中null 与 undefined 的区别。好像大家都不怎么感兴趣,小编感到很失落,不过,没事,小编还是一如既往的更新,让大家带来一些前端的干货。
2024年10月26日
今天在写一个关于 html 中 select 下拉元素选择的动态事件时,发现如果使用 javascript 中的 click 事件的话,会被执行两次。网上查了一下资料,发现 select 元素下拉选中事件并不适合使用 click 来触发,而要使用 change 事件。
html代码
<select name="mochu" id="mochu"> <option value="1">下拉1</option> <option value="2">下拉2</option> <option value="3">下拉3</option> <option value="4">下拉4</option> </select> <script> $('#mochu').click(function(){ console.log($(this).val()); }); </script>
2024年10月26日
企业网页推广时出现网页兼容问题,不仅在pc端开发中会碰到,而且在APP开发当中也会经常碰到。
1、禁止图片点击放大
2024年10月26日
1、绝对定位。盒子宽高已知, position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;
2、table-cell布局。父级 display: table-cell; vertical-align: middle; 子级 margin: 0 auto;
3、定位 + transform ; 适用于 子盒子 宽高不定时; (这里是本人常用方法)
position: relative / absolute;
/*top和left偏移各为50%*/
top: 50%;
left: 50%;
/*translate(-50%,-50%) 偏移自身的宽和高的-50%*/
transform: translate(-50%, -50%); 注意这里启动了3D硬件加速哦 会增加耗电量的 (至于何是3D加速 请看浏览器进程与线程篇)
4、flex 布局
父级:
/*flex 布局*/
display: flex;
/*实现垂直居中*/
align-items: center;
/*实现水平居中*/
justify-content: center;
再加一种水平方居中的方式 :margin-left : 50% ; transform: translateX(-50%);