随笔分类 - css

web常用字体

摘要：Sans-serif Helvetica: 被评为设计师最爱的字体，Realist风格，简洁现代的线条，非常受到追捧。在Mac下面被认为是最佳的网页字体，在Windows下由于Hinting的原因显示很糟糕。 Arial: Helvetica的「克隆」，和Helvetica非常像，细节上比如R和G有阅读全文

posted @ 2021-02-07 13:14 xiaoYu& 阅读(525) 评论(0) 推荐(0) 编辑

让未知尺寸的图片在已知宽高的容器内水平垂直居中

摘要：#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;} #test p{*position:absolu 阅读全文

posted @ 2020-03-25 13:23 xiaoYu& 阅读(143) 评论(0) 推荐(0) 编辑

css清除浮动

摘要：在进行谁不排列布局时，经常会使用元素的float属性，从而会使父容器高度无法自适应，这时候，只需要添加一个带有clear:both属性的元素就能清除浮动带来的高度问题： <div class="container"> <div class="item"></div> <div class="item 阅读全文

posted @ 2020-03-20 09:06 xiaoYu& 阅读(113) 评论(0) 推荐(0) 编辑

解决刷新页面加载图片会闪屏的问题

摘要：我这里用的是一个比较取巧的方法（这里是jquery的写法）：在css里默认的样式把图片设为全透明： img{ opacity: 0} 页面图片加载完毕后在将透明度设为不透明，这样就能达到遮掩闪屏的效果： $("img").css({opacity: 1}); 阅读全文

posted @ 2019-10-21 10:46 xiaoYu& 阅读(1782) 评论(0) 推荐(0) 编辑

图片放大镜特效

摘要：分享最近写的一个图片放大镜的特效，原理很简单，仅供参考：在一个div里，分为两个作用域，一个用于显示缩略图（放小图的，这里我们叫做A），一个用于显示放大后的图（放大图的，这里我们叫做B）；在A里，有一个缩略图（A1）和一个悬浮遮挡层（A2），在B里，是一个放大的图（B1）；这里我们需要注意的是阅读全文

posted @ 2019-09-26 10:27 xiaoYu& 阅读(1045) 评论(0) 推荐(0) 编辑