解决苹果ios手机下select标签和input标签显示问题 手机端页面在苹果ios下select标签和input标签显示颜色很奇怪？而安卓上显示没问题。出现这个问题的原因：因为ios有自己自带的样式，我们需要将默认样式取消掉，然后在设计自己的样式input[type=datetime-local]{ -webkit-appearance:none; outline:none; border:none; } select{ -webkit-appearance: none; /*这样select默认的样式就没有了，后面的箭头也没有了，自己找个图标添加进去就可以了*/ padding-right:30px; /*给右边图标留位置*/ background: url("arrow.png") no-repeat scroll right center transparent; /*放自己的图标*/ }

解决foundation5下CSS伪元素::after在iOS14以上系统不显示问题 最近在写页面，发现ios下不显示，安卓和pc折叠导航下的CSS伪元素::after都能正常显示。解决方法：因为官方默认高度为0没有加上高度height对此，我们只需增加一段样式<style> .top-bar .toggle-topbar.menu-icon a span::after{ height: 1px; background: #fff } </style>即可解决该问题。

animate.css动画执行时间修改方法 Animate.css 作为一款强大的预设css3动画库，很值得我们在项目中引用。但是统一的动画时间不是很好看。可以通过下面css对其进行修改。.ssxin1为class，可以独立为每个动画设置.ssxin1.animated { -webkit-animation-duration: 1s; animation-duration: 2.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }

css实现导航鼠标悬停走动酷炫效果 我们有时做项目需要使用到类似上面的效果，可以参考下面的代码实现方法html页面代码： <div class="header"> <ul> <li><a href="https://www.tpxhm.com/fdetail/828.html#">首页</a></li> <li><a href="https://www.tpxhm.com/fdetail/828.html#">最新活动</a></li> <li><a href="https://www.tpxhm.com/fdetail/828.html#">项目介绍</a></li> <li><a href="https://www.tpxhm.com/fdetail/828.html#">关于我们</a></li> <span class="move"> </span> </ul> </div>css代码实现： <style> * { padding: 0px; margin: 0px; } body{ min-width: 1280px; } .header { height: 56px; width: 100%; border: 1px solid gray; } div.logo { float: left; margin: 10px 50px; } div.logo span { font-size: 23px; display: block; float: right; } ul { list-style-type: none; padding: 0px; float: right; position: relative;/*子元素absol*/ } ul img{ position: relative; top: 3px; } ul li { width: 110px; height: 56px; text-align: center; float: left; } ul li a { color: #848789; text-decoration: none; line-height: 56px; } ul a:hover{ color: red; } .move{ height: 4px; width: 110px; border-top: 4px solid red;/*只需要将上边显示出来*/ position: absolute; left: 0; top: 52px; transition: left .2s ease-in-out 0s;/*包含四个过度属性：执行变换属性、执行时间、速率、延迟*/ -webkit-transition: left .2s ease-in-out 0s;/*chrome和safari*/ -moz-transition: left .2s ease-in-out 0s;/*firefox*/ -o-transition: left .2s ease-in-out 0s;/*opera*/ } li:nth-child(1):hover~ .move{ /*li元素的父元素的第一个子元素，当鼠标停留其上时，move元素的left属性改变*/ left: 0px; } li:nth-child(2):hover~ .move{ left: 110px; } li:nth-child(3):hover~ .move{ left: 220px; } li:nth-child(4):hover~ .move{ left: 330px; } li:nth-child(5):hover~ .move{ left: 440px; } li:nth-child(6):hover~ .move{ left: 550px; } </style>使用上面的代码就可以实现出上图所示效果，供大家参考。

css关闭a标签点击出现蓝色背景问题 在做手机端页面的时候，会发现a标签点击会出现背景颜色问题，我们可以通过css样式来设置，解决这个问题。body { -webkit-tap-highlight-color:rgba(0,0,0,0); }这句代码加上去之后就不会出现点击背景颜色问题了。