用到的属性
但是通常我们还会添加 pointer-events: none 来禁用掉对应div
但是这样,问题就出来了---------- cursor: not-allowed 这个属性失效了。
在目标div上再套一层div,将 cursor: not-allowed 加到父盒子上,目标div保留 pointer-events: none
1.目前台式电脑与笔记本适配测试数据以下为参考数值:
台式机和笔记本电脑的分辨率:2560x1440 1920x1200 1680x1050 1600x1200 1440x900 1366x768 1280x1024 1280x800 1280x768 1152x864 1024x768 800x600
平板电脑分辨率:iPad( 768x1024 )iPad Pro(1024x1366)Nexus 10(800x1280) Nexus 7(600x960)---显示都是不完整的
智能手机分辨率:Nexus 5(360x598) Nexus 5x(412x684) iPhone 6 Plus(414x736) iPhone 6(375x667) iPhone 5(320x568) iPhone 4(320x480)------显示都是不完整的
2.突然出现滚动条禁止屏幕抖动:
body {
padding-right: calc(100vw - 100%)
}
3.更改(美化)滚动条样式:
//滚动条整体部分
::-webkit-scrollbar {
width: 6px
height: 6px
background-color: transparent
}
//滚动条轨道部分
::-webkit-scrollbar-track {
background-color: transparent
}
//滚动条滑块部分
::-webkit-scrollbar-thumb {
border-radius: 3px
background-image: linear-gradient(135deg, #09f, #3c9)
}
4.自动识别文本换行
7.页面暗黑模式:
html{
filter: invert(1) hue-rotate(180deg)
}
8.页面悼念(全灰)模式:
html{
filter: grayscale(1)
}
9.两端文本对齐 :
text-align-last:justify
10.禁用效果 :
pointer-events:none
11.aspect-ratio维持图片长宽比 :
aspect-ratio:1/1
12.clamp() 实现页面的响应式 :
clamp() 的工作原理是“夹紧”或限制一个灵活的值,使其处于最小和最大范围之间
img {
width: clamp(15vw, 800%, 100%)
}
h1 {
font-size: clamp(20px, 5vw, 35px)
}
css input样式修改的方法:1、利用伪类元素改变radio样式;2、利用label指向input,然后通过改变label样式来达到效果即可。本文操作环境:Windows7系统、Dell G3电脑、HTML5&&CSS3版。
css改变input框样式
目前博主只知道两种方法,如果有同学有别的方法欢迎进行讨论
一:利用伪类元素改变radio样式 (此方法无需添加额外的标签,更便捷)