首页 > 代码库 > 手机页面样式小问题收集
手机页面样式小问题收集
1. 伪类 :after
1. 清楚浮动
div:after{ overflow:hidden; }
2. 制作三角形
div:after{ content:‘‘; display:block; width:0; border-top:8px solid #000; border-left:8px solid transparent; border-right:8px solid transparent; }
2. 设置表单标签placeholder属性的样式
input[type="text"]::-webkit-input-placeholder{ color:red ; font-size:12px;}
3. css3防止动画中网页抖动
div{ -webkit-backface-visibility:hidden; }
4. 点击状态时无边框,-webkit-tap-highlight-color 对<a>有效果,可以设置点击时的背景颜色
a{ outline:0; -webkit-tap-highlight-color:rgba(0,0,0,0); }
5. 让图片在div中上下居中显示
div{ display:table-cell; vertical-align:middle; width: 300px; height: 300px; text-align: center;}div img{ width: 100px; vertical-align: top;}
6. css3盒模型(可以用于手机页面上的菜单)
/*父元素*/div{ display:-webkit-box; -webkit-box-orient:vertical; /*表示盒子元素在一条垂直线上从上到下编排它的子元素,不加这个属性表示默认横着排*/}/*子元素*/.m1,.m2{display:-webkit-box; -webkit-box-flex:1; /*占的比例*/ -webkit-box-pack:center; /*内容左右居中*/-webkit-box-align:center; /*内容上下居中*/}
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。