css
栗子i维C
这个作者很懒,什么都没留下…
展开
-
滚动条样式修改
/*==================== 重置滚动条 =================*//*滚动条背景*/.course-tab ul::-webkit-scrollbar {width: 8px; height:8px; background-color: #eee;}.course-tab ul::-webkit-scrollbar-track {border-radius: 0; }/*滚动条样式*/.course-tab ul::-webkit-scrollbar-.原创 2021-03-06 16:20:47 · 157 阅读 · 0 评论 -
css3 文字渐变
.c-gradient-main{color: #b30100;background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#dc222b), to(#b30100)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;padding-right:32px;}原创 2020-12-23 15:42:17 · 120 阅读 · 0 评论 -
微信小程序去除Button默认样式
在小程序开发过程中,使用率蛮高的组件button,因为经常要去除默认样式,然后再自定义样式,所以经常写,自己也总结分享一下简单的实现步骤。首先了解一下默认的样式有哪些,然后根据自己的UI来实现:button {position:relative;display:block;margin-left:auto;margin-right:auto;padding-left:14px;...转载 2019-09-20 11:20:28 · 370 阅读 · 0 评论 -
微信小程序超出文本显示省略号
-单行文本超出:(建议设置一个宽度,默认为100%).team-content { width: 500rpx; display:-webkit-box; -webkit-line-clamp:1; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; word-break:br...转载 2019-07-24 17:25:34 · 948 阅读 · 0 评论 -
CSS实现垂直水平居中
元素已知宽度绝对定位 + margin auto + 流体特性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <t...转载 2019-03-21 14:18:12 · 214 阅读 · 0 评论 -
页面居中对齐
1、top:50%;left:50%; transform:translate(-50%,-50%); 2、top:50%;left:50%; margin-left:-宽度的一半; margin-top:-高度的一半;原创 2018-11-19 16:36:48 · 1065 阅读 · 0 评论 -
transform
rotate rotateX rotateY rotateZrotate3d(x,y,z,deg)translate()1个参数 延长X的平移 2个参数 :第一个参数X,第二个参数Y原创 2018-10-25 09:42:07 · 227 阅读 · 0 评论 -
文本样式
attachment:fixed scrollfont-style:italic行高为奇数时,文字上方比下方少一个像素font: style font-weight size/line-height family;注意属性顺序文字:单个 文本 :段落text-indent:2em;em是根据当前字体大小计算的 1em=当前字体大小text-d...原创 2018-10-10 17:34:28 · 159 阅读 · 0 评论 -
css3盒模型
css3盒模型 w3c标准盒模型 IE6混杂模式盒模型 盒宽 = 设置宽+padding+border 盒宽 = 设置宽 box-sizing:border-box 将w3c标准盒模型 转换为 IE6混杂模式盒模型div{width:100%;padding:10px;border:3px;}不会超出父级宽度...原创 2018-10-11 15:18:32 · 147 阅读 · 0 评论 -
一些注意
标签样式初始化 ,但凡是浏览器样式,都不要使用body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,form,input,textarea,th,td,select{margin:0;padding:0;}样式权重:行间样式 > id选择器 > 类选择器 > 标签a链接顺序:link|——visited——hover——active 透明...原创 2018-10-11 15:07:33 · 173 阅读 · 0 评论 -
行间 块元素
块的特性:1、默认独占一行2、没有宽度时,默认撑满一行3、支持所有css命令行间元素的特性1、同排可以继续跟同类2、内容撑开宽度3、不支持宽高4、不支持上下的margin5、代码换行被解析,有空格行间、块元素 转换1、display2、float3、position只有display:block才会宽度继承父元素...原创 2018-10-11 14:54:38 · 347 阅读 · 0 评论 -
margin-top 问题
margin-top 传递问题:向父级传递解决:父级加边框margin 的上下叠加解决:单独设置原创 2018-10-11 14:42:51 · 195 阅读 · 0 评论 -
CSS 转义字符对照表
HTML有许多特殊的字符,您对此有多少了解?平时在WEB制作中,您又有用到多少?或者说你在平时使用之时,是否也会碰到,有许多特殊字符要如何打印出来?比如说“笑脸”,比如说“版权号”。要是你用时忘记了这些特殊字符,不要紧,请记住今天这个地址,你就随时可以查到这些特殊字符的表示方法。简单的介绍一下其使用方法:1、这些字符属于unicode字符集,你的文档需要声明为”utf-8“2、列表符号...转载 2018-09-06 17:54:13 · 2207 阅读 · 0 评论 -
渐变背景设置
div{background-color:#a5db0f;background-image:-webkit-repeating-linear-gradient(left,#fff,#a5db0f100px);background-image:repeating-linear-gradient(left,#fff,#a5db0f50px);}div{backgrou...原创 2018-08-14 18:16:40 · 254 阅读 · 0 评论 -
取消a标签在移动端点击时的背景颜色
一、取消a标签在移动端点击时的蓝色-webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-user-select: none;-moz-user-focus: none;-moz-user-select: none;二、使用图片作为a标签的点击按钮时,当触发touchstart的时候,往往会有一个灰色的背景 ...转载 2018-07-24 16:47:54 · 413 阅读 · 0 评论 -
为了美观当网页图片不存在时不显示叉叉图片
当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验。即使使用alt属性给出了”图片XX”的提示信息,也起不了多大作用。其实,可以这样处理:当图片不存在的时候,会触发onerror事件,我们可以在该事件中做一下补救的工作,比如:1、让这个图片元素隐藏: src="图片的url地址" alt="图片XX"onerror="this.sty...转载 2018-07-23 14:44:54 · 618 阅读 · 0 评论