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

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

个人博客
  • ...
     前端 浏览(3)  tangzihan ++阅读原文
    CSS3做直角三角形
    原理和[三角形](https://www.zihanzy.com/articles/164)一样 为什么要做直角三角形? 先来看如下案例(京东首页) ![](http://)![](http://www.zihanzy.com/uploads/images/article_con/202008/03/article_con_15964...
  • ...
     前端 浏览(4)  tangzihan ++阅读原文
    行内块元素快速做分页
    通常我们的分页是 ul>li 然后在设置li左浮动间距等,有点麻烦 而如果用行内块元素做就不会遇到上述问题,并且自带间距 div{ text-align: center; } div a{ display: inline-bloc...
  • ...
     前端 浏览(4)  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
  • ...
     前端 浏览(0)  tangzihan ++阅读原文
    单行&多行文本溢出省略号
    单行溢出 div{ width:100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 测测测测测测测测测测测测测测测测测测测测测测...
  • ...
     前端 浏览(4)  tangzihan ++阅读原文
    图片底部空白间隙解决办法
    在开发时我们会遇到如下情况 ![](http://)![](http://www.zihanzy.com/uploads/images/article_con/202008/03/article_con_1596429632_x2tOF0fAxY.jpg) 可以看到图片底部有空白间隙 而我们的代码也很简单...
  • ...
     前端 浏览(2)  tangzihan ++阅读原文
    CSS中的小三角实现
    在网页制作中我们如何实现小三角? 如下京东官网 ![](http://)![](http://www.zihanzy.com/uploads/images/article_con/202008/03/article_con_1596429042_SWjbyIkCb4.jpg) 先来看如下代码 di...
  • ...
     前端 浏览(3)  tangzihan ++阅读原文
    外边距合并嵌套块元素塌陷问题
    如下案例 .f{ background-color: red; width:300px; height: 200px; } .s{ background-color: blue; width:150px; height: 100px; margin-top:30px; }...
  • ...
     前端 浏览(3)  tangzihan ++阅读原文
    CSS权重计算
    在没有引入权重的概念时,我们对css的优先级认识是这样的 !important`>`行内样式`>`ID`>`类/伪类|属性`>`标签 排在最前面的优先级越高。 但css是有权重机制的,css的优先级都是根据权重推算出来 如下表格 用四位数字...
  • ...
     前端 浏览(1)  tangzihan ++阅读原文
    CSS继承特性之行高继承
    我们知道在CSS中子元素会继承父元素的一些样式,如颜色,字号等 如下示例 body{ font-size: 40px; color:skyblue } 我会继承父元素的样式 ![](http://)![](http://w...
  • ...
     前端 浏览(11)  tangzihan ++阅读原文
    uni-app修改vuex里面的数据,返回上一页面时数据不刷新的问题
    案例如下: A页面展示收货地址列表 ![](http://)![](http://www.zihanzy.com/uploads/images/article_con/202007/27/article_con_1595827659_CtcVWQYzxv.jpg) B页面用于修改收货地址 ![](http://)![](http://www.zih...