侧边滑动条自定义
容器::-webkit-scrollbar {
width: 6px; //滚动条的宽度
}
容器::-webkit-scrollbar-thumb {
background-color: #8899A7; //滚动条的颜色
border-radius: 3px;//滚动条的边框倒角
}
** input框 placeholder样式设置**
::-webkit-input-placeholder {} /*使用webkit内核的浏览器*/
:-moz-placeholder {} /*Firefox版本4-18*/
::-moz-placeholder {} /*Firefox版本19+*/
:-ms-input-placeholder {} /*IE浏览器*/
多选框样式
input[tyoe=checkbox]{
-webkit-appearance: none;
-moz-appearance: none;
width: 16px;
height: 16px;
border-radius: 2px;
background-color: transparent;
border: 1px solid #1bba79;
float: left;
outline: none;
}
input[type=checkbox]:checked{
background: #0000ff;
}
移动端网页自适应
html,body{
font-size: 26.67vw!important
}
文本下划线
text-decoration : none: 无装饰
blink: 闪烁
underline:下划线
line-through: 贯穿线
overline : 上划线
js获取页面元素距离浏览器工作区顶端的距离
**网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度)**
js:
document.documentElement.scrollTop //firefox
document.documentElement.scrollLeft //firefox
document.body.scrollTop //IE
document.body.scrollLeft //IE
jq:
$(window).scrollTop()
**//距离顶部高度**
jq:
$(window).scrollLeft()
**// 距离左边距距离网页工作区域的高度和宽度**
js:
document.documentElement.clientHeight// IE firefox
jq:
$(window).height()
**元素距离文档顶端和左边的偏移值**
js:
DOM元素对象.offsetTop //IE firefox
DOM元素对象.offsetLeft //IE firefox
jq:
jq对象.offset().top
jq对象.offset().left
**获取页面元素距离浏览器工作区顶端的距离**
页面元素距离浏览器工作区顶端的距离 = 元素距离文档顶端偏移值 - 网页被卷起来的高度即:
页面元素距离浏览器工作区顶端的距离 = DOM元素对象.offsetTop - document.documentElement.scrollTop
input 苹果兼容性问题
input,textarea{
border: 0;
-webkit-appearance: none;
}
移动端a标签点击时有阴影
a {
outline: none;
-moz-outline-style: none; //适配IOS
}
body{
-webkit-tap-highlight-color: rgba(0,0,0,0); //适配IOS
}
常用的苹方字体样式
// 苹方-简 常规体
font-family: PingFangSC-Regular, sans-serif;
// 苹方-简 极细体
font-family: PingFangSC-Ultralight, sans-serif;
// 苹方-简 细体
font-family: PingFangSC-Light, sans-serif;
// 苹方-简 纤细体
font-family: PingFangSC-Thin, sans-serif;
// 苹方-简 中黑体
font-family: PingFangSC-Medium, sans-serif;
// 苹方-简 中粗体
font-family: PingFangSC-Semibold, sans-serif;