至于未来会怎么样 反正路还长 天总会亮

Life is a journey, not a destination, care should be the scenery along the way and the mood to see the scenery.

个人博客
  • ...
     前端 浏览(11)  tangzihan ++阅读原文
    css3d实现两面翻转的盒子
    body{ perspective: 500px; } .box{ position: relative; width: 300px; height: 300px; margin: 100px auto; transform-style: preserve-3d; transition: all .4s; }...
  • ...
     前端 浏览(11)  tangzihan ++阅读原文
    CSS3d转换
    3D特点 近大远小 物体后面遮挡不可见 三维坐标系 x轴:水平向右 右边是正值,左边是负值 y轴:垂直向下 下面是正值,上面是负值 z轴:垂直屏幕 往外面是正值,往里面是负值 如下图: 不过在我们css中y轴向上...
  • ...
     前端 浏览(10)  tangzihan ++阅读原文
    CSS实现小箭头效果
    项目中要使用小箭头时我们一般引入字体图标,但其实css3也可以画出一个小箭头主要利用了tranform的rotate 我们的小箭头的原型是一个正方形,我们只保留正方形底部和右边区域在使其旋转45度即可...
  • ...
     前端 浏览(10)  tangzihan ++阅读原文
    结构伪类选择器nth-child与nth-of-type的区别
    首先他们都是属于结构伪类选择器,都可以键入公式、关键词、序号等 不过他们在指定查找元素时会小小的区别 nth-child:会将所有元素进行标号,当查找指定元素是,会先根据序号查找该元素,找到后在与伪类前面的元素进...
  • ...
     前端 浏览(15)  tangzihan ++阅读原文
    CSS3做直角三角形
    原理和[三角形](https://www.zihanzy.com/articles/164)一样 为什么要做直角三角形? 先来看如下案例(京东首页) ![](http://)![](http://www.zihanzy.com/uploads/images/article_con/202008/03/article_con_15964...
  • ...
     前端 浏览(11)  tangzihan ++阅读原文
    行内块元素快速做分页
    通常我们的分页是 ul>li 然后在设置li左浮动间距等,有点麻烦 而如果用行内块元素做就不会遇到上述问题,并且自带间距 div{ text-align: center; } div a{ display: inline-bloc...
  • ...
     前端 浏览(9)  tangzihan ++阅读原文
    margin负值的运用
    ul li{ list-style: none; border:1px solid red; float: left; width: 200px; height: 100px; margin-left: -1px; } 1 2 3 4 5
  • ...
     前端 浏览(5)  tangzihan ++阅读原文
    单行&多行文本溢出省略号
    单行溢出 div{ width:100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 测测测测测测测测测测测测测测测测测测测测测测...
  • ...
     前端 浏览(9)  tangzihan ++阅读原文
    图片底部空白间隙解决办法
    在开发时我们会遇到如下情况 ![](http://)![](http://www.zihanzy.com/uploads/images/article_con/202008/03/article_con_1596429632_x2tOF0fAxY.jpg) 可以看到图片底部有空白间隙 而我们的代码也很简单...
  • ...
     前端 浏览(8)  tangzihan ++阅读原文
    CSS中的小三角实现
    在网页制作中我们如何实现小三角? 如下京东官网 ![](http://)![](http://www.zihanzy.com/uploads/images/article_con/202008/03/article_con_1596429042_SWjbyIkCb4.jpg) 先来看如下代码 di...