前端常见css样式调整

编程入门 行业动态 更新时间:2024-10-23 18:24:34

前端常见css<a href=https://www.elefans.com/category/jswz/34/1771146.html style=样式调整"/>

前端常见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样式调整

本文发布于:2024-03-08 22:07:38,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1722577.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:样式   常见   css

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!