前端开发

CSS解决图片缩放变模糊不清晰

位图在放大尺寸后都会变得模糊不清晰，但在网页中插入图片时，即使原图非常清晰，缩小尺寸后也可能变得模糊。使用CSS的image-rendering属性，可以解决这一问题，使用前后对比如下图所示： …

对于宽度小于父元素宽度的行内子元素，要实现水平居中，可以给父元素使用： div { text-align: center; } 小于父元素宽度的情况，如果已知子元素宽度，可以使用相对定位和负外边距方法： div img { position: relative; left: 50%; margin-left: -130px; //元素宽度除以2 } 小于父元素宽度的情况，如果子元素宽度未知，可以将子元素设置为块级元素，再设置左右外边距为auto： …

JS获取DPI解决打印页面像素计算问题

一般电脑默认96DPI或72DPI，JS可以通过以下方法获取DPI的值： function get_dpi() { for (var i = 56; i < 2000; i++) { if (matchMedia("(max-resolution: " + i + "dpi)").matches === true) { return i; } } } 有了DPI值就可以计算出毫米与像素之间的等值： 1毫米=DPI/25.4 因为DPI为每英寸内的像素点数，1英寸=25.4mm，所以DPI除以25.4就是1毫米的像素数。 …

CSS文本显示行数控制

对于单行的文字截断，可以使用text-overflow: ellipsis属性来实现： li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 此时，溢出的文字会被省略号…代替。多行文本的情况，例如博客文章摘要，在PC端和手机端需要显示不同数量的文字，那么则可以使用以下代码来控制显示行数： …

Bootstrap4 Carousel轮播上下滚动、淡入淡出效果

Bootstrap4 Carousel轮播非常简单好用，默认左右滚动效果，但通常的需求是三种情况：左右滚动（水平滚动）、上下滚动（垂直滚动）、淡入淡出。通过增加少量的CSS，就可以为Bootstrap4 Carousel轮播增加上下滚动（垂直滚动）、淡入淡出效果。 …

Unslider插件增加鼠标悬停时停止播放功能

Unslider是一款轻量的jQuery轮播插件，简单好用，但默认不支持鼠标悬停时停止播放功能，这是一般轮播插件都支持的功能，像Unslider这样优秀的插件应该是支持的，然而我读了一下源码也没发现有可用的参数支持该功能。 …

CSS未知高度元素垂直居中解决方法

通常产品列表，我们希望产品图片是在一个盒子内垂直居中，如果图片尺寸未知，且希望保持原来的宽高比例，就涉及到未知高度元素垂直居中的问题。如果不用考虑IE6/7，问题会非常简单，display: table-cell 可以将元素以表格单元格的形式呈现，那么垂直居中就不是问题了，现在我们的情况是要考虑IE6/7，display: table-cell 在IE6/7下行不通。 …

清除网络运营商植入广告CSS代码

前面我发表了屏蔽网络运营商植入广告jQuery代码，但是有一个缺陷，广告仍然会显示一瞬间，虽然一眨眼的功夫就消失了，给人的感觉还是不很好。所以，我写了一段CSS代码来屏蔽： #colophon ~ * { display: none !important; width: 0 !important; height: 0 !important; font-size: 0 !important; overflow: hidden !important; } 注意选择符，因为我网站每个页面的最后一元素ID都是colophon，如果你不确定你页面的最后一个元素是什么，可以在页脚模板（通常是footer.php、footer.tpl）的</body>前面添加一个空元素： …

屏蔽网络运营商植入广告jQuery代码

目前我网站没有挂任何广告，然而在移动端浏览时却发现时不时的在页脚出现一个悬浮广告，一开始就知道是网络运营商劫持植入的广告，但没理会。昨晚闲来无事搜索了一下，发现有同样问题的用户还不少。 …

-webkit-appearance导致checkbox复选框消失

-webkit-appearance: none会清除WebKit引擎浏览器默认样式，有时会很有用，但使用这个样式后会导致checkbox复选框和radio单选框消失。解决办法： input[type="checkbox"] { -webkit-appearance: checkbox; } input[type="radio"] { -webkit-appearance: radio; } 添加以上CSS即可解决-webkit-appearance导致checkbox复选框和radio单选框消失问题。 …