样式调整"/>
前端常见css样式调整
侧边滑动条自定义
容器::-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;
更多推荐
前端常见css样式调整
发布评论