码迷,mamicode.com
首页 > 移动开发 > 详细

手机页面样式小问题收集

时间:2014-08-13 12:56:26      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   strong   ar   问题   div   line   

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;   /*内容上下居中*/
}

 

手机页面样式小问题收集,布布扣,bubuko.com

手机页面样式小问题收集

标签:style   blog   color   strong   ar   问题   div   line   

原文地址:http://www.cnblogs.com/zhongzi812/p/3909584.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!