This website requires JavaScript.

coding

Css, 2 posts

实用的代码整理

@media媒体查询:隐藏指定元素,更改宽度为100%实现自适应。

响应式(RWD) = 所有设备的代码是一样的
自适应(AWD)= 不同设备的代码是不一样的

查询问题:

一张图看懂响应式(Responsive design)和自适应技术(Adaptive design)的区别

去除input浏览器自动填充样式:

input{
    background-color: rgba(255,255,255,0) !important;
}
input:-webkit-autofill{
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #fff !important;
  }
input:-webkit-autofill:focus{
    -webkit-text-fill-color: #fff !important;
}

横向滚动条和纵向滚动条:

.test-1::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.test-1::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
}

.test-1::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #ededed;
}

/*  下面横向滚动条原理同上 
    在最后加上    :horizontal
*/
.test-1::-webkit-scrollbar:horizontal {
    width: 20px;
    height: 20px;
}

.test-1::-webkit-scrollbar-thumb:horizontal {
    background-color: aquamarine;
}

.test-1::-webkit-scrollbar-track:horizontal {
    background: blueviolet;
}