CSS实现小箭头效果

项目中要使用小箭头时我们一般引入字体图标，但其实css3也可以画出一个小箭头主要利用了tranform的rotate 我们的小箭头的原型是一个正方形，我们只保留正方形底部和右边区域在使其旋转45度即可...

结构伪类选择器nth-child与nth-of-type的区别

首先他们都是属于结构伪类选择器，都可以键入公式、关键词、序号等 不过他们在指定查找元素时会小小的区别 nth-child:会将所有元素进行标号，当查找指定元素是，会先根据序号查找该元素，找到后在与伪类前面的元素进...

CSS3做直角三角形

原理和[三角形](https://www.zihanzy.com/articles/164)一样 为什么要做直角三角形？ 先来看如下案例（京东首页） ![](http://www.zihanzy.com/uploads/images/article_con/202008/03/article_con_15964...

行内块元素快速做分页

通常我们的分页是 ul>li 然后在设置li左浮动间距等，有点麻烦 而如果用行内块元素做就不会遇到上述问题，并且自带间距 div{ text-align: center; } div a{ display: inline-bloc...

margin负值的运用

ul li{ list-style: none; border:1px solid red; float: left; width: 200px; height: 100px; margin-left: -1px; } 1 2 3 4 5

单行&多行文本溢出省略号

单行溢出 div{ width:100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 测测测测测测测测测测测测测测测测测测测测测测...

图片底部空白间隙解决办法

在开发时我们会遇到如下情况  可以看到图片底部有空白间隙 而我们的代码也很简单...

CSS中的小三角实现

在网页制作中我们如何实现小三角？ 如下京东官网  先来看如下代码 di...

外边距合并嵌套块元素塌陷问题

如下案例 .f{ background-color: red; width:300px; height: 200px; } .s{ background-color: blue; width:150px; height: 100px; margin-top:30px; }...

CSS继承特性之行高继承

我们知道在CSS中子元素会继承父元素的一些样式，如颜色，字号等 如下示例 body{ font-size: 40px; color:skyblue } 我会继承父元素的样式 ![](http://w...