手机页面样式小问题收集
2014-08-13 11:17
176 查看
1. 伪类 :after
1. 清楚浮动
2. 制作三角形
2. 设置表单标签placeholder属性的样式
3. css3防止动画中网页抖动
4. 点击状态时无边框,-webkit-tap-highlight-color 对<a>有效果,可以设置点击时的背景颜色
5. 让图片在div中上下居中显示
div{display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;}
6. css3盒模型(可以用于手机页面上的菜单)
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;line-height:normal}
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;} /*或者*/
div{display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;}
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; /*内容上下居中*/ }
相关文章推荐
- Android UI 手机页面信息(布局、样式及程序国际化问题)
- mint-ui在手机页面的样式不正常问题
- 在做Asp.Net开发的时候,经常会遇到页面乱码的问题,下面是在网上收集的相关资料,请大家参考:
- CSS 控制页面样式的4种方式和优先级问题
- 手机页面开发时出现问题
- phonegap-手机APP页面的若干技术问题
- 手机页面关于头部固定定位与input出现的问题
- (网上收集)asp.net页面打印问题?
- [项目bug收集整理3]get页面,post页面的url 参数预防问题
- 手机浏览页面样式注意事项
- 手机浏览器页面知识收集
- [项目bug收集整理3]get页面,post页面的url 参数预防问题
- JSP页面运用样式的问题
- 手机版样式无效、乱码等问题
- 收集的常用css页面及表单表格样式
- Windows phone手机开发之图片选择器,照相机功能,计时器,加速度,图片路径问题,页面间传值,随机产生数字
- 页面中文乱码问题收集(原创)
- 手机平台中QQ浏览器在页面中点击一个超链接会刷新整个页面问题解决
- 弹出窗口后,原页面样式改变(如:字体变大了等)的问题
- 关于手机显示web页面样式笔记