随笔分类 -  CSS

一些CSS的样式修改
苹果手机不显示微软软黑的解决方案
摘要：我写了个溯源页面，字体UI设计的微软雅黑，但是打包好放到苹果手机上，英文数字和中文字体不一样 想下载font-face字体包，结果都要冲会员，结果因为钱包太干净，只能作罢， 后面我想到font-family可以写多个属性值，又百度了下苹方的CSS写法， 我用了常规的，PingFangSC-Regul 阅读全文
posted @ 2022-04-01 20:28 额爷 阅读(541) 评论(0) 推荐(0)
手写CSS+js实现radio单选按钮
摘要：有的时候我们需要用长得漂亮一点的单选按钮，那么，就要抛弃原有的自己来写，下面就是我实现的 效果图： 好啦，到这里就可以实现啦 阅读全文
posted @ 2018-01-09 15:00 额爷 阅读(5350) 评论(0) 推荐(1)
弹出对话框的同时出现遮罩层
摘要：最近的项目有留言板弹出对话框，然后我就自己写了一个静态的，下面是我的代码 如果你不希望有弹框的时候页面还会滚动，那就加上$('body').css('overflow-y','hidden');就可以了 阅读全文
posted @ 2018-01-08 14:49 额爷 阅读(746) 评论(0) 推荐(0)
CSS样式重置
摘要：在我们准备开发一个项目的时候，肯定要考虑到一些浏览器的兼容性，或者更方便自己编写一个页面，那么这时候很多人就会想到CSS的重置，一般人都会这样写 注意，不能像有些网站上写的这样：*{margin:0;padding:0;}，这样会白白耗费很多性能 不过就上面的一大堆标签而言，我们也有很多用不到的，和 阅读全文
posted @ 2017-12-12 14:43 额爷 阅读(250) 评论(0) 推荐(0)
修改select的默认样式
摘要：在我们用select的时候，通常因为他的默认样式比较丑而用自己样式，那首先要去掉他的默认样式 去掉select的边框和点击时的蓝色边框 去掉select下拉的小三角 所有浏览器都不支持appearance属性 Firefox支持替代的-moz-appearance属性 Safari和Chrome支持 阅读全文
posted @ 2017-12-06 17:06 额爷 阅读(5207) 评论(2) 推荐(0)
onmouseover和onmouseout鼠标移入移出切换图片的几种实现方法
摘要：鼠标移入移出图片切换很常见的，那我们就来说说他的写法 第一种方法，也是最简单的一种，在html；里就可实现 先默认一张图片，然后在写图片移入移出的图片 第二种方法，js替换 在js里面写好替换图片的方法，在html里面调用 若是不用onmouseover和onmouseout的话，还可以这样写 这三 阅读全文
posted @ 2017-12-06 16:50 额爷 阅读(10575) 评论(1) 推荐(0)
height设置百分比的条件
摘要：很多时候我们在给height设置百分比的时候不起作用， 这时候就要来谈谈什么情况下才起作用了 1）所有父级元素必须有高度； 2）必须是块级元素，行内元素不起作用； 3）ie9 以下 使用 position:ralative 的块级 元素使用 高度百分比是无效的。 满足这几个条件，不起作用都难 阅读全文
posted @ 2017-11-22 18:05 额爷 阅读(994) 评论(0) 推荐(0)
纯CSS手动滑动轮播图（隐藏滚动条）
摘要：HTML： CSS: 其实横向轮播很简单，只要宽度超出父级就可以滑动，主要是滚动条要隐藏，最外层和第二层都要有固定高度，然后外层比内层高度高一点，滚动条在最下面，然后最外层overflow：hidden；就可以啦 对比图： 之前：， 之后： 其实还有一些简单的方法，但只限于-webkit内核的，支持 阅读全文
posted @ 2017-11-17 16:53 额爷 阅读(4048) 评论(0) 推荐(0)
CSS的一些单位，如rem、px、em、vw、vh、vm
摘要：总结了一下一些单位的不同 px：像素（pixel）相对长度单位，，是相对于屏幕显示器分辨率而言的； em：em的值并不是固定的，会集成父级元素的字体大小； 注意： 1.body选择其中声明Font-size=62.5%； 2.将原来的px数值除以10，然后换上em作为单位； 3.重新计算那些被放大的 阅读全文
posted @ 2017-11-17 15:15 额爷 阅读(6557) 评论(0) 推荐(1)
纯CSS写的各种小三角和小箭头
摘要：头朝下的小三角 width:0; height:0; border:50px solid transparent; //所有border都是透明的， border-top-color:black; //只有尖相对的方向border有颜色 同理，头朝上的小三角，只要把border-top-color改 阅读全文
posted @ 2017-11-17 10:52 额爷 阅读(9512) 评论(1) 推荐(0)
改变input的placeholder字体颜色
摘要：改变input的placeholder字体颜色，注意哦，只是placeholder的字，用户输入的字不可以 若只是移动端这样就可以，如实PC端的话，下面的都要加上 -moz代表firefox浏览器私有属性-ms代表IE浏览器私有属性-webkit代表chrome、safari私有属性-o-代表ope 阅读全文
posted @ 2017-11-17 09:48 额爷 阅读(9387) 评论(1) 推荐(0)